Next.js | 영화 서비스

 

 

0. 서비스 설명

니꼬쌤의 노마드 코더 강의를 들으면서 만들었습니다.

기본 수업에선 간단히 nextjs를 맛보기 위한 프로젝트였어서 별다른 스타일도 없고 기능도 없었습니다.

그래서 다른 라이브러리들을 경험하고 이왕이면 포폴에도 도움이 될 수있지 않을까해서

작업하게 되었습니다.

 

특징

• 빠른 초기화면 / 캐싱으로 인한 빠른 화면
• seo 최적화
• 반응형 ui
• tailwind css
• shadcn/ui 스켈레톤 ui
• shadcn/ui carouce
• shadcn/ui dialog

https://nomadcoders.co/nextjs-for-beginners/lectures/3454

All Courses – 노마드 코더 Nomad Coders

위 프로젝트 기반 강의를 무료로 듣고 싶으시다면 노마드 코드 사이트에서 니꼬쌤 만나보세요 ㅎㅎ (노광고)

 

 

반응형

 

 

1. Next.js

요즘 채용 시장에서 원하는 스팩에 꼭 있는 넥스트.

전 회사에서 프레임워크로 앵귤러를 쭉 사용했고 찍먹으로 뷰, 리액트를 해본 나로썬 초큼 슬프기도 했지만 이직을 위해선 공부해야만 한다...

동시에 도대체 어떻길래 그 많은 회사에서 원하는지 알아보기 위해 시작했다.

 

조금이지만 배워보니

그동안 사용했던 앵귤러나 뷰, 리액트에서 부족했던 부분을 많이 수정하고 채워준 듯 했다.

 

 

spa에서 가장 필요했던 seo 문제

next는 ssr을 기본으로 지원하기 때문에 seo고민을 하지 않아도 되었다.

 

 

빠른 초기 화면

위의 내용과 어느정도 연관된 것인데, 기존 spa들은 스크립트를 다운받고 그걸 호출해야지 랜딩이 되고

화면을 볼 수 있었다.

그러나 넥스트는 ssr을 기본으로 지원하기대문에 서버에서 화면을 그대로 내려주고 그만큼 초기화면이 빠르다.

스크립트를 다운받더라도 서버 컴포넌트, 클라이언트 컴포넌트로

(기본으로 서버에서 html을 받아오고, 그 이후에 클라이언트 컴포넌트에서만 리액트로 리랜딩한다)

구분되어 클라이언트에서 호출할껄 서버클라이언트에서 호출할 수 있기 때문에 스크립트 다운이 필요없는 부분이 생긴다.

그렇기 때문에 스크립트 양도 줄어들게 되어 속도 향상에 도움이 된다.

 

 

css모듈 지원

css를 모듈화 할 수 있어서 원하는 컴포넌트에서만 사용할 수 있다.

모듈화 된 스타일을 사용하면 자동으로 class를 변경해서 중복 걱정도 덜 수 있다.

 

 

routing

그래도 많이 편해 지긴했지만, 라우트 파일을 따로 설정해야만 했었다.

그치만 넥스트는 폴더 트리만 프레임워크가 원하는대로 만든다면

자동 라우팅이 된다. 

[아래가 폴더 구조]

📦app
 ┣ 📂(home)	// 홈
 ┃ ┣ 📜loading.tsx
 ┃ ┗ 📜page.tsx
 ┣ 📂about-us	// about-us 페이지
 ┃ ┣ 📂company
 ┃ ┃ ┗ 📂jobs
 ┃ ┃ ┃ ┗ 📂sales
 ┃ ┃ ┃ ┃ ┗ 📜page.tsx
 ┃ ┣ 📜layout.tsx
 ┃ ┗ 📜page.tsx
 ┣ 📂components
 ┃ ┣ 📂ui	// shadcn/ui
 ┃ ┃ ┣ 📜button.tsx
 ┃ ┃ ┣ 📜card.tsx
 ┃ ┃ ┣ 📜carousel.tsx
 ┃ ┃ ┗ 📜skeleton.tsx
 ┃ ┣ 📜movie-info.tsx
 ┃ ┣ 📜movie-poster.tsx
 ┃ ┣ 📜movie-similar.tsx
 ┃ ┣ 📜movie-videos.tsx
 ┃ ┣ 📜movie.tsx
 ┃ ┗ 📜navigation.tsx
 ┣ 📂lib	// shadcn/ui
 ┃ ┗ 📜utils.ts
 ┣ 📂movies	// 상세 페이지
 ┃ ┗ 📂[id]
 ┃ ┃ ┣ 📜error.tsx
 ┃ ┃ ┗ 📜page.tsx
 ┣ 📜constants.ts
 ┣ 📜layout.tsx
 ┗ 📜not-found.tsx

 

 

사용법

아래 명령어 치고 원하는거 선택하면 바로 시작

npx create-next-app@latest

 

 

느낀점

진짜 짱편하다.

라우터, seo 걱정이 없기 때문에 다른 부분에 더 신경 쓸수 있게 되었다.

아직 배운지 얼마 안되었기에 장점만 보이는 걸수도 있는데 좀 더 배우고 다른 플젝을 만들어보면서

겪고 느껴봐야겠다.

 

 

 

 

2. tailwind

개인적으로는 그닥 선호하지 않았던 css 프레임워크입니다.

왜냐하면 

1. 클래스가 너무 많아져서 html이 지져분해지는 경우가 많았었고

2. 클래스를 학습해야하는데 배우면서 까지 해야하나 싶기도 했었습니다.

3. 클래스가 많아지니 한눈에 알아보기 힘들어지고 유지보수도 힘들어 보였다.

4. 정확한 디자인에 따라 커스터마이징 하기 쉽지 않다.

때문입니다.

그런데 이번에 넥스트에서 테일윈드를 지원해주기도 하고 많은 사람들이 쓴다고 하여 이번에 같이 사용해봤습니다. 

 

 

간단 소개

• 클래스를 추가함으로써 스타일을 지정합니다.
• 이는 html 에 직접 class를 지정할 수 있고, 
• 특정 클래스에 @apply를 이용해서 한줄에 많은 스타일을 지정할 수 있어 css 줄이 매우 줄어들수 있습니다.
• 모듈러 디자인으로서 각각 따로 작용하고 조합하여 디자인가능
• 반응형 디자인 쉽다.
• 클래스 고민 ㄴㄴ

 

사용법

• next.js 설치할때 tailwind를 옵션 선택하거나
• npm 으로 설치하면 됩니다.

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

 

 

느낀점

생각보다 넘 편해서 놀랬습니다.

처음엔 html에 클래스를 넣는 정도로만 사용하다가

next에서 css를 모듈화 할 수있기 때문에 모듈화 한곳에서

css 작업을 하는데 기본 50줄이 넘어가고 스크롤이 생겨도 예전에 생겼어야하는데

tailwind @apply를 사용하니 줄이 정말 많이 줄어듭니다.

그리고 생각보다 클레스 익히는데 어렵지 않고 금방 적응됩니다.

특히나 개인 플젝 같은 경우 디테일한 스타일이 필요하지 않을때 빠른 작업이 필요할때 아주 굳이라고 생각합니다.

 

 

 

 

3. shadcn/ui

간단 소개

• 컴포넌트 라이브러리가 아니다.
• 재사용성이 높은 컴포넌트의 집합이라고 생각.
• 간단히 복/붙으로 깔끔하고 이쁜 디자인의 컴포넌트를 만들 수 있다.

 

사용법

아래와 같이 설치하고

npx create-next-app@latest my-app --typescript --tailwind --eslint

npx shadcn-ui@latest init

 

https://ui.shadcn.com/docs/installation/next

Next.js

추가로 설정하거나 구조를 변경하는 부분이 있는데 이건 좀 디테일한 것 같아서

사이트에 들어가서 확인하시면 됩니다.

 

그 후에 필요한 컴포넌트를 더해서 

npx shadcn-ui@latest add carousel

 

예시에서 처럼 복붙에서 사용하면 됩니다.

 

 

느낀점

인기가 많은 만큼 깔끔한 디자인에 사용법도 적응하면 편할 것 같습니다.

그런데 설명이 친절하지 않았던것 같습니다.

 

복붙을 한다고 해도 간단히 설치 방법이 나와있지

그에 관련한 추가적인 설치를 한다거나 하는게 잘 나와있지 않더라구요ㅠ
예를 들면 caroucel 설치할 때 card 컴포넌트도 보였는데 요건 위에처럼 설명에 없고

제가 따로 더하고 임포트함요..

 

이게 스타일을 변하거나 반응형으로 할때 className을 사용하는데 어떤 클레스네임이 있는지

구체적으로 설명이 없어서 caroucel을 할때에도 클래스를 이것저것 다 넣어보면서 이건되나? 이건? 이건? 하면서

넣었던것 같습니다.

 

그리고 옵션도 루프도 있고 첫 시작도 있긴한데,

구체적인 옵션이 어떤게 있는지 잘 나오고 있지 않은것 같습니다.

 

참 기본대로 사용했더니 css를 인식하지 못하는 현상이 나와서 어쩌지 하다가 설명서에 나와있는? 추천하는? 폴더형식으로 바꿔야 제대로 나오더라구요., 이부분도 참고해주시면 좋을거 같아요

 

어쩌면 제가 첨이라 발견 못해서 이렇게 해매다가 투덜대는 걸 수도 있는데

혹시나... 아신다면 댓글로 부탁드려요 ㅠ 

 

그치만 확실히 적용하고나면 편하고 깔끔하고 클래스도 반응형 조절까지 가능해서

좋은것같습니다.

얘도 좀 더 맛을 봐야할 것 같아요.

 

 

 

 

4. 배포 (vercel)

next.js를 개발한 킹갓제너럴 회사..

서버리스 기반의 호스팅 플랫폼으로 웹 애플리케이션을 배포하고 관리할 수 있는 클라우드 플랫폼이라고 합니다.

특히 React, Vue, Angular, Next.js 등의 프레임워크와 라이브러리를 사용하여 개발된 프로젝트를 위한 호스팅 환경을 제공하며, 개발자들이 간편하게 프로젝트를 배포하고 관리할 수 있도록 도와줍니다.

 

역시 넥스트를 개발한 회사 답게

너무너무 편했습니다.

 

기존에는 깃헙에서 연결해서 디플로이 했었는데,

여기는 처음 할때도 편했고, 한번 해놓은 이후로는 깃헙으로 푸쉬하면

자동으로 적용되더라구요?

물론 깃헙에도 푸쉬하면 자동으로 되는 기능이 있는걸론 알고는 있는데 그를 위해선 따로 작업이 필요한걸로 알고 있습니다.

그런데 이건 한번 디플로이하면 이후 추가적인 작업 없이 자동으로 쫘악~

 

 

 

 

여기까지가 지금까지 작업한 내용입니다.

앞으로 더 넥스트를 더 배워보면서 플젝을 만들어 보고 이후에 고급 강의도 보고 내용들을 블로그에 올리려고 합니다.

추가적으로 제가 너무 한우물에 오래있던 물경력에 배움이 필요한 사람이다보니

백단쪽도 직먹해보고 이것저것 배워보고 블로그에 올리려고 합니다.

모두 화이팅입니다.