[유데미x스나이퍼팩토리] 프로젝트 캠프 Next.js 1기 - 6일차

 

6일 차인 오늘은 본격적으로 리액트에 대해 학습했다. 

 📚 학습한 내용
- vite를 활용한 개발 환경 세팅
- JSX
- 컴포넌트
- CSS 스타일링
- Props
- useState, useId, useRef

 

vite를 사용해서 React + typescript 함께 사용하는 방식으로 학습을 진행했다. 컴포넌트의 CSS 스타일링을 적용하는 방식에서 Tailwind CSS를 학습하게 되었다. CSS Modules과 styled-components는 개인적으로 학습한 적이 있었지만, Tailwind CSS는 공부해 본 적이 없어서 흥미로웠다. 유틸리티 클래스를 제공하기 때문에 사용하기 위해선 자주 쓰이는 유틸리티 클래스는 외워야 할 것 같다. 공식문서에서 매번 찾아 적용할 수 없으니... Next.js 에서는 Tailwind CSS 사용을 권장한다. 그 이유는 뭘까? 인라인으로 css 적용하는 방식은 코드의 가독성 측면에서 떨어지기 때문에 나는 선호하지 않는 방식이다. 아직 Next.js를 사용해서 CSS 적용해 본 적이 없어서 어떤 이점이 있는지 찾아볼 필요성을 느꼈다.  

 

버튼 컴포넌트 실습

 

CSS Modules, styled-components, Tailwind CSS 방식 중 선택해서 피그마 디자인을 보고 재사용 할 수 있는 버튼 컴포넌트를 생성해 보는 실습시간이 있었는데, 나는 Tailwind CSS를 선택해서 만들어보았다. 버튼의 넓이, 배경, 색상, 글자색은 변경이 가능해야 한다. props로 전달받은 값을 사용해한다. 그래서 props로 전달받은 style을 동적으로 적용해 보았는데... 아래와 같은 방식은 사용할 수 없다. 클래스의 이름을 동적으로 구성하지 말라고 공식문서에 기재되어 있었다. 😨 강의에서 다양한 CSS 스타일링 방법을 학습하느라 정~말 기본개념만 배워서 추가 공부가 필요하다. 동적인 값을 사용하고 싶다면 두번째 코드처럼 작성하면 된다.

 

export default function TailwindButton(props: TailwindButtonProps) {
  const { children, style, ...restButtonProps } = props;
  return (
    <button
      {...restButtonProps}
      className={`w-[${style.width}] bg-[${style.backgroundColor}]`} // 👈🏻 ❎
      className={`${style}`} // 👈🏻 ✅
    >
      {children}
    </button>
  );
}

 

 

 

학습 내용 정리 노트

 

 

👩🏻‍💻 학습을 통해 느낀 점 

 

오늘 배운내용을 복습하면서 실습한 버튼 컴포넌트를 CSS Modules, styled-components를 적용해 보았다. CSS Modules 방식의 코드가 가독성 측면에서는 제일 괜찮은 방식 같아 보였다. 내가 styled-components에 익숙해져서 그런지 사용하는 데 있어서는 styled-components가 편했다. 코드의 양이 많아진다는 단점은 존재하지만... 아직 Tailwind CSS는 익숙하지 않아서 과제를 수행하면서 해당 프레임워크를 사용해보려고 한다. Tailwind CSS 강의를 찾아보고 있는데.. 내가 알고자 하는 내용을 다루는 강의는 없어서 공식문서를 보면서 해야 될 것 같다. 팀 프로젝트 시작 하기 전에 Tailwind CSS 사용법을 잘 익혀두어 어려움 없이 사용하고 싶다.  

 

 

 

---

 

본 후기는 [유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 1기 과정(B-log) 리뷰로 작성되었습니다.

 

#유데미 #udemy #웅진씽크빅 #스나이퍼팩토리 #인사이드아웃 #미래내일일경험 #프로젝트캠프 #부트캠프

#Next.js #프론트엔드개발자양성과정 #개발자교육과정