728x90 반응형 Front-end/Next.js4 [Nextjs] client side 에서 useEffect 가 2번 실행 (?) Next.js에서 useEffect가 두 번 실행되는 이유는 React의 strictMode 때문일 수 있다. strictMode는 기본적으로 true로 설정되어 있다. next.config 파일 설정을 변경해줘야한다. const nextConfig = { reactStrictMode: false, } reactStrictMode 란 ? 우리가 만드는 application 내에서 문제가 일어날 수 있는 부분에 대한 경고를 알려주는 기능이다. 2024. 3. 14. [NextJs 시작하기] URL 생성 규칙 ✔ 컴포넌트의 기본 구조 export default function Home(){ return 'home'; } ✔ 기억해야할 규칙 component 를 export default 해야한다는것 (단 component 의 이름은 중요하지 않다.) URL 의 이름은 파일명이 된다. React 를 Import 할 필요없다.* (useState useEfftect같은 react method 를 쓰고 싶다면 임포트 해야한다.) 2023. 10. 24. [NextJS 시작하기] 오토 라우팅 (?) version 13이후 라우팅 앱을 생성했을때, 기본적인 폴더 구조는 이러하다. (pages 폴더 제외) 자동 라우팅 가능은 pages 폴더에 생성하면 된다고 공홈에서 설명해주었으나 local:3000에서 라우팅 되지않았다. ✔ 폴더구조 2023년 6월 기준 NextJS 13부터는 pages 폴더가 자동생성 되지 않고, app 폴더가 생성된다. 이전 버전 : root/pages/about.js => /about 13부터 : root/app/about/page.js => /about 13버전 이후부터는 위처럼 라우팅 할수있다. 1. pages폴더 내에 있는 파일이름이 접속할 수 있는 URL의 이름이 된다. 2. pages폴더 내에 있는 파일에는 반드시 export default가 있어야 한다. 3. 404 error page를 next.. 2023. 10. 24. [NextJS 시작하기] npx create-next-app@latest 생성하고싶은 경로에서 npx create-next-app@latest (.)점은 현재경로에 설치하겠다. 라는 의미 프로젝트 명 작성후 추가적 옵션을 선택하면된다. 13버전 이후 도입된 app router 기능을 사용하기위해 app router 옵션을 선택해준다. 13버전 이전 - page router 13버전 이후 - app router 😎개발 서버실행 실행 명령어 npm run dev 기본적으로 :3000 포트에 실행된다 😎 배포서버 npm run build 하면 .next 폴더에 배포버전이 만들어진다. 2023. 10. 24. 이전 1 다음 728x90 반응형
