Framework Overview 1 - Framework and Pages

1. Library vs Framework

 

일단 pages 폴더 안에 있는 모든 것을 삭제해 보자.

그리고 pages 폴더 안에 index.js라는 파일을 만들고 이렇게 작성해 주자

// index.js

function Home() {
  return "hi";
}

export default Home;

 

그럼 index.js의 Home component에 넣은 hi라는 문자가 웹사이트에 자동적으로 보이고 있다.

 

library

우리는 library를 불러오고 library를 사용해서 무언가를 한다.

create-react-app을 통해서 react 앱을 만든다면, 항상 아래에 이런 부분이 만들어져 있다.

// index.js

...
ReactDOM.render(
  <React.StrictMode>
  ...
  </React.StrictMode>,
  document.getElementById("root")
);

creat-react-app을 하게 되면, App component로 시작하는데, 이 App component는 비어있을 것이다.

그래서 우리가 직접 component 폴더를 만들건가, router 폴더를 만들던가, 우리가 원하는 대로 하게 된다.

또한 언제 react를 부를지, 어떤 폴더 구조로 만들지 우리가 정하면 된다.

이렇게 library를 사용할 때는 우리가 원할때 언제든 어떤 방법으로든 부르면 된다.

 

framework

framework는 개발자로서 우리가 사용하는 것이다.

우리가 library를 사용해서 무언가를 하는 반면 framework는 우리가 사용하는 것이 아니라 우리 코드를 불러온다.

next.js같은 framework에선, 우린 특정한 규칙을 따라서 특정한 걸 해야한다.

 

우리가 새로운 next.js 프로젝트를 만들었을 때, pages 폴더에는 index.js 가 없다. 

우리가 할 수 있는건, pages 안에서 뭔가를 만드는 것 뿐이다.

 

아까 index.js 파일을 만들었는데, 자동적으로 어떤 설정이나 router 설치 없이도 자동적으로 서버의 home으로 가보면 hi라고 쓴 걸 볼 수 있었다.

// about.js

export default function Potato() {
  return "about us"
}

이 개념대로라면 about.js 라는 파일을 만들고 위처럼 적은다음 localhost:3000/about이라는 url로 들어가면, about us라는 글자를 볼 수 있다.

 

 

 

 

2. Pages

우리가 next.js에서 할 일은 pages 폴더 안에 파일을 만들어주는 것이다.

그럼 next.js가 파일의 이름을 가져다가 url의 이름으로 쓴다.

 

여기서 중요한 것은 파일의 이름이다.

해당 파일의 이름이 그대로 우리 url에 들어가기 때문이다.

반면에 component 이름은 그닥 중요하지 않다.

또 중요한 것은 만든 compoent를 export default 하는 것이다.

 

about.js로 만든 파일 이름을 about-us.js라고 변경해보자.

그후 localhost:3000/about 에 들어가면 404 페이지가 뜬다.

next.js가 구현없이 바로 제공해주는 것이다.

 

 

 

---

출처

노마드코더

https://nomadcoders.co/nextjs-fundamentals/lobby?utm_source=free_course&utm_campaign=nextjs-fundamentals&utm_medium=site

NextJS 시작하기 – 노마드 코더 Nomad Coders