next.js3 프로젝트 Next.js 세팅하기 Next.js 세팅 Next.js세팅에 블로그 작성하는 이유는 Next.js 사용해서 프로젝트를 진행하기로 하였다. (참고로 일하면서 진행하다 보니 1주일은 소요되었다....) 이전에 세팅을 해본 적이 있는데 기록을 해두지 않아서 이번 세팅할 때 어려움이 있었다. 이러한 이유와 내가 잘못세팅한 부분을 다른 사용 자들과 공유하고 잘못된 점을 듣고 싶어서 블로그를 작성하게 되었다. 초반 세팅만 되어 있고 폴더 구조는 다음 블로그에서 진행할 예정이다. 사용 스택 코어: Next.js, TypeScript 상태 관리: React-Query, Recoil (차후 세팅 적용 예정) 스타일링: emotion 테스트: jest 빌드: Babel 패키지 매니저: Yarn Berry next.js에서 제공하는 간편한 초기.. 2023. 9. 14. Next.js 프로젝트에서 yarn start(or npm run start) 스크립트를 실행했을 때 실행되는 코드를 Next.js Github 레포지토리에서 찾은 뒤, 해당 파일에 대한 간단한 설명을 첨부해주세요. 윈티드 프리온보딩 사전 과제중에서 3번째 과제가 가장 어려웠다. 처음으로 깃헙 레포지토리에 가서 확인을 하는데 처음 보니 뭐가 어떤 기능인지 감도 오지 않았다. 하지만 3번쨰 과제가 가장 크게 도움이 된다고 하여서 포기하지 않고 여러 문서와 GPT를 활용해 검색을 하면서 찾아 보았다. ../node_modules/next/dist/server/lib/start-server.js 해당 경로에 next.js 서버를 실행 해주는 파일로 판단되는 곳을 찾게 되었다. let targetHost = hostname; await new Promise((resolve)=>{ server.on("listening", ()=>{ const addr = server.address(); port = typeof addr ==.. 2023. 6. 29. SPA(Single Page Application)로 구성된 웹 앱에서 SSR(Server-side Rendering)이 필요한 이유 SSR을 사용해야 하는 이유 React를 사용하다 보면 SSR이 필요하다는 생각을 하게된다. 해당 페이지를 사용자들이 검색했을때 사용자들에게 해당 페이지가 노출이 되기위해서는 구글봇이나 네이버 봇이 우리 페이지의 정보를 가져가야한다. 하지만 봇은 해당 페이지가 로드되기전에 HTML파일과 robots.txt정보만을 가져간다 CSR을 사용하면 해당 페이지가 다 나오기전에 봇이 떠나기 떄문에 해당 문제를 해결하기 위해SSR을 사용해야 한다는 결론이 나온다. 그래서 이번에 SSR에 대해 알아 보려고한다. SSR을 사용하는 이유 초기 페이지 로딩 속도 향상 SSR의 주요 장점 중 하나는 초기 페이지 로드 속도를 향상시키는 기능입니다. SPA에서 클라이언트의 브라우저는 페이지를 렌더링하기 전에 JavaScript .. 2023. 6. 21. 이전 1 다음
