29일차

29일차는 다음 주 프로젝트를 대비해서 기술스택을 연습해봤다. 아주 간단하게 감만 익힐 정도로 했다. Next.js는 유튜브 강의를 찾아보면서 했고, Tailwind는 공식 홈페이지에서 문서를 참조하며 만들었다.

gitHub : https://github.com/leeyulgok/tailwind

아주아주 맛보기로만 했다.

Next.js

우선 Next.js에서 가장 크게 놀란 점은 라우터다. 지금까지 React를 하면서 라우터를 사용하려면, 라이브러리를 다운 받아서 Router, Routes, Route를 설정해야 했는데 Next.js는 그런게 없다.

여기서 주목할 부분은 app에 있는 page.js와 list 안에 있는 page.js다. 저렇게 app 폴더 안에 list 폴더를 두면 자동으로 라우터가 된다.

이 말이 무슨 뜻이냐면, localhost:3000/ 을 하면 app 폴더에 있는 page.js가 렌더링 된다. page.js는 React에서는 App.js와 같다. 그래서 루트 페이지를 갖고 있어서 가장 처음 렌더링 된다.

그런데 localhost:3000/list를 호출하면 list 폴더에 있는 page.js가 렌더링 된다.

Next.js는 따로 라우터를 할 필요가 없다는 것도 큰 장점이다. 만약 localhost:3000/list/my-page 같이 하려면 list 폴더 안에 my-page 폴더를 만들면 된다.

Tailwind

공식 홈페이지 : https://tailwindui.com/
문서 홈페이지 : https://tailwindcss.com/docs/installation

Tailwind는 따로 style 폴더를 만들지 않고 class로만 css를 만들 수 있게 해주는 프레임워크다. 우선 코드부터 보면

import Link from "next/link";

const Header = () => {
    return (
        <div className="bg-black text-white h-12 mb-10 pl-3 pt-2">
            <Link href="/" className="text-2xl mr-4">홈</Link>
            <Link href="list" className="text-2xl mr-4">목록</Link>
        </div>
    );
};

export default Header;

이런 식으로 사용된다. className을 보면 css처럼 사용되지 않고 Tailwind에서 정한 css 속성을 입력해서 사용된다.

가볍게 사용하고 느낀점은 '익숙해지면 굉장히 편할 거 같다는 점이랑 코드가 복잡해진다.' 라는 점이다. 이 부분에 있어서 Tailwind를 하기 위해서는 컴포넌트 관리가 굉장히 중요해지는 부분이라 생각한다.

정리하기

이번에는 Next.js와 Tailwind를 처음 사용해보았다. 이걸 할 수 있을까? 하는 걱정이 있었다. 하지만 막상 해보니까 차근차근하면 할 수 있다고 생각했다. 그러니 다음 주까지 시간이 있기 때문에 조급해 하지 않고 기본만 잘 잡아두면 좋을 거 같다.

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.
#프로젝트캠프 #프로젝트캠프후기 #유데미 #스나이퍼팩토리 #웅진씽크빅 #인사이드아웃 #IT개발캠프 #개발자부트캠프 #리액트 #react #부트캠프 #리액트캠프