📍배경 styled-components로 팀 프로젝트를 시작했는데, 어떻게 폴더 구조를 정해야 할까? 다양한 글을 읽고 내가 내린 결론은... 📍폴더 구조 ✅프론트엔드 기술 스택 - Next.js - TypeScript - Styled-components ⭐ 여기에 중점! ✅폴더 구조 /* root ├─components │ ├─common │ │ ├─Button.styled.ts : 재사용 스타일 (에시) │ │ ├─Input.styled.ts │ ├─Header : 개별 컴포넌트 (예시) │ │ ├─index.tsx : 로직 │ │ └─styled.ts : 스타일 │ ... ├─enum │ └─index.tsx : 상수화를 위한 문자열 데이터 보관 폴더 ├─pages │ ├─404.tsx : /err..

📍Styled-components는.. ✅장점 - React 친화적 (React를 위해 만들어짐) - style이 자동으로 주입된 컴포넌트를 만들 수 있음 - props를 통한 다이나믹 스타일링 가능 :disabled or :hover 상태에 따라 스타일링 변화 ✅단점 (Next.js 측면에서) - SSR 지원을 위한 추가 설정 필요 - 컴파일 이후 스타일에 랜덤한 클래스명이 생성되어 디버깅이 어려움 📍_document.tsx를 수정하여 SSR 지원 ✅기본적으로 CSR 방식으로 동작하는 styled-components를 SSR 방식으로 동작하게 수정 import Document, { Head, Html, Main, NextScript } from 'next/document' import { ServerS..