#frontend

환경: 본 글은 Next.js 14.2 · Pages Router 기준으로 재현/검증했다.
주의: 본문에서 /app은 basePath를 뜻하며, App Router의 app/ 디렉터리와는 무관하다.

“이 컴포넌트 좀 수정해주세요.”라는 간단한 요청을 받고 코드를 열었다가 머리가 지끈거린 적이 있다. UserProfile 컴포넌트 하나가 API 호출, 로딩 상태 관리, 에러 처리, 화면 렌더링까지 모든 걸 다 하고 있었다. 작은 수정을 위해 500줄짜리 컴포넌트를 뜯어고쳐야 했고, 한 부분을 건드리면 다른 부분이 깨지는 악순환이 반복됐다.

블로그 글이 점점 쌓이다 보니 원하는 글을 찾기가 어려워졌다. 처음에는 검색 기능을 추가할까 고민했지만, 너무 복잡해질 것 같아 태그 기능을 도입했다.

요즘 playwright를 가지고 놀고 있다. 원래는 E2E 테스트용 도구인데, 반복적인 작업을 자동화하기에도 꽤 괜찮아 보였다. 기존에 셀레니움을 써서 자동화한 서비스를 플레이라이트로 바꾸면서, 훨씬 쉽고 직관적이고 VSCode나 GitHub Actions 환경과도 궁합이 잘 맞는다는 느낌을 받았다.

파일 업로드 기능을 구현하다가 accept 속성을 다시 들여다볼 일이 있어 정리해 둔다.

얼마 전 면접에서 질문을 받은 기억이 나서 리마인드 할 겸 정리한다. React에서 입력 컴포넌트는 값을 누가 들고 있느냐에 따라 “Controlled”와 “Uncontrolled”로 나눌 수 있다.

깊은 복사는 항상 라이브러리를 이용해서 썼었다. 최근에 면접에서 깊은 복사에 대한 질문을 받고 직접 구현해보는 라이브 코딩 시간을 가졌었는데 나는 recursion을 이용해서 구현했었다. Recursion 외에도 방법이 존재하기에 생각나는 김에 정리해본다.

최근 블로그 배포를 netlify에서 vercel로 변경하였다. 둘 다 비슷한 서비스고 장점과 단점이 있는데, google analytics처럼 audience를 보여주는게 좋아보여서 변경했다. Core web vital도 보여주는데 이건 netlify에서도 lighthouse 플러그인으로 확인할 수 있다.

react-query를 쓰다 보면 한 번쯤 마주치는 에러라, 해결 방법을 기록해 둔다.

MUI로 테이블을 구현하다 만난 에러를 기록해 둔다.