첫 next.js + typescript 도전기..(1)

김응기·2022년 10월 8일
0
post-thumbnail

첫 포스팅

나의 첫 포스팅이다.. 개발만 하다보니까 머리속에 남지를 않아서 이렇게 블로그에 라도 기록해놔야 뭔가 남을거 같아서 시작을 해본다. 꾸준히 할수있기를 바란다.

이전에 다녔던 회사에서 React나 vue로 TV앱을 만들었던 경험이 있고, 현재도 간간히 회사에서 openlayers 를 만지고 있는 터라 자바스크립트, React 자체에 대한 두려움은 없다.
또한 메인은 c#으로 닷넷쪽 개발을 하고 있어서 typescript 도 뭐 비슷하지 않을까? 라는 생각에 문법 공부는 안하고(휴 나는 정말 글러먹음..) 일단 webstorm 으로 nextjs 프로젝트를 생성해본다.

중요 포인트

이 포스팅은 그저 공식문서를 기반으로 하나씩 실습해보며 느낀점이나 뭐 여러가지를 일기처럼 쓰려고 하는거니까.. 뭔가 얻어가려고 검색하다가 이 글을 보시는분들은 그냥 뒤로가기를 누르시던지, 아니면 읽으시면서 측은하게 봐주시면 감사하겠다.

일단 뭐든 시작은 라우팅부터..!

시작하자 마자 난관..

index routes

CRA는 페이지 라우팅할때 생각보다 해야할 것이 많았던것으로 기억한다.(일단 npm으로 라우팅 모듈도 깔아주는것부터 해서..) 그런데 next.js는 pages 디렉토리에 컴포넌트를 만들어주기만 해도 라우팅이 된다는 아주 눈이 번쩍 뜨이는 소리를 들었다.
바로 도전해본다.

공식 문서

자 그럼 똑같이 가보자

엥 벌써 에러다.. 내가 뭘 잘못한거지? 저 공식 문서와 다른건 js 냐 ts냐의 차이인데..
헐 설마 파일명이 ts라서?? 혹시나 하고 tsx로 바꿔 보았다.

아니.. 왜 해결 되는데...
next.js 에서는 ts 파일은 인식이 안되는건가? 근데 공식문서에는 ts도 괜찮다고 하는데?
뭔가 내가 prettier나 eslint쪽 셋팅을 잘못건드린건가.. 아 혼란하다 정말..
(이거 왜 그런지 아시는분 댓글좀.. 굽신굽신..)

정말 풍문으로만 전해듣던 pages에 컴포넌트만 생성해도 알아서 routing이 되는 것을 두눈으로 목격하였다.😀

Nested Routes

공식문서

오호 그러니까 디렉토리를 중첩으로 만들어도 경로 그대로 라우팅이 된다는 말이구만? 일단 해보자.

일단 blog디렉토리 안에 first-post 이름으로 컴포넌트를 만들고 그 경로 그대로 들어가주면?

이건 뭐 사실.. 안되면 이상한거 같은데 일단 오케이 😀

Dynamic Routes

공식문서

이놈은 무엇이냐 정리하자면
post라는 임의의 디렉토리를 만들고 그안에 index.tsx라는 컴포넌트를 만들어주고, 위의 공식문서와 같이 코드를 넣어준 뒤,
http://localhost:3000/post?pid=123 이런식으로 쿼리를 날리면 useRouter라는 훅을 통해서 쿼리스트링을 가져올수 있다는 것이겠지?
일단 고고

되었다.

오늘은 그냥 맛보기로 next.js를 경험해보면서 포스팅을 해보았다.
앞으로 공부하면서 여기다가 꾸준히 글을 쓸 계획이고, 나름 개발하면서 고통받다가 해결한 꿀팁들을 공유해야겠다.
다음편에 계속!

profile
앱등이인데 .NET 개발자이고.. 개발자인데 락스타를 꿈꾸는 사람!

0개의 댓글