2023년부터 로그 기록 2023년부터 로그 기록

최신 콘텐츠

• [회고] 프론트엔드 개발자 이력서 작성과 수정 방향에 대해

  일기장 2024.12.04 10:52

  고민지원하는 회사에 자체 커리어 페이지나 양식이 있지 않고서는 제네럴 하게 작성한 이력서와 포트폴리오를 제출하고 있다. 요즘 관심이 있는 유지보수와 효율적인 코드 작성면에서 배울 점이 많았던 한 회사의 블로그 글을 보고 채용공고에 지원을 했다. 하지만 결과를 서류에서 바로 탈락.해당 채용공고는 신입 개발자가 아닌 3년 차 이상의 주니어 개발자를 채용을 희망하고 있었기 때문에 당연하다고 생각할 수 있다. 하지만 나는 Yess 팀에서 보낸 서류 탈락 사유를 보고 고민에 빠졌다.  ... 도메인에 대한 이해와 경험을 바탕으로React와 TypeScript를 통한 웹 클라이언트 개발을 빠르게 수행하실 수 있는 분을 찾고 있습니다. ...  전달해주신 이력서를 바탕으로 스킬과 경험을 검토하였으나,아쉽게도 저희 팀..

  Read More
• [회고] 진짜 개발자가 되기 위한 습관을 들여보자

  일기장 2024.11.25 16:16

  수십 년 동안 한 가지 일을 하면서 전문가가 안 되는 비결이 있다면이 타당성과 피드백이 부족한 환경에서 일하는 겁니다.-김창준, 함께 자라기- 이 글귀는 책 함께 자라기를 읽으면서 충격을 받은 내용이라 가져와 봤다.여담으로 나는 요즘 생활에 피드백을 주기 위해서 매일 밤 10시 회고 모임을 가지고 있다.같이 프론트엔드 직군을 준비하는 개발자들이 모여서 고군분두한 하루의 일과를 이야기하고 격려하는 모임이다. 오늘 쓰고자 하는 내용은 독서한 내용에 대한 회고이다. 그리고 추가된 앞으로의 목표이기도 하다. 진짜 개발자가 되는 습관 중 하나는 최신의 공식 문서(Docs)를 보면서 문제를 해결하는 것이라 생각한다.가장 빨리 찾을 수 있는 블로그나 ChatGPT 구현 예시는 게임의 튜토리얼에 불과하다. 진짜 본 게..

  Read More
• [Bug Fix] Next.js 14 App Router 버전, useSearchParams 빌드 Error와 Suspense

  Front-end 개발 2024.11.25 00:25

  프로젝트를 배포하기 위해서 npm run build 명령어를 수행한 결과 빌드 에러가 뙇! ProblemSuspense 경계 없이 useSearchParams를 통해 매개변수를 읽으면 전체 페이지가 클라이언트 측 렌더링으로 선택된다. 왜냐하면 클라이언트 사이드에서 정적 렌더링 동안에 가장 가까운 Suspense boundary에서 렌더링을 하려고 하고, React는 useSearchParams 사용을 발견하면 가장 가까운 Suspense 경계까지 fallback으로 표시하기 위해 렌더링을 일시 중단한다. Suspense 설정이 없으면 타고타고 올라가서 전체 페이지가 클라이언트 측 렌더더링이 된다. 이로 인해 클라이언트 측 JavaScript가 로르될 때까지 페이지가 비어 있을 수 있기 때문에 빌드 에러가..

  Read More
• [Bug Fix] Next.js 14 App Router 버전, 동적 경로에서 데이터가 없는 경우 404 페이지로 redirect 시키기

  Front-end 개발 2024.11.23 21:58

  Problem기본적으로 존재하지 않는 경로는 자동으로 app 폴더 밑에 있는 not-found.tsx 파일인 404 페이지로 redirect 된다.그런데 Next.js 14 App Router 버전에서 동적 경로를 사용하는 Catch All Segment를 사용하는 경우 하위의 모든 경로를 포함하기 때문에 라우팅에서 편리 하지만 데이터가 존재하지 않는 페이지도 보여지게 된다. SolutionnotFound 활용하기기존적인 해법으로 직접 코드 상에서 특정 조건에서 notFound 메서드를 호출하면 된다.내 경우에는 데이터 페칭 결과값이 없을 때, 서버 액션에서 에러를 반환하는 것이 아니라 undefined를 반환하도록 하고, 데이터 페칭의 결과가 존재하지 않을 경우 notFound 를 호출하는 코드로 작성..

  Read More
• [Bug Fix] Next.js 14 App Router 버전, 새로고침 react hydration error 해결

  Front-end 개발 2024.11.22 22:07

  Problem렌더링 하이드레이션 과정에서 SSR 값과 CSR 값이 다를 때 발생한다.이 react-hydration-error의 해결방법은 두 가지가 있다.  (1) 방법: 클라이언트에서만 렌더링되는 콘텐츠를 useEffect 훅으로 처리  (2) 방법: 특정 컴포넌트에서 SSR을 비활성화하면 불일치를 방지할 수 있다.현재 useEffect를 사용할 수 없는 상황이라 나는 (2) 방법을 선택해서 해결하기로 했다. Solution두번째 방법을 사용하여 'next/dynamic' 패키지로부터 dynamic 메서드를 호출해서 화면에 보여줄 Layout의 SSR을 비화활성화하고 완전한 CSR 컴포넌트로 설정해 렌더링한다. let NoSSRComponent: ComponentType | null = null; ..

  Read More