EQL 리디자인 합동 세미나 5조
WE ARE ALL EQL!
‘EQL’은 EQUAL의 철자를 축약한 신조어로,
어떠한 편견이나 선입견 없이 자유롭게 표현할 수 있는 패션을 지지하는 온라인 편집숍입니다.
| 신수연 @SooY2 | 이시연 @SynthiaLee | 이재훈@ljh0608 | 최준민 @Jun-min2 |
|---|---|---|---|
| Category Page | Product Page | Order Page | Home Page |
| 상품 전체 조회 API GET | 상품 상세보기 API Get 상품 장바구니 추가 API Put |
주문 정보 조회 API Get | 컨텐츠 조회 API GET |
| 역할 | 종류 |
|---|---|
| Framework | |
| Styling | |
| Programming Language | |
| Formatting | |
| Package Manager | |
| Library | React-Slick |
|-- 📁 node_modules
|-- 📁 src
┃ ┣ 📂assets
┃ ┣ 📂images
┃ ┣ 📂svgs
┃ ┣ 📂components
┃ ┣ 📂Category
┃ ┣ 📂common
┃ ┣ 📂footer
┃ ┣ 📂header
┃ ┣ 📂home
┃ ┣ 📂order
┃ ┣ 📂topButton
┃ ┣ 📂constants
┃ ┣ 📂pages
┃ ┣ 📂Category
┃ ┣ 📂Home
┃ ┣ 📂Order
┃ ┣ 📂Product
┃ ┣ 📂styles
┃ ┣ globalStyle.ts
┃ ┣ style.d.ts
┃ ┣ theme.ts
┃ ┣ 📂types
┃ ┣ image.d.ts
┃ ┣ product.ts
┃ ┣ 📂utils
┃ ┣ 📂api
┃ ┃ ┗ axios.ts
┃ ┣ App.tsx
┃ ┣ main.tsx
┃ ┣ Router.tsx
┃ ┣ svg.d.ts
└── 📜각종 세팅 파일
feat/#이슈번호/이슈이름
rafce/rsc- 컴포넌트만
PascalCase사용 : PascalCase- 그 외에는
camelCase - 유틸함수나 custom hooks 는 export function 을 사용한다 (rfc)
- 그 외에는
- Interface 선언시
- 컴포넌트의 인자 :
~PropsType(s)- 이때의 Interface는 type 폴더로 분리 금지
- 함수의 인자 :
~Type(s)
- 컴포넌트의 인자 :
- var 금지
const→let순서로 위부터 선언.- 변수를 조합하여 문자열 생성시 “+ “ 금지. → 리터럴 사용(백틱 ```)
- 상수는 영문 대문자 스네이크 :
API_KEY - 변수명 : 의미 + 간결함. “알잘딱”
- 예시 : 배열에 Arr 보다는 변수s
구조분해할당을 적극 이용하자- 변수 등을 조합해서 문자열을 생성할 때는
무조건 리터럴을 이용한다- X) var1 + “ “ + var2
- O)
${var1} ${var2}