[React] 인스타 클론코딩 기록(1)

React와 next.js를 활용해 인스타그램 클론(??)을 시작해 보겠습니다!

저는 react-create-app을 사용하지 않고 필요한, 사용할 것들을 확인하며 해보려 합니다.

 

 

오늘은 개발환경 설정 기록이 많을 것 같습니다.

 

노드 잘 설치 됐는지 확인 해보고

프로젝트 디렉토리에 npm init 으로 시작을 합니다. 시작~

npm init

react, react-dom, next 9버전 설치합니다.

npm i react react-dom
npm i next@9

next는 자동으로 pages 디렉토리 안의 파일들을 개별적인 페이지로 인식하고, 코드 스플리팅 된 페이지로 만들어줍니다. 그 안의 index.js 가 index 페이지가 되는 원리입니다.

또 좋은 점이 import React from 'react'; 를 상단에 적지 않아도 되지만 저는 그냥 적어 둡니다 ㅎㅎ

 

next는 기본적으로 프로젝트의 루트 경로에 있는 next.config.js를 읽어들입니다. 플러그인 등 설정할게 생기면 파일 생성 후에 작성하면 됩니다.

 

넥스트 설치가 완료되었다면 package.json에 들어가서

"scripts": {
    "dev": "next"
 },

scripts를 "dev": "next" 로 변경합니다.

 

이제 npm run dev를 next가 실행되며 로컬서버로 작업이 가능합니다!

그렇게 로컬호스트로 접속하면

localhost:3000 은 메인페이지, pages/index.js 가 보이고

localhost:3000/pagename, pages/pagename.js 로 이동합니다.

또 _app.js로 모든 페이지의 공통 요소를 모을 수 있습니다.

 

넥스트가 알아서 라우팅까지 해주시니 굉장히 편합니다.

또 동적 라우팅이 가능합니다.

pages 디렉토리 안의 파일 명을 [name].js로 바꾼다면 동적라우팅도 가능합니다.

 

라우팅을 해주며 next.js에서는 링크의 기능도 제공을 하는데

import Link from 'next/link';

로 import 해주시고( 로컬에서는 문제가 없으나, 리눅스는 대소문자 구별이 까다로우니 꼭 대소문자 구분을 잘 합시다. )

<Link href="/">
	<a>링크</a>
</Link>

이렇게 <Link href=""> 로 감싸주고 그 안에 <a>와 텍스트를 적으면 링크도 만들 수 있습니다.