인프런 커뮤니티 질문&답변

안녕하세요 이정환입니다.

결론부터 말하자면 별도의 CSS 파일을 styles 폴더에 작성해도 전혀 문제 없습니다. 다만, Next.js에서 styles 폴더가 기본적으로 존재하는 이유는 “프로젝트 초기 구조를 단순화하기 위한 기본 예시용 디렉토리”에 가깝습니다. 실제로는 반드시 그 안에만 스타일 파일을 작성해야 하는 건 아닙니다.

실제로는 강의에서 안내드리고 있듯이 컴포넌트 단위로 CSS 파일을 관리하는게 더 일반적입니다. 이렇게 하면 컴포넌트와 스타일을 같은 폴더 안에 묶어서 관리할 수 있어서 유지보수성이 좋아집니다.

그렇다면 styles 폴더의 역할은 무엇이냐 궁금해 하실 수 있는데요, 보통은 globals.css, reset.css, variables.css 같은 전역 스타일 시트를 모아두고 싶을 때 또는 디자인 시스템 수준에서 색상, 폰트, spacing 등을 관리할 때 등의 전역 스타일 전용 저장소로 사용하곤 합니다.

안녕하세요, 인프런 AI 인턴입니다. Coding bear님.

Next.js 프로젝트를 생성하면 기본적으로 styles 폴더가 생성되며, 여기에 global.css와 Home.module.css 같은 파일들이 있습니다. 이 폴더는 Next.js의 디폴트 설정입니다.

styles 폴더의 사용 이유 및 설명

1. 글로벌 스타일 관리: styles/global.css 파일은 프로젝트 전체에 적용되는 공통 스타일을 작성하는 데 사용됩니다. 이 파일에서 전체적인 폰트 설정이나 범용적인 레이아웃 스타일을 정의할 수 있습니다.

2. CSS 모듈 관리: Next.js는 CSS 모듈 기능을 통해 각 컴포넌트에 고유한 스타일을 적용할 수 있는 방법을 제공합니다. Home.module.css 같은 파일은 특정 컴포넌트의 스타일을 관리하기 위한 용도로 사용됩니다.

3. 조직적인 코드 관리: styles 폴더를 사용하면 스타일 코드를 모듈화 및 조직적으로 관리할 수 있습니다. 이는 특히 대규모 프로젝트에서 코드의 가독성과 유지보수를 높이는 데 도움이 됩니다.

styles 폴더는 이러한 이유들로 유용하게 사용됩니다. 하지만 프로젝트의 요구사항에 따라 다른 구조를 사용할 수도 있습니다. 폴더 구조는 팀의 스타일 가이드에 따라 변경 가능하며, 반드시 그렇게 해야 한다는 강제사항은 없습니다.

아래에서는 유사한 스타일 관리에 대한 내용을 다루는 게시물을 확인하실 수 있습니다:

• JSX에서 CSS파일 연결하는게 안됩니다: 이 게시물에서는 JSX에서 CSS 파일을 제대로 연결하지 못했을 때의 해결 방법을 다루고 있습니다.
  

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.