정말 오랜만에 개념 정리를 한다.
왜 코공은 그동안 개념 정리를 안 했을까?
변명
- 프로젝트에 들어가서 새롭게 배우는 개념을 정리할 것이 없었다.
- 프로젝트가 끝나고는 취준 했다.
- 회사에 들어와서 새롭게 배운 Next가 있어서 정리한다
요렇게 될 것 같다.
부트캠프가 끝나고 나니 무언가 개념 정리를 할 것이 없어졌다고나 할까..
사실 공부에는 끝이 없지만
이제 공부 방향을 스스로 정해야 하기 때문에!
그래서 첫 번째로 정한 것이 바로 Next.
앞으로 부트캠프에서 개발멘토를 하면서 새롭게 알게 된 개념들고 같이 정리하려고 한다.
코공의 블로그는 계속 된다.
들어가기 앞서..s
Next가 무엇인가..
처음에는 네스트인지 넥스트인지 헷갈렸다.
배운 적이 없기 때문.
이제부터 천천히 알아보자.
오늘 이 시간은 정말 기본 개념만 알아볼 것이다.
처음부터 많이 하면 넘어진다 이말이야~
Next.js가 뭐꼬
우선, 간단하게 말하면 React 상위 호환이다.
리액트 사용할 때 개빡치고 번거로웠던 부분들을 보완한 버전이라고 보면 된다.
그래서 Next.js 공식 문서를 가도 그렇게 써있다.
리액트의 생산성을 위한 프레임워크라고.
그래서 SSR, TypeScript, bundling, route 등을 더 쉽게 도와준다고 한다. 그 외에도 API 등등 더 있지만!
폰트가 참 예쁘다.
나도 Next는 처음이라 내가 아는 것만 쓸 것이다.
자세한 설명은 생락한다.
알아서 찾아보도록!
Next - Route
우선, Next를 설치하게 되면 아래 사진처럼 기본 폴더들이 생긴다.
여기에 생긴 기본 폴더들은 아주아주 중요한 역할을 한다.
Next는 기본으로 생긴 폴더 루트를 통해 자동 라우팅을 한다.
일단, 기본적으로 있는 pages 폴더에 있는 index.js가 제일 npm run dev를 통해 localhost를 열면 보이는 화면이다. 이 페이지가 가장 기본이 되는 메인으로 사용하면 될듯.
한 번 기본 index.js에 있는 내용을 다 지우고 저렇게 바꿔보았다.
아주 만족스럽다.
Next의 라우팅은 이제부터 시작이다.
기본으로 설치된 pages 폴더에 있는 파일들을 자동으로 라우팅 해준다.
- pages에 라우팅하고 싶은 이름의 폴더를 만든다.
- 그 안에 index.js를 만들어준다
- index.js에 내용을 채우면 끝.
요게 Next 라우팅의 끝이다.
리액트와 비교했을 때 엄청 쉬워짐!
그럼 한 번 해보자.
나는 mypage라는 폴더를 만들어 보았다.
그리고 안에 내용을 채웠다.
이러고 로컬호스트 뒤에 /mypage를 붙여보자.
짜잔! 이러면 /mypage를 붙이면 바로 라우팅이 된다.
리액트.. 이제 넌 안 쓴다.
그러면 이걸 어떻게 활용하느냐?
이렇게 Link를 달아주면 된다.
import 잊지 말자.
보이는 화면에서 Link 걸어준 div를 클릭하면 mypage로 이동하게 된다.
이렇게 오늘 Next의 라우팅에 대해 알아보았다.
다음에 또 Next에 대해 더 알아보자.