어제보다 더 나은 오늘

1. 명령 팔레트(cmd + shift + p)를 열어서 아래의 기본 설정: 사용자 설정 열기(JSON)를 선택   2. settings.json 파일에 다음의 설정 저장 default formatter는 prettier로 지정되어 있지만, prisma 파일을 열 때는 Prisma를 default formatter로 사용하겠다는 뜻 { "editor.defaultFormatter": "esbenp.prettier-vscode", "[prisma]": { "editor.defaultFormatter": "Prisma.prisma" }}  prisma 파일을 수정할 일이 많지는 않아서 이제까지 prisma 파일 켤 때마다 default formatter를 잠깐 Prisma로 바꿔서 사용했었는데 ?..

부모 요소의 state에 따라 특정 자식 요소의 스타일을 지정해야 하는 경우, 먼저 부모 요소에 `group` 클래스를 작성하고, target 요소에는 `group-hover` 등 `group-*` modifier를 사용해 스타일을 지정할 수 있다.  예를 들어 다음과 같은 책 상세 페이지에서 한 줄 평 영역에 마우스를 hover할 때 편집 버튼이 나타나게 하고 싶다면 다음과 같이 코드를 작성할 수 있다.   이 동작을 css에서 직접적으로 구현하려면 다음과 같은 방식으로 할 수 있다.   즉, Tailwind CSS의 `group`은 css의 가상 클래스와 자식 선택자를 활용해 부모 요소의 상태에 따라 자식 요소의 스타일을 지정하는 기능을 제공하는 것이다.  실제로 빌드 파일을 살펴보면 다음과 같은 라..

프로젝트에서 일종의 에디터 역할을 하는 화면이 있어서 `contenteditable` 속성을 사용해 사용자가 텍스트를 편집할 수 있게 하고 있다. React에서 `contenteditable` 속성을 사용하는 것은 쉽지 않은데, 특정 요소에 `contenteditable` 속성을 사용하려고 하는 경우, 다음과 같은 경고를 한다.  Warning: A component is contentEditable and contains children managed by React. It is now your responsibility to guarantee that none of those nodes are unexpectedly modified or duplicated. This is probably not in..

이번주에 버그로 등록된 이슈 하나를 해결했던 과정이 재미있어서 기록으로 남겨두는 게 좋겠다는 생각이 들었다. 먼저 제보된 이슈는 다음과 같았다.특정 문서를 업로드했을 때 편집 화면에서 스크롤 이동이 되지 않고, A 기능이 동작하지 않음  A 기능은 편집 화면 내에서 스크롤 이동시 뷰포트에 들어와 있는 아이템을 대상으로 서버에 배치로 요청을 한 다음, 해당 응답 결과를 가지고 화면에 특정 UI로 렌더링하는 기능이었기 때문에 이건 스크롤 이슈였다.  먼저 해당 현상을 재연하기 위해 버그가 발생한다고 제보한 계정으로 접속해 해당 문서를 확인해 보았다. 그런데 내 컴퓨터에서는 스크롤도, A 기능도 정상적으로 동작했다. 내 컴퓨터는 맥북이었고, 버그를 제보한 분의 컴퓨터는 윈도우 데스크탑이었다. 그래서 팀 공용 ..

입사 3개월, 6개월차 회고는 저멀리 지나가고 어느새 만 1년을 바라보는 시기가 되었다. 6월부터 새로운 프로젝트를 준비하고 있다. 입사 후 두번째 프로젝트다. 첫번째 프로젝트와 마찬가지로 바닥부터 시작하는 그린필드 프로젝트지만 첫번째 프로젝트와 같은 카테고리의 솔루션이기 때문에 노하우(랄게 있다면..🥲)들을 이식해와야 한다.  그래서 첫 프로젝트에서 해결하지 못한 기술적 과제들을 정리해 보았다. 이 과제들을 해결하지 못한다면 새 프로젝트도 고스란히 부채를 안고 시작해야 하기 때문에 어떻게든 기존보다 더 나은 방향으로 진행해 보고 싶다.   1. contentEditable 이슈 보통 생각하는 에디터 기능까지는 아니지만 서비스에서 사용자가 텍스트 편집과 조회를 하는 게 필수 기능이다. React 프로젝..

지난 5월 원티드 프리온보딩 FE 챌린지에서 데이터 / 계산 / 액션을 구분하는 것이 복잡도와 의존도를 낮추는 방법 중 하나라는 걸 배웠다.  1. 데이터: 이벤트에 대한 사실. 문자열, 객체 등 단순한 값 그 자체     예) 사용자가 입력한 이메일 주소, 은행 API로 가져온 달러 수량 2. 계산: 입력으로 얻은 출력. 순수 함수라고 부르기도 함.     예) 최댓값 찾기, 이메일 주소가 올바른지 확인하기  3. 액션: 외부 세계와 소통하므로 실행 시점과 횟수에 의존. 부수효과를 일으킴.    예) 이메일 보내기, 데이터베이스 읽기   이번주 티켓 중에 antd Table을 사용해 Weekly 캘린더를 구현해야 하는 작업이 있었다. (antd Calendar는 yearly, monthly만 제공한다...

1. 요소의 indeterminate 상태 :indeterminate - CSS: Cascading Style Sheets | MDNThe :indeterminate CSS pseudo-class represents any form element whose state is indeterminate, such as checkboxes that have been set to an indeterminate state with JavaScript, radio buttons which are members of a group in which all radio buttons are uncheckdeveloper.mozilla.org 체크박스 그룹이 있을 때 한 개 이상의 아이템에 체크가 되었을 때 Check al..

Reusing Styles - Tailwind CSSManaging duplication and creating reusable abstractions.tailwindcss.com Tailwind CSS 공식 문서에서 있는 Reusing Styles에 있는 내용을 내 나름대로 정리해보는 포스팅이다. 전문 번역은 아니고 필요한 내용에 대한 일부 번역임을 밝힌다.   1. 에디터 및 언어 기능 사용 재사용해야 하는 스타일을 단일 파일 내에서만 재사용하는 경우, 에디터의 다중 커서 편집 기능과 언어별 루프를 사용하는 것이 중복을 관리하는 가장 간단한 방법이다.   2. 컴포넌트 추출 여러 파일에서 일부 스타일을 재사용해야 하는 경우 가장 좋은 전략은 React, Svelte 또는 Vue와 같은 프론트엔드 프레..

Next.js 공홈의 Learn Next.js를 따라가며 docs를 보는 스터디를 하고 있다. Learn Next.js의 실습은 SQL을 사용해 DB에 직접 쿼리를 날리는 방식 위주여서 API Layer 방식의 데이터 패칭은 어떻게 하는 것인지 도무지 와닿지가 않았다. 공홈의 문서를 봐도 route.ts 파일에서 Route Handler를 선언하는 코드만 나와있고, 이 선언된 코드의 사용부에 대한 내용이 당최 없다. Lee Robinson이 설명하는 youtube 예제에서도 API Layer에 대한 내용은 없다. Routing: Route Handlers | Next.jsCreate custom request handlers for a given route using the Web's Request an..

목록 페이지에 페이지네이션이 있을 때, 상세 페이지를 갔다가 뒤로 가기를 눌렀을 때 항상 1페이지로 돌아가는 것이 아니라 원래 있던 페이지를 기억해서 해당 페이지로 돌아오게 하는 기능을 구현하는 방법을 간략하게 정리해 본다. 위의 기능을 구현하기 위해서는 현재 페이지를 어딘가에 저장해두어야 하는데 이때 다음의 세 가지 방식을 생각해 볼 수 있을 것 같다. 1. 브라우저의 sessionStorage 세션 스토리지는 탭이 열려 있는 동안 정보를 저장할 수 있어, 사용자가 페이지를 떠났다가 돌아왔을 때 이전 페이지 정보를 유지하는 데 유용하다. 2. URL의 쿼리 스트링 URL로부터 페이지 정보를 읽어들일 수 있다. URL을 가지고 있으면 탭을 닫았다가 다시 열 때도 이전 페이지로 돌아갈 수 있고, 해당 UR..