최근에 nextJS강의는 들어야하는데 인프런에는 호흡이 긴 강의밖에 없고... 어디서 들어야하나 찾던 도중 유튜브에서 좋은 강의를 발견해 공유하고자 한다.

https://www.youtube.com/watch?v=pUNSHPyVryU&t=1485s

내가 원하던 장점들이 다 녹아들어 있어서 굉장히 편하게 봤다.
1. nextJS가 상대적으로 최신 버전이다(2개월 전)
2. 스타일링 요소들(tailwind에 들어갈 속성값)을 간소화시켰다.
3. 목소리가 좋고 강의에 막힘이 없다.

이런 좋은 장점들에도 불구하고 영어라는 생각보다 허들 높은 단점?이 있으니 참고 바란다.

그럼 이제 처음부터 시작해보겠다.

세팅

npx create-next-app@latest ./

를 활용하여 eslint를 제외하고 typescript와 tailwindcss를 설치했다. 이후 tailwind.config.ts파일과 public파일의 이미지들은 복붙으로 세팅환경을 동일하게 만들었다.

개인적으로 처음봐서 신기했던 것은 @apply 의 활용이었다. tailwind는 네이밍이 필요없고 클래스만 작성해도 되서 간단하다는 장점이 있지만 코드의 가시성이 더러워진다는 명확한 단점이 있었다. 그 중 중복된 클래스를 모아주는 @apply의 활용은 가시성도 좋게 만들어주고 코드의 재사용성도 좋게 만들어 줘서 잘 사용하게 될 것 같다.

다음 예시는 globals.css에 들어가는 class의 일부이다.

.custom-btn {
  @apply flex flex-row relative justify-center items-center py-3 px-6 outline-none;
}

메인페이지 대문작성(hero)

전체적인 layout을 잡기 전에 hero.tsx 파일과 customButton.tsx파일을 만들어 메인페이지의 대문을 정했다.

여기서는 3가지 내용이 있었다.

1. 서버컴포넌트는 html안에 자바스크립트 기능을 넣을 수 없기에 버튼에서 'use client' 를 정의해주고 시작하였다.

2. props로 전달하는 과정에서 타입을 지정해주었다. 옵셔널한 타입의 경우 ?를 추가하여 타입의 강제성을 해제시켜주었다.

3. 단순히 components 폴더 안에 tsx파일들을 쑤셔넣기만 해도 라우팅이 되지만 index.ts파일을 만들어 라우팅을 관리하면 더욱 쉽게 라우팅을 따라갈 수 있다.

import Hero from "./Hero";
import CustomButton from "./CustomButton";

export {
  Hero,
  CustomButton,
}