port는 항구라는 뜻입니다. 대한민국이라는 나라에 여러가지 항구가 있어 여러방향에서 들어올 수 있듯이, port는 한 IP 내에서 프로세스 구분을 위해 사용하는 번호입니다. 예를 들어, 동일한 IP 주소인 1.1.1.1 이라도, 다른 port를 이용하면 각기 다른 프로세스를 돌릴 수 있고 접근할 수 있습니다. React를 이용한 프론트엔드 서버는 :...

찾아보거나 알게된 배경 개발 중, yarn start 로 로컬 서버를 돌리려고 했다. 그런데, 이미 port 3000이 있다면서 3001에 돌릴 것인지 물어보는 메시지가 나왔다. 어떻게하면 3000 포트의 프로세스를 죽일 수 있을까? 요약 $ lsof -i tcp:3000 $ kill -9 PID 상세 설명 lsof ...

찾아보거나 알게된 배경 Next.js를 사용하는데, URL params에 들어있는 값을 가져와야하는 경우가 생겼다. Next.js는 디렉토리 구조가 곧 라우터인데 modusign/document/{id} 형식의 경우에는 파일을 일일이 만들어 줄 수 없는 노릇이다. 파일구조는 정적일 수 밖에 없는데 어떻게 동적으로 라우팅을 할 수 있을까 요약 ...

Introduction 사이드바 UI를 작업하는데, ContextMenu는 사이드바 가로를 튀어나와서 표시되도록 설계하였다. 이를 위해선 overflow: visible이 설정할 필요가 있다. 설정했더니, 컴포넌트 가로에 맞춰서 잘리고 스크롤이 생기는, overflow:auto 가 설정되었다. 난 분명 명시적으로 overflowX: visib...

솔직고백: 두 개 차이 모르게 그냥 구현이 잘되는 방식으로 썼다. item 들을 세로로 정렬하는 두 방식의 차이에 대해 알아보기로 했다. 요약 align-items는 flex-container 안에서 전체 item의 배치를 어떻게 할 것이냐에 대한 속성이다. align-content는 flex-container에서 item의 줄 간...

https://ko.redux.js.org/style-guide/#treat-reducers-as-state-machines Redux는 finite-state-machine처럼 다뤄지면 좋다고 합니다. → Finite-State machine(이하 FSM)이 뭘까요? Sequential Logic과 Combinational Logic ...

아이콘이 fontello.svg에서 로 선언되어있는 것을 보았다. glyph는 처음 보는 태그다. 얘는 뭐하는 친구일까. SVG로 웹 폰트를 해결하고자 나온 친구. SVG font에서 하나의 Glyph를 지정하기 위해 나온 tag입니다. 이제 Deprecated 되었습니다. 하나의 glyph 태그는 폰트에서의 ‘글리프’ 를 정의합니다. 폰트에...

찾아보거나 알게된 배경 Next.js와 Styled Component를 같이 사용하고 있는 개발환경에서, 자꾸 페이지를 로드할때 마다 스타일 적용이 안된 화면이 깜빡깜빡 나타났다 없어지는 현상이 생겼다. 요약 Flash of Unstyled Content(FoUC) 위 현상은 페이지의 이 페이지 로드 시 나타나지 않아 잠시동안 스타일...

요약 + Adjacent sibling combinator (인접 형제 선택자) A+B 는 A 바로 뒤에 오는 B element를 선택합니다. .A + .B { color: red; } <div class='A'>A</div> <div class='B'&g...

요약 Partial는 어떤 type T에 대하여 모든 property를 optional하게 바꿔줍니다. type Partial<T> = { [P in keyof T]?: T[P]; }; 위와 같이 구현됩니다. 각 프로퍼티가 optional 하게 변경되는 것을 볼 수 있습니다. interface Document ...