말은 쉽지, 코드를 보여줘!

일단 CNA 에서 제공하는 예제에서는 NextPage 컴포넌트 생성시 화살표 함수를 사용하고 있다. 그런데 리액트에서 함수형 컴포넌트 생성시에는 함수선언문이 선호된다고 한다. https://velog.io/@velopert/create-typescript-react-component 통일을 위해 NextPage 컴포넌트 생성시에도 함수선언문을 사용하는게 좋을 거 같긴한데 궁금한 점. 1. 리액트에서 함수형 컴포넌트 생성시 왜 함수선언문이 선호되는걸까? 위 링크에서도 자세한 이유는 설명하지 않고 그냥 해외 유명 개발자들이 그렇게 사용한다고 안내하고 있다. 구체적인 이유를 알고 싶다.. 2. NextPage 컴포넌트의 경우 화살표 함수를 변수에 담아서 그것을 리턴하고 있는데 변수 타입을 NextPage로 지..

Next.js 의 pages 디렉토리는 파일기반으로 라우팅 기능이 수행되게 하는 핵심적인 역할을 한다. 이 안에서도 특별한 역할을 하는 파일들이 있는데 _app.jsx, _document.jsx, _error.jsx 파일들이다.(타입스크립트를 사용한다면 확장자는 .tsx 가 될 것이다) 이 파일들이 필수로 필요한 것은 아니지만 그 특징을 활용하면 보다 효율적으로 개발할 수 있다. _app.jsx 파일의 경우 페이지의 body 부분이 만들어지기 전에 호출되기 때문에 pages 하위의 특정 페이지가 호출될 때 공통으로 적용할 header, footer 등을 추가할 수 있게 된다. 이에 레이아웃 정의시 활용될 수 있다. _document.jsx 파일의 경우 _app.jsx 에 의해 만들어진 body를 토대로 ..

CNA(create next-app)으로 Next.js 프로젝트를 생성할 경우 기본적으로 생성되는 디렉토리들은 아래와 같다. public: 정적자원의 root 디렉토리이다. styles: 정적자원 중 css 파일을 별도로 보관하는 디렉토리로 보인다. 아마도 global css를 보관할 거 같다. pages: 넥스트의 파일구조 라우팅 기능을 담당하는 디렉토리로 간단하게 apache 의 documentRoot와 비슷하게 생각하면 된다. public 디렉토리에 test.png 파일을 보관할 경우 html에서 /test.png 로 접근할 수 있다. 주의할 점은 랜더링이 완료된 html에서만 접근이 가능하다는 것이다. 랜더링 전 파일 내에서 improt 로 참조할 경우에는 해당되지 않는다. 기본적으로 상대경로 접..

Next.js를 시작하기에 앞서 개발환경을 셋팅해본다. 기준 환경은 맥북, vscode 이다. 1. Node 설치 https://nodejs.org/ko/ 에서 다운로드해서 설치하자. 그럼 기본적으로 Node.js와 npm이 설치된다. 설치가 완료되었으면 아래 명령어로 버전을 확인하며 정상 설치 확인 node -v npm -v node 는 구글 크롬의 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임이다. 일반적으로 자바스크립트 엔진은 브라우저에 내장되어 있고 이에 자바스크립트를 사용하기 위해서는 기본적으로 브라우저가 필요하다. Node.js 를 설치하게 되면 해당 로컬환경에서도 자바스크립트를 사용할 수 있게 된다. npm 은 웹에 업로드된 재사용 가능한 코드들을 모듈로 만들어놓은 노드 패키지들을 사..