나의 코딩일지

왜 임시저장으로 목차만 만들어놓고 안쓴건지.. 그치만 원래 한달 지난 시점에서 하는 회고가 젤 재밌다 엘리스에서 나와서 백엔드와 나 단둘이 호기롭게 시작했던 프로젝트를 흐지부지 끝내면서 마감기한이 있는 곳에서 프로젝트를 진행해야한다는 사실을 깨달았다. 그리고 둘 다 기술 구현하고 싶어서 기획은 빨리 빨리 끝내놓고 개발에 들어갔기 때문에, 프로젝트를 어떻게 마무리해야할지 답이 없어서 중단하게 되었다. 그냥 둘이서 으쌰으쌰 결제 시스템 만져본걸로 만족했지만, 제대로 된 팀에서 프로젝트를 진행하고 싶어 연합동아리에 신청하게 되었다. 1년 사이에 개발변태가 된 나를 좋게 봐주셔서 운좋게 합격할 수 있었고, 마라팀에 들어가 냉장고 관리 애플리케이션을 제작하게 되었다. CI/CD 세팅 해두기 로컬에서 거의 완성된 ..

누적 레이아웃 이동(Cumulative Layout Shift, CLS) 웹 페이지의 시각적 안정성을 측정하는 지표 중 하나로 페이지의 생명주기 동안 발생하는 모든 예기치 않은 이동에 대한 지표를 계산하며 사용자가 예상치 못한 레이아웃 이동을 경험하는 빈도를 수량화한다. 사용자가 페이지를 로드하는 동안 렌더링되는 요소들의 위치 변화로 인해 발생하는 사용자 경험의 불안정성을 나타내므로 CLS가 낮으면 사용자 경험을 악화시킨다. 리소스가 비동기식으로 로드되거나, DOM 요소가 기존 콘텐츠 위의 페이지에 동적으로 추가 되어 발생한다. 사용자의 인터렉션으로 인한 레이아웃 변경인 경우는 포함되지 않으며, 레이아웃 이동이 발생한 요소의 전체 높이와 뷰포트 높이의 비율을 의미하는 영향분율과 레이아웃 이동이 발생한 요..

사실 이 프로젝트는 프론트엔드 개발자에게 기술적 챌린지가 있던 것도 아니었고, 오히려 대시보드라서 비슷하지만 애매하게 api를 재사용하는 컴포넌트만와 다른 페이지 수만 많아 시간 싸움이었기 때문에 해커톤에는 악조건이었다. 2차 합류하느라 기획이 거의 끝난 상태여서 개발 사이즈를 줄이지도 못했다. 그럼에도 이 프로젝트를 선택한건 일단 아이템이 왜 필요한지와 해결방안이 명확해 매력있었고, 첫 대화했을 때 디자이너분이 예사롭지 않은 분이었기 때문이다. 매력적인 디자이너의 존재는 나를 움직이게 한다. 그리고 예전에 테오의 스프린트에서 프론트엔드 개발자들이 서로 프레임워크와 라이브러리, 컨벤션을 맞출 때 편리하게 도움을 주는 프로덕트를 진행했을 때 디벨롭되면 진짜 사용하고 싶었던 맥락도 있었다. 무엇보다, 완성 ..

npm과 yarn의 차이를 명확히 몰라서 yarn을 쓰기로 해놓고 npm을 사용하는 듯의 빌런짓을 했다. 그러다가 lock 파일에서 에러가 나서 커밋을 되돌리는 고생을 겪었고 이후 package manager에 대해서 알아보게 되었다. Package Manager 개발에 필요한 다양한 패키지를 설치하고 또 수정하고 업데이트 하는 등의 작업을 편리하게 도와주는 도구 프로젝트에 필요한 다양한 패키지들을 의존성 있게 관리해주는 도구 npm 프로젝트의 의존성을 수동으로 다운로드해야 했던 불편함을 개선한 패키지 매니저 node.js에 내장되어 있기 때문에 추가적인 설치가 필요하지 않음 다른 사용자들이 만들어 놓은 다양한 모듈을 다운로드 가능 npm | Home (npmjs.com) npm | Home Bring ..

Next.js는 파일 시스템을 기반으로 라우팅을 구현하며, 그 방법에는 app router와 page router가 존재한다. 기존 Next.js는 /page 폴더에 모든 웹 사이트의 페이지 컴포넌트를 처리했다. 파일 구조만으로 라우팅을 손쉽게 할 수 있기 때문에 편리한 개발이 가능했다. 그리고 Next.js 13부터 App router가 등장했다. App router는 상태를 유지하고 Rerendering을 방지하면서 자체 경로 안의 컴포넌트와 UI를 쉽게 공유할 수 있다. App router react server components를 기반으로 구축되어 있으며, 서버 데이터 가져오기에 맞춰져 있다. 전체 애플리케이션에 대한 전반적인 라우팅 및 탐색을 처리한다. URL을 기반으로 올바른 페이지를 렌더링..

TanStack Query makes fetching, caching, synchronizing and updating server state. new QueryClient로 인스턴스를 생성하고 QueryClientProvider를 통해 전역에서 생성한 QueryClient에 접근 가능하도록 만든다. QueryClient 내에는 QueryCache와 MutationCache가 있다. useQuery를 호출하여 QueryClient, 렌더링 트리거 여부를 파악하기 위한 현재 결과값 등이 담 Observer를 생성하고, 이 Observer를 통해 Query가 생성되어 cache에 저장되며 Query와 컴포넌트가 연결된다. import axiosInstance from '@/api/axiosInstance';..

tanstack-query의 useInfinityQuery를 통해 무한 스크롤을 구현하였는데, 데이터를 추가/ 삭제/ 수정해도 이전에 받아온 데이터가 유지되는 현상이 발생했다. 처음에는 당연히 queryClient.invalidateQueries를 통해서 간단히 해결될 문제라고 생각했는데, 안된다. useInfinityQuery의 refetch를 사용하면 될 줄 알았는데, 안된다. 콘솔을 찍어보니 냉장고 id가 undefined로 들어가고 있었다. URL params에서 useState로 변경하던 중에 이런 에러가 발생했던 것 같다. 하지만 냉장고 id를 제대로 보내줘도 결과는 똑같았다. 왜 안되는건지 이해가 안되는 중에, 일단 마감기간은 다가오니 캐시데이터를 삭제하는 방법을 사용하기로 했다. 하지만 q..

기업 규모에 따라 자체적인 IT 인프라를 사용하거나, 아마존 웹 서비스(Amazon Web Service), 구글 클라우드 플랫폼(Google Cloud Platform), 마이크로소프트 에저(Microsoft Azure) 등 클라우드 서비스를 활용하기도 한다. 같은 서비스를 개발하더라도 내부 설계에 따라 배포하는 방법은 다양하다. 그리고 일반적으로 개인 및 소규모 프로젝트는 별도의 서버없이 손쉽게 배포할 수 있는 Netflify, Vercel, DigitalOcean 등 SaaS 서비스를 사용한다. 깃허브와 연동만 해두면 알아서 배포를 해주기 때문에 서버가 종료된 프로젝트의 경우 vercel을 이용했었는데 인프라의 어려움을 옆에서 보다보니 vercel이 무엇인가 궁금해졌다. 문제는 내가 인프라는 한번도..

혼자서 프로젝트를 할 때는 모든 파일이 내 머릿 속에서 존재했기 때문에, 아키텍처에 대한 고민은 크게 해보지 않았다. 컴포넌트 구조에 대한 고민도 어떻게 하면 내가 편리하게 활용할 수 있을까 정도였다. 그러다가 협업을 시작하니, 아키텍처의 구조를 설계할 때 각 폴더의 역할을 정의해주고 깊이도 어디까지 들어갈지 협의할 필요가 있었다. 특히 아토믹 디자인 패턴이든 컴포넌트 컨테이너든, 모든 아키텍처에 대한 정의가 생각보다 다 다르기 때문에 상의를 하고 가야한다. 프로젝트에 아토믹 디자인 패턴을 적용하자고 결정을 했고, 파일 구조에 따라 organisms에 넣고 갔다. 하지만 이걸 templates에 넣어야할지, 아니면 pages에 넣어야할지를 추가로 고민하고 이야기하는 과정이 필요했다. 혼자서 개발하는게 편..

서버 액션(alpha) 서버 액션은 API를 작성하지 않고 함수 수준에서 서버에 직접 접근해 데이터 요청 등을 수행할 수 있는 기능이다. 서버 액션을 사용하기 위해서는 함수 내부 혹은 파일 상단에 'use server' 지시자를 선언해야 하며, 해당 함수는 반드시 async여야 한다. form의 action export default function Page() { async function handleSubmit() { **'use server'** console.log('해당 작업은 서버에서 수행합니다. 따라서 CORS 이슈가 없습니다.') const response = await fetch('https://jsonplaceholder.typicode.com/posts', { method: 'post..