akjfal

배경 프로젝트에 투입되기 1달 전 타 팀 개발자 분들이 신규 프로젝트의 에디터를 개발하면서 기술 스택과 환경들을 구축해놓은 상태였습니다. React, React Query, Sass등 대부분의 기술 스택은 사용해본 경험이 있었지만, Next13은 처음해보는 버전이 였습니다. React17에서 18로 올라가듯이 일부 기능들이 추가되는 정도라면 문제가 없지만, getStaticProps와 getServerProps가 사라지고, ‘use client’와 app Directory가 추가되는 등 완전히 다루는 방식이 달라졌기 때문에 기대 반 걱정 반 마음으로 프로젝트에 투입되었습니다. 정적과 동적 Next12에서 정적 파일의 경우 getStaticProps, 동적 파일의 경우 getServerProps를 통해서 ..

작년에 신규 프로젝트를 하면서 Nextjs를 사용하던 중 Next 13이 출시되었었습니다. 이때 당시엔 정신이 없어서 살펴보지 못했는데 옆 팀 프로젝트 마감 기한이 너무 빡빡하게 잡혀서 2달 정도 도와주게 된 프로젝트에서 Next 13을 사용하고 있다고 합니다. 이번 기회에 공식 문서를 토대로 기존 방식과 달라진 점을 살펴보려고 합니다. Next 13 New App Directory(Beta) app directory는 현재 베타 버전이고, PR에는 추천하지 않습니다. 그리고 아직 pages directory는 next/image와 next/link 등 기존의 안정된 기능들과 함께 사용할 수 있습니다. app directory는 아래 기능들은 지원합니다. Layouts : state를 유지하고 리렌더링을..

next13에서 head에 title을 변경하려고하니 방법이 많이 바뀌었습니다. 그리고 SSR, CSR에 title을 변경해주는 방식들이 다양해서 관련한 방법들을 정리해보았습니다. 해당 글에서는 title만을 설정해주고 있으나, 기타 head에 들어가는 값들은 필요한 값을 넣어주면 됩니다. github code SSR에서 head 변경 여러 페이지에 고정값 일괄 설정하기 Next13으로 넘어오면서 기존에 사용하던 방식이 아닌 Medata를 export하는 방식으로 title을 설정해줍니다. import Head from 'next/head'; /** * title이 변하지 않습니다. * @returns */ export default function Page() { return ( default page..

next.js github discussion에 질문을 올린 내용입니다. https://github.com/vercel/next.js/discussions/49433 notFound()를 사용하면서 이슈를 해결하기 위해 테스트하다보니 여러 케이스를 발견하게 되었습니다. 상세한 로직은 해당 github를 참조하시기 바랍니다. https://github.com/osydoo/next13-not-found Summary ‘use client’의 useEffect의 동작이 의존성에 따라서 다르게 동작하는 이유가 뭔가요? axios.interceptors를 동기적으로 실행했을 때는 notFound()가 에러를 뱉고, 비동기로 했을때는 동작이 무시되는 이유가 뭔가요? 클릭이벤트에선 왜 에러를 뱉나요? Case In ..

next.js github discussion에 질문을 올린 내용입니다. https://github.com/vercel/next.js/discussions/49433 notFound()를 사용하면서 이슈를 해결하기 위해 테스트하다보니 여러 케이스를 발견하게 되었습니다. 상세한 로직은 해당 github를 참조하시기 바랍니다. https://github.com/osydoo/next13-not-found Summary ‘use client’의 useEffect의 동작이 의존성에 따라서 다르게 동작하는 이유가 뭔가요? axios.interceptors를 동기적으로 실행했을 때는 notFound()가 에러를 뱉고, 비동기로 했을때는 동작이 무시되는 이유가 뭔가요? 클릭이벤트에선 왜 에러를 뱉나요? Case In ..