프론트엔드 css 관련 규칙

[prayinforrain]

프론트엔드 구조 개선 작업 이라는 이름에서 FE 작업 관련 컨벤션을 정리한 글로 활용하기 위해 이슈명을 변경하였습니다.

이 이슈가 다루는 문제

환경 변수 문제

현재 FE 앱은 BE와 연결하기 위한 URL을 담은 환경 변수를 두 개 사용하고 있는데다, 해당 환경변수 이름에서 개발 환경에서의 환경 변수임을 명시하고 있습니다. 환경 변수의 잘못된 사용이라고 생각되어 개발/배포용 환경변수를 분리 활용할 수 있도록 수정할 예정입니다.
그 외에 SSR에서의 fetch가 absolute URL을 요구하는 문제를 보완하기 위해 util.ts에서 상대주소가 입력으로 들어올 경우 절대주소로 변환하여 요청을 보내도록 하는 로직을 추가할 예정입니다. 관련 PR 코멘트

style 및 component 관리 문제

style 적용의 현행 방식이 가독성을 지나치게 떨어뜨린다는 생각이 들어 회의 끝에 아래와 같은 규칙으로 component 디렉토리 구조를 변경하고자 합니다.

• 하나의 디렉토리에는 하나의 컴포넌트만을 갖는다.(index.tsx)
• 해당 컴포넌트에서 사용하는 스타일은 index.style.ts 와 같은 꼴로 같은 디렉토리에 포함한다.
• 모든 디렉토리명은 소문자로만 작성한다.
  • 현재 그렇게 되어 있어서 그렇게 정했는데 옳은 선택인지 잘 모르겠네요..
  • (11/20 22:54 추가) /client/components/의 하위 디렉토리들은 모두 PascalCase로 작성하기로 하였습니다.
• 버튼과 input 등의 범용성 있는 컴포넌트 스타일은 styles/mixin.ts를 확인해 주세요!
  • 추후 수정에 용이하게 하기 위함입니다.
  • mixin을 불러온 후 width나 height같은 추가 속성을 지정하면 커스텀이 가능합니다.
• CSS에 id selector를 사용하지 마세요.

❗ Frame 안을 가득 채우게 레이아웃을 구성해주세요!
(11/21 12:48 추가)
현재 App의 최대 width를 1280px로 정의하고, 그 프레임 안에서 레이아웃을 구성하는 식으로 작업이 이루어지고 있습니다.
그 프레임의 범위를 회색으로 칠해서 경계를 명확하게 해 둔 상태지만, 이는 production 버전에서 삭제할 예정이고, 대부분의 PC 브라우저 환경에서 1280px로 프레임을 제한하면 이미 좌우에 여백이 있는 상태이기 때문에, 여기서 더 width를 줄일 이유가 없습니다. 만약 줄일 필요가 있다고 하더라도 꼭 논의해주세요!
따라서 Frame 안의 페이지 구성요소의 width를 재정의하지 않도록 해주세요!

그리고.. 선민님이 말씀해 주셔서 global css + 이번에 추가할 reset css를 적용하는 위치를 _document.tsx에서 _app.tsx로 옮겼습니다.

이 작업은 PR #56 이 merge된 후의 dev 브랜치로부터 새 브랜치를 생성하여 작업하겠습니다.

Task List

환경 변수 문제

• devlopment, product 환경 변수 분리
• 기존 환경 변수 사용 부분 코드 수정
• util.ts 수정

style 및 component 관리 문제

• 디렉토리 구조 수정
• compoent style 분리

[prayinforrain]

환경 변수 관련

.env.template 파일이 업로드되었습니다. 의도적으로 gitignore에서 제외하고 업로드하였으며, 앞으로 앱이 필요로 하는 환경 변수와 그 설명을 포함하도록 관리해주세요!
그리고 이 템플릿에 맞추어 .env.development(dev 버전), .env.production(배포 버전)을 작성해서 구동하면 됩니다. next dev 명령어로 실행하면 자동으로 development 환경 변수를 참조하는 것으로 보입니다.(production을 참조하지 않음을 확인하였음)
자세한 설명은 이 블로그에 잘 되어 있습니다.

[prayinforrain]

디렉토리 구조 관련

슬랙에 대소문자 구분을 어쩔까요 물어봤을 때가 사실 이미 모든 작업을 마친 상태였습니다. 그래서 이미 소문자 이름의 디렉토리로 분리된 파일들을 다시 옮기는 작업을 진행했습니다.
3464c71 17afbfe 두 커밋인데, 신기한 점은 파일 이름 변경과 파일 내용 수정이 별개의 커밋으로 들어가야 하나 봅니다. 자기가 알아서 분리해서 커밋을 넣더라구요

레퍼런스 링크

[leesunmin1231]

와 진짜 고생하셨습니다!!! 👍🏻