어제보다 더 나은 오늘

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..

1. React.Fragment () 추가 HTML 요소 없이 여러 요소를 함께 렌더링하려는 경우에 사용한다. react legacy docs의 JSX in Depth 파트를 보면 JSX는 React.createElement의 syntatic sugar임을 상기해 보면 왜 그루핑이 필요한 지 알 수 있다. import React from 'react'; import CustomButton from './CustomButton'; function WarningButton() { // return React.createElement(CustomButton, {color: 'red'}, null); return ; } // node_modules/@types/react/index.d.ts function cr..

앞의 포스팅에서 언급했던 것처럼 무한스크롤 관련 이슈를 해결하고 나니 성능 이슈가 부각되었다. 원문과 번역문을 두고 사용자가 편집할 수 있는 서비스인데 아이템이 500개 정도만 되어도 키보드 입력 이벤트가 발생하면 사용자가 키보드를 누르고 화면에 해당 글자가 뜨는 시간 사이에 지연이 체감되는 정도였다.  list virtualization 또는 windowing 기법을 적용해서 뷰포트에 보이는 아이템만 DOM 노드에 가지게 하면 성능 면에서 큰 개선을 할 수 있을 거라고 생각했다. react-virtualized가 대표적인 windowing 라이브러리로 지금은 legacy가 된 이전 버전 react 공식 문서의 성능 최적화 파트에서도 추천하는 라이브러리를 먼저 고려했다.  프로젝트의 요구 사항 중 목록 ..

딱 1년 전 이맘때 부트캠프 파이널 프로젝트를 마친 후 회고를 작성하면서 아쉬운 점으로 "무한스크롤도 써보고 싶었던 ui인데 시간 문제로 도입하지 못했다"고 꼽은 적이 있다. 그리고 그로부터 약 10개월 뒤 무한 스크롤을 원없이 사용하게 된다 😇 지난달 다른 팀원이 맡았던 파트를 인계 받았는데 그 중 메인 feature가 무한 스크롤이었다. 인계 받을 당시 프로젝트의 가장 큰 이슈는 다음과 같았다. 1. 스크롤을 위아래로 이동함에 따라 nextPage와 previousPage를 fetch하고, 서버에서 응답으로 받은 데이터를 UI를 그리는데 사용하는 배열 안에 순서에 맞게 삽입하는 게 때때로 올바르게 동작하지 않고 있었다. 가령 [... 6, 7, 8, ...] 페이지가 렌더링되어야 하는데, [... 7..

windowing 기법 또는 list virtualization 기법을 적용해 무한 스크롤 성능을 최적화하기 위해 tanstack의 react-virtual 라이브러리를 사용하면서 위의 YouTube 클립의 도움을 많이 받았다. 위의 클립에서 faker-js로 랜덤한 길이를 가진 문장을 리스트로 만들어 virtualization을 통해 최적화하는 구현 방법을 코드로 옮겨 보았다. 랜덤한 길이를 가졌기 때문에 리스트 아이템의 height가 일정하지 않다. 즉 dynamic height를 가진 아이템을 구현하는 방법이다. 먼저 virtual을 적용하기 전 코드이다. 10만 개가 아니라 100만 개의 아이템을 렌더링한다면? 어지간히 성능 좋은 컴퓨터에서도 100만개를 렌더링하는 순간 브라우저가 죽어버릴 것이다..

기존 테이블 컴포넌트에 정렬 API를 연동하는 작업을 하던 중 다음과 같은 상황을 만났다. (간단한 예제 코드를 만들어 보고자 했으나 공개 API로 같은 현상을 재현하기가 어려웠다 😢) 먼저 테이블은 antd의 table 컴포넌트로 테이블의 각 열마다 정렬 버튼이 있다. 정렬 버튼을 처음 누르면 오름차순 정렬(ascend), 두번째로 누르면 내림차순 정렬(descend), 세번째로 누르면 정렬 취소 순서로 동작하고, 사용자가 특정 열의 정렬 버튼을 누를 때마다 해당 열이 ascend인지 descend인지 알 수 있다. 이 정보를 바탕으로 서버에 쿼리 스트링으로 정렬된 데이터를 요청한다. 그러자 특정 열의 정렬 버튼을 누를 때마다 화면이 full refresh가 되었다...! 😰 정렬 버튼을 한번씩 눌러서..

예외 처리를 설계하며 고민한 내용들을 간략하게 정리해 보았다. 프로젝트마다 필요한 예외 처리가 다르고, 구현 방식도 여러 가지가 있기에 개발의 많은 부분이 그렇듯 정답이 없는 것 같다. 나중에 시간이 흐른 뒤 이 포스팅을 보면 분명 '왜 이렇게 했지?'라고 생각할 것 같다. 😇 하지만 같은 고민을 하는 누군가에게 조금이나마 도움이 될 수 있기를 바란다. 1. 에러의 분류 먼저 위의 도식을 참고하여 프로젝트 상황에 맞게 에러를 분류해 보았다. 사용자에게 에러가 발생한 이유를 설명하고 사용자의 액션을 유도하는 장치를 제공하는 것을 예외 처리의 핵심으로 두었다. 1. 예상 가능한 에러 a. 사용자 입력 값에 대한 에러 - 에러 발생 상황 예시: 로그인 시 틀린 비밀번호를 입력하거나 회원가입시 중복 아이디 또는..