[ Next.js 공부하기 ] 02. Library와 Framework

[ 이전글 보기 ]

 

2022.02.11 - [web/React.js] - [ Next.js 공부하기 ] 1. Intro ( 프로젝트 생성 및 실행해보자 )

[ Next.js 공부하기 ] 1. Intro ( 프로젝트 생성 및 실행해보자 )

 

이번 글은, 라이브러리와 프레임워크의 차이점이 무엇인지를 알아보자.

 

---

1. 라이브러리란?

- 개발자로서 내가 사용하는 것을 뜻한다.

라이브러리를 사용할 때에는, 내가 원할 때 언제든 어떤 방법으로든 상관없이 불러와서 사용하면 된다.

 

2. 프레임워크란?

- 나의 코드를 불러오는 것을 뜻한다.

하지만, 프레임워크를 사용할 때에는, 내가 원할 때 언제든 어떤 방법으로든 불러올 수 있는 것이 아닌,

특정한 규칙에 맞게 불러와서 사용해야 한다.

 

왜냐하면, react.js로 만들었을 때에는, App.tsx 또는 App.js에 있는 ReactDOM.render가 Next.js에는 없다는 것을 알 수 있을 것이다.

하지만, next.js는, index.tsx 또는 index.js 파일이 home이 된다.

즉 커스터마이징을 Next.js에서는 할 수가 없고 규칙에 따라서 사용해야만 한다는 것을 말해주고 싶은 것이다.

 

pages 폴더에, index.tsx와 test.ts라는 파일을 만들어보고 테스트를 해보자.

 

[ index.tsx ]

function Home() {
  return <div>HOME</div>;
}

export default Home;

 

[ test.tsx ]

function Test() {
  return "hi";
}

export default Test;

 

 

그리고, localhost:3000 이면, HOME 이란 글자가 보일 것이고, localhost:3000/test 를 입력하게 되면, hi 라는 글이 뜬다.

 

이 말은 즉, 해당 파일의 이름이 각각의 경로를 뜻한다고도 볼 수 있다.

어떻게 보면, React.js와는 다르게 신기한 점일수도 있고, 이걸로 인해서 SSR이 자유롭게 될 수도 있을 것이라는 생각이 든다.

 

여기까지 해보면 아마 라이브러리와 프레임워크가 무엇인지를 깨달았을 수도 있다.

 

쉽게 설명하자면, React를 해보면, 각각의 경로를 설정해주기 위해서

react-router-dom을 설치해주고, <Route path={"Home"} /> 이런식으로 불러와서 각각의 경로를 설정해줘야만 했다면?

이게 바로 라이브러리 이다. 개발자가 불러오고 싶으면 불러오고 불러오기 싫으면 불러오지 않아도 된다.

 

하지만, next.js는, 각 파일의 이름이 경로가 된다. 이것은 규칙이다. 그렇기 때문에, next.js는 프레임워크라고 볼 수 있다.

우리가 커스터마이징을 할 수는 없지만, 규칙에 맞게 만들어만 준다면 아무런 오류없이 동작이 된다.

 

이제 궁금한 것은, 그럼 React.js 처럼 props는 자유자재로 사용이 가능한 지가 너무 궁금해졌다.

지금 공부를 이것밖에 안했지만, 왠지 Unity3D와 같을수도 있겠다라는 생각을 했다.

 

유니티 3D 또한 배우기 쉽고, 간편하다고 생각을 할 순 있지만, 간단한 게임이 아닌 좀 사이즈가 있는 게임을 만들 때에 드로우콜의 중요성 및 최적화 방법을 모르는 사람들은 저사양에서도 돌릴 수 있음에도 고사양이 되어야 돌릴 수 있는 게임을 만들듯이

간편할 것 같지만, 왠지 중요하면서 어려운 작업을 요구하면서 더욱 더 전문성을 갖춰야 하는 그런 작업이 되지 않을까 싶다^^

 

재밌겠다~!!