솔직고백: 두 개 차이 모르게 그냥 구현이 잘되는 방식으로 썼다. 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 ...

What is CSS-grid? CSS 그리드는 2차원의 레이아웃 시스템으로, column과 row 기반이다. 각 행과 열 사이에 공백을 줄 수 있는데, 이를 gutter 라고 합니다. ex) .container{ display: grid; grid-template-column: 100px 100px 100px; } 이...

배포 workflow를 YAML로 관리하는 것을 보고 YAML이 무엇인지 알아보기로 했다. 요약 What is YAML. YAML은 JSON의 불편한 점을 보완하기 위해 나온 JSON의 superset이다. Superset이기 때문에 JSON과 기본적으로 같다. 좀 더 편리해졌다. 주석을 달...

찾아보거나 알게된 배경 코드를 보던 중, 어떤 box의 borderRadius가 {100%}으로 설정되어있었습니다. borderRadius에 값이 들어가면 어떻게 계산되어 나오는 것인지 궁금했습니다. 특히, x와 y가 다를때 어떻게 될지 궁금했습니다. 기본적으로, borderRadius의 시작점은 (꼭짓점)에서부터 (설정한 거리) 만큼 떨어...

요약 useSyncExternalStore은 React 18에 새롭게 나온 훅입니다. 해당 훅은 concurrent rendering에서 사용자 인터렉션에 대한 부분을 먼저 렌더링하면서 발생할 수 있는 렌더 트리 안에서의 차이(tearing)를 해결할 수 있습니다. useState와 같이 리액트에서 제공하는 상태관리 도구들은 이런 concur...