<aside> 💡 [프론트] 프로젝트 초기 세팅 가이드라인 └─ [Frontend] 프로젝트 초기 세팅 체크리스트 └─ [Frontend] 프로젝트 초기 세팅 폴더 관리

</aside>

폴더 구조

public
└── images
└── data
		└── mockData.json

**src**
└── components
│    └── Nav
│		 │   ├── Nav.js
│		 │   └── Nav.scss
│    └── // OtherComponent
└── pages
│		 └── Login
│		 │   ├── Login.js
│		 │   └── Login.scss
│		 └── Main
│		 │   ├── Main.js
│		 │   └── Main.scss
│		 └── Login
│		 │   ├── Login.js
│		 │   └── Login.scss
│		 └── Main
│        ├── Main.js
│	       └── Main.scss
└── styles
│		├── common.scss
│		├── mediaquery.scss
│		├── mixin.scss
│		├── reset.scss
│		└── variables.scss
├── Router.js
└── config.js

// + 추가 예정

라이브러리 사용 현황

// package.json
"dependencies": {
	"react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-router-dom": "^6.6.1",
  "react-scripts": "5.0.1",
  "sass": "^1.57.1",
},

"DevDependencies": {
	"eslint-config-prettier": "^8.5.0",
  "eslint-plugin-prettier": "^4.2.1",
  "prettier": "^2.8.1",
  "stylelint": "^14.16.1",
  "stylelint-config-prettier-scss": "^0.0.1",
  "stylelint-config-property-sort-order-smacss": "^9.0.0",
  "stylelint-config-standard-scss": "^6.1.0",
  "stylelint-scss": "^4.3.0"
}

컨벤션

스타일 컨벤션

[CSS property 순서]

- **Layout Properties** (position, float, clear, display)
- **Box Model Properties** (width, height, margin, padding)
- **Visual Properties** (color, background, border, box-shadow)
- **Typography Properties** (font-size, font-family, text-align, text-transform)
- **Misc Properties** (cursor, overflow, z-index)

컴포넌트 구성