styled-components로 프로젝트를 시작할 때 참고할 만한 사례

📍배경

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 : /error 처럼 추가적인 파라미터가 없는 단일 페이지
│  ├─posts
│  │ ├─[slug].tsx : /posts/1... 페이지
│  │ └─index.tsx : /posts 페이지
│  ...
│  ├─_app.tsx
│  └─_documents.tsx
├─public : 정적 파일 보관
├─store : redux store
├─styles : global styles
│ ├─theme.ts : css 변수
│ ├─global.ts : global css
└─┴─fonts.module.css : font

*/

 

📍참고한 사례

코드샌드박스

components/Button/ 아래에

- index.tsx

- elements.tsx

식으로 구성

 

✅ styled (태그드 리터럴)를 elements 에 모아 놓고 index.tsx 에서 호출해서 씀

- components, style 과도 비교할 때, element 라는 표현이 제일 정확한 듯

- 그러나, jsx 문법을 사용하지 않으므로 ts로 바꿔도 될 듯

 

📍참고

코드샌드박스 깃허브

https://github.com/codesandbox/codesandbox-client/tree/master/packages/common/src/components/Button

GitHub - codesandbox/codesandbox-client: An online IDE for rapid web development

 

코드샌드박스와 비슷한 구조의 깃허브

https://github.com/aitagame/aita_frontend/tree/develop/src/views/components

GitHub - aitagame/aita_frontend: AITA game frontend

 

styled-components 사용중인 서비스

https://github.com/styled-components/awesome-styled-components

GitHub - styled-components/awesome-styled-components: A curated list of awesome styled-components resources 💅

 

styled-components best practice

https://itchallenger.tistory.com/893

styled-components best practices(모범 사례)