즐겁게, 코드

CSS의 확장팩 중 하나인 Scss에서는 정말 많은 편의기능을 제공하는데요, 오늘은 여러 기능들 중 다른 Scss 파일을 불러올 수 있는 import 기능에 대해 알아보겠습니다. components │ ├── Button │ ├── Button.jsx │ └── Button.scss ├── Card │ ├── Card.jsx │ └── Card.scss ├── Header │ ├── Header.jsx │ └── Header.scss │ ├── App.scss └── App.jsx ... 위의 폴더 구조는 제가 이전에 애용하던 컴포넌트 폴더 구조입니다. 폴더별로 컴포넌트와 스타일 파일을 관리하는 방식은 나쁘지 않지만, scss를 활용한다면 더 멋지게 폴더 구조를 개선할 수 있습니다. components ..

기존 리액트 어플리케이션은 크게 두 가지 방법으로 스타일을 꾸밀 수 있었습니다. 하나는 CSS나 SASS 등 별도의 스타일 파일을 생성해 관리하는 방식이고, 다른 하나는 컴포넌트 안에서 스타일을 작성하는 CSS-in-Js 라는 방식입니다. 이중 넥스트(Next.js)에서는 CSS-in-js 방식을 권장하며, styled-component와 유사한 styled-jsx 라는 도구를 활용합니다. styled-jsx styled-jsx는 넥스트 프로젝트에 기본적으로 포함되어 있습니다. 이를 활용하기 위해서는 jsx 라는 값을 속성으로 갖는 style 태그를 컴포넌트 본문에 위치시킨 후, 적용할 CSS 스타일을 *문자열로 작성하면 됩니다. (* 상태에 따른 조건부 스타일을 활용할 수 있다는 장점을 살리기 위해 주..