ReactJS - #4 기초 및 실습

#4 기초 및 실습

 

생성된 my-app 폴더 밑에 여러개의 파일이 생기는데

 

[package.json]

 

name, version, private 같은 자신이 만든 App에 대한 설명들이 있고

 

script 부분이 우리가 쓰는 명령어라고 생각하면 된다.

 

보통 우리가 next를 만드는 과정은 bulid 명령어를 통해 bulid하고 start 명령어를 통해 실행한다.

 

이 둘을 통합하는 느낌이 dev 명령어 이다.

 

나중에 deploy(배포) 할때는 bulid 명령어와 start명령어를 따로 써야 되겠지만

 

개발환경에서는 dev 명령어를 사용해도 무관한다.

aeho@jaehoiui-MacBookPro react % cd my-app
jaeho@jaehoiui-MacBookPro my-app % npm run dev

이렇게 명령어를 실행하면 빌드되고 실행되는 것을 확인할 수 있다.

 

그리고 next로 빌드를 하기위해서는 3개의 모듈이 필수인데 next, react, react-dom이다.

 

이건 cra(create-react-app 으로 설치하더라도  react, react-dom은 필수 모듈이다.)

 

이 세개의 모듈을 자동으로 설치하기 위해 우리가 쓰는게 next.js

 

물론 따로 설치해도 상관없지만 편하게 쓰기위해서 next.js를 사용했다.

 

---

[pages]

이 pages에 component를 관리할 폴더를 만들어 놓으면 여기서 component들을 관리할 수 있다.

 

 

 

[public]

static 파일이라고 해서 정적파일들을 저장하는 위치

 

빌드했을때 자연스럽게 위치 경로가 설정되어 정적 파일들이 저장된다.

 

빌드할때 이미 static에 대한 빌드를 해놓기 때문에 이런 파일들을 호출하는데 있어서 속도를 줄여준다.

 

image, font, json 파일 같은 것들을 저장한다.

 

 

 

[styles]

 

여기는 css같은 스타일 설정 파일을 저장하는 위친데 우리는 나중에 sass로 설정할 예정

 

---

[_app.js]

next.js는 page 단위로 라우팅이 되는데 이 page 단위로 라우팅을 할 수 있게끔 해주는 중간 다리라고 생각하면 된다.

 

* 라우팅(Routing) : 목적지까지 갈 수 있는 여러 경로 중 최적화된 한 가지 경로를 설정해 주는 과정.

 

---

[_app.js]

// css import
import '../styles/globals.css'


// 라우팅 방법인데 
// 이코드가 localhost:3000/pageProps 
// ex) localhost:3000/class 같은 페이지를 호출하면
// 자동으로 next가 라우팅 해준다.
function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

 

근데 아무 설정도 안하고 localhost:3000을 호출하면 왜 index.js가 나오는지는 잘 모르겠다

 

어디서 / 루트로 요청이 들어오면 index.js를 라우팅하게 해놨을텐데 자동설정인지 내가 못찾은건지는 잘 모르겠다..

 

---

여기에 _document.js란 이름으로 파일을 만들면 여기서 meta 같은 것도 설정 할 수 있고

 

CDN도 여기에 추가해서 사용할 수 있다.

 

 

밑에는 최초 index.js를 간단하게 수정한 코드인데

class Component가 아니고

 

function Component의 형태를 가지고 있고

 

이런 Component를 라우팅하기 위해서는 반드시 export default를 붙여줘야 하는데

 

위 처럼 function을 선언할때 그 앞에 붙여주는 방식과 function을 생성한뒤 나중에 export 해주는 방법이 있다.

 

---

덧붙이자면 _가 붙은 파일은 next가 사용하는 세팅 파일이라고 생각하면 된다.

 

_app.js

_document.js

_error.js

 

요 세개가 대표적인 세팅 파일