뚱이의 이모저모 세상 알기 & 개발 일기 😼 뚱이의 이모저모 세상 알기 & 개발 일기 😼

개발자 톡 방에서 프로세스와 스레드에 관한 글이 올라왔다. 그래서 한 번 읽어보다가 다시 한번 리마인드 하는 계기가 되어서 간단하게나마 정리를 하려고 한다. 프로세스(Process) Process와 Thread에 대해서 알아보기 전에, 우선 Program에 대해서 간단하게 살펴보자면 Program은 코드 및 정적인 데이터의 묶음을 말한다. 그리고 이런 Program을 실행 시키는 것을 Process(프로세스) 라고 한다. 즉, Process는 실행 중인 Program이며, 이는 운영체제로부터 시스템 자원을 할당 받는 작업의 단위이다. Process는 크게 4개의 메모리 영역으로 구성 되어있다. Stack은 매개변수, 지역 변수 등 임시적인 자료가 저장되는 공간이고, Heap은 동적으로 할당되는 메모리이며..

새로운 토이 프로젝트를 하나 만들어보기로 했다. 그런데 이번에는 단순히 연습용, 포트폴리오용이 아니라 실제로 배포해서 알리고 사용 할 수 있게끔 신경을 좀 써서 만들고 싶어졌다. 그렇게 같이 스터디를 하던 백엔드 개발자분과 함께 둘이서 스터디 플래너 "에듀도로"를 만들자는 계획을 시작했다. 우선 두 명이서 각자 할 일을 배분했다. 프론트엔드 (나) 기획 웹 (가능하면 앱까지) UI / UX 디자인 백엔드 기획 마케팅 백엔드 데이터분석 백엔드분께서는 기획, 마케팅, 데이터분석, 백엔드를 맡아서 진행하게 되었고, 나는 기획과 웹, UI/UX, 디자인 쪽을 전담하게 되었다. 그래도 현재 회사에서 기획도 조금 해보았고, Logic flow도 짜보았고, (낮은 수준의) 스키마도 조금 짜보았기 때문에 어떡하지.. ..

... 언젠간 내가 아는 것들을 쉽게 설명 할 수 있는 날이 오길 바라며...! 은근히 헷갈려하는 것들 중에 포함 되는 것이 바로 이 쿠키(Cookie), 세션(Session), 토큰(Token), JWT(조트 or 제이더블유티)이다. 처음 코딩을 시작하는 분들이라면 아직까지는 알 필요 없을 수도 있지만, 이제 1년차가 되어가는 분들, 그리고 취준생분들이라면 그 개념을 확실히 해놔야 지금 당장 사용하지 않더라도 대화를 알아들을 수 있고 이해할 수 있을 것이라고 생각한다. ... ... ... 1. 쿠키 (Cookie) 우선 쿠키(Cookie)에 대해서 알아보자. 쿠키라는 것을 이용해서 서버는 내가 찾은 정보 등의 데이터를 나의 브라우저에 넣을 수 있다. 우리는 흔히 어떠한 사이트에 방문하고, 검색하는 식..

많은 프론트엔드 공부를 하는 분들이 초반에는 html, css, javascript 위주로 공부를 하다가, 나중에는 데이터를 다루게 되는 공부를 하게 된다. 그런데 이 때 백엔드 지식이 아직 준비되어있지 않은 경우 데이터를 어디서 사용해야할지 고민하게 된다. 주로 APIs를 불러와서 사용하는 경우가 있는데, 이 외에 서버처럼 사용하는 경우 또한 연습을 할 수 있으면 좋을 것이다! 이렇게 백엔드 지식 없이 백엔드를 사용하여 프론트엔드를 연습해 볼 수 있는 것이 바로 json-server 이다. ref: https://www.npmjs.com/package/json-server 우선 CRA를 통해서 리액트를 설치해준다. 그리고 json-server와 concurrently를 설치해준다. yarn add js..

요 며칠 리덕스의 사용으로 인해 혼자서 고군분투 하고 있었다. 대충 큰 그림도 그려지고 Todo-list, counter 증감과 같은 정도는 해낼 수 있을 것 같은데 이 정도 레벨에서 사용하자니 "무려" redux를 사용하기에 무척이나 아깝게 느껴졌다. 이를 더 충분히 활용하지 못하는 느낌이 들었다. 과거에 redux-toolkit에 대해서 잠깐 보긴 했지만 당장 이것을 아는 것보다 원래의 Redux를 잘 아는 것이 더 중요하다고 생각하여 패스한적이 있다. 그러나 어차피 글로벌한 state 관리를 해야한다면 그리고 무조건 Redux를 사용해야 한다면 가능한 간편한 방법으로 사용하는 편이 효율적일 것이다. 그렇게 redux-tookit을 다시 찾아보게 되었다. toolkit에 관한 것은 유튜브와 공식문서..

Javascript를 이용한 함수형 프로그래밍을 공부하다가 Map 객체에 대해서 나와 과거에 잠깐 보았던 Map 객체에 대해서 가물가물하여, 정확하게 알아야겠다는 생각에 정리를 하게 되었다. MDN Map : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map Ref. site : https://codewords.recurse.com/issues/one/an-introduction-to-functional-programming 우선 Javascript의 객체(Object)는 기본적으로 key : value 형태로 내부 프로퍼티를 관리하며 추가, 삭제 할 수 있으므로 컬렉션의 한 형태로 볼 수 있다. Map..

.... "Welcome to 자료구조!!" 날짜 바꾸는 것이 잘 되지 않아서 함께 스터디 하고 있는 분에게 물어봤더니 이런 말이 돌아왔다. 내가 아는 자료구조랑 달라서 "어? 이런 것도 자료구조에요?" 라고 물어봤더니, "문자형 데이터를 내 멋대로 조종하는 작업이니까요. 실제로는 Timestamp를 datetime으로 바꿔서 제공해주는데, 그걸 패트릭님이 숫자로 바꿔서 비교한 다음에 문자열로 결과물을 내놓는 거잖아요. 그렇기에 자료구조이지요." 라는 답이 왔다. 현재 회사 사정상 백엔드 없이 프론트 작업만 먼저 선행 되어야 하는 경우가 생겼다. 그래서 우선은 임시로 데이터들을 만들어놓고 그것이 작동을 하는지 정도만 알아보려고 했다. 이 후에 백엔드 분이 오시면 내가 만들어놓은 것을 보여드리고 비교해보고..

리액트에서 state를 관리하는 방법은 다양하다. 리액트는 단방향 워터풀 방식으로 부모에서 자식에게 props를 통해서 전달되어, 데이터 흐름이 일정하다. 그 말은 흐름을 비교적 알기 쉬워서 이해가 빠르게 된다는 장점도 가질 수 있다. 대표적으로 Redux, Mobx와 같은 것을 활용하여 state를 관리하게 되는데, Redux는 한번 사용하려면 귀찮다? 혹은 까다롭다? 라는 것이 따라붙는다. 큰 데이터도 아니고, 어떤 한 부분만 전달 하고 싶은 경우 굳이 Redux나 Mobx를 사용할 필요 없이 contextAPI를 활용할 수 있을 것이다. 특히 요즘은 contextAPI를 잘 만들어놔서 많은 경우 사용하기 좋다고 할 수 있다. 전체적으로 데이터를 전달해야하는 경우 Redux, Mobx를 사용하면 좋을..