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

일반적으로 많은 회사에서 redux, mobx를 사용하는 얘기는 들었다. 나 또한 Redux, mobx는 경험이 있지만 Recoil은 얘기만 들어봤지 사용해보진 않았는데 그래서 documentation을 따라해보면서 알아가보려고 한다. 나는 머리가 좋지 않다. 그래서 하나하나 잘 따져가면서 공부를 해야한다. redux를 익힐 때 고생했던 경험을 살려... 이번에는 redux를 익혔을 때의 순서를 지켜가면서 공부를 해봐야겠다 About Recoil 우선 각 상태관리 라이브러리들의 architecture 에 대해서 머리에 그림을 그려야 한다. Redux의 경우, Flux architecture를 기반으로 했고, mobX의 경우 Proxy, Context API는 context를 기반으로 했다. 그렇다면 R..

타입스크립트를 사용 할 일이 없었다. 그런데 생겨버렸다...! 그래서 미리 좀 공부를 하려고 한다. 자바스크립트에 타입스크립트를 적용하는 건 그나마 좀 이해가 되는 부분인데, 리액트 그것도 리덕스에 타입스크립트를 적용하고 있자니 뭔가... 편한 듯 불편한 듯... 리덕스가 타입스크립트를 편하게 쓰도록 만들어놓은게 아닌가? 라는 생각이 들었다. 그렇다면... 리액트 리덕스 타입스크립트! 시작해보자!! 우선 내가 만든 것은 아주 간단하다! input 태그에 api에 맞는 텍스트를 넣으면 단순히 호출해주는 것을 만들었다. 우선 전체적인 폴더 트리, 그리고 리덕스의 폴더트리를 보자면 아래와 같다. 자, 리덕스를 시작해보자! 우선 actions 폴더에서 타입을 만들어볼 것이다. // src > redux > a..

2차원 배열은 Javascript를 할 때도 헷갈릴 수 있는 부분이다. 그러나 또 굉장히 많이 사용 되므로 잘 알아두어야 한다. 행렬 데이터를 표현 할 때, 그래프 알고리즘을 처리할 때 등 다양한데 우리가 흔히 볼 수 있는 것으로는 표 구조가 2차원 배열과 흡사하여 2차원 배열로 모델링 하기 쉽다고 할 수 있다. 2차원 배열이란? 2차원 배열은 바로 1차원 배열이 중첩되었다는 의미이다. 그래서 대괄호([])를 두번 연속해서 사용하여 표현하게 된다. 이를 표현하자면 아래와 같다. 자료형 배열이름[행][열] = {{값, 값}, {값, 값}} int a[10][10] // 10 x 10 2차원 배열 또한 일반적인 배열처럼 index 번호 0부터 시작하며 주로 2중 for문으로 많이 사용되어진다. A[0][0]..

기본적으로 프로그램을 돌리기 위해서는 메모리 상에 프로그램이 적재 되어야한다. 이 후에 프로그램을 읽게 되는 것이다. 즉, 메모리에 프로그램을 돌릴만한 공간이 있어야 한다는 것이다. 이러한 메모리는 아래와 같이 크게 네 가지로 구분 해서 관리를 할 수 있으며, 각각은 그 아래 칸과 같은 변수를 관리하고 있다. 코드(Code) 영역 데이터(Data) 영역 힙(Heap) 영역 스택(Stack) 영역 소스 코드 전역 변수 정적 변수 동적 할당 변수 지역 변수 매개 변수 그렇다면 각각의 영역에서 관리하고 있는 변수에 대해서 무슨 말인지 알아보자. 우선 소스 코드(Source Code) 라는 것은 말 그대로 한 줄, 한 줄 씩 실행 시킬 수 있는 소스 코드를 말한다. 이 후 컴퓨터가 이를 이해하기 위해서는 이 소..

TCP / UDP에 관해서는 사실 그 전부터 들어왔지만, 그 당시에는 보기가 힘들고 무슨 말인지 못 알아들어서 넘어가곤 했었다. 하지만 최근 다시 읽어보니 이해가 가는 부분이 있어 정리를 하고자 한다. 더불어 좋은 블로그 글과 영상 등을 참고했다. Transport Layer ( 전송계층 ) TCP와 UDP는 OSI 표준 모델과 TCP/IP 모델의 전송계층에서 사용 되는 프로토콜이다. 이러한 TCP와 UDP에 관하여 알아보기 전에 간단하게 Transport Layer에 대해서 알아보자! Transport Layer는 End Point 간의 신뢰성 있는 데이터 전송을 담당하는 계층을 말한다. 여기서 신뢰성이란, 데이터를 순차적이고 안정적이게 전달하는 것을 말하고, 전송은 포트번호에 해당하는 프로세스에 데이..

개발자 톡 방에서 프로세스와 스레드에 관한 글이 올라왔다. 그래서 한 번 읽어보다가 다시 한번 리마인드 하는 계기가 되어서 간단하게나마 정리를 하려고 한다. 프로세스(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)에 대해서 알아보자. 쿠키라는 것을 이용해서 서버는 내가 찾은 정보 등의 데이터를 나의 브라우저에 넣을 수 있다. 우리는 흔히 어떠한 사이트에 방문하고, 검색하는 식..