Component Architecture

Restropect

• 원인 : 폴더 구조를 좀 더 clean 하게 정리할수 없을까? 🧐

• status: callback 과 axios 폴더가 나뉘어짐, page와 components 의 폴더 이름이 무색할 정도로 폴더가 섞인 상황.

• 목표 :

  • 핵심 구성 요소 정하기
  • 큰 섹션 나누기 (class -> obj)
  • 파일이름 : 명사형 / 동사형 + 명사형
  • 바깥 폴더명 [동사형OK] => 내부 폴더 [바깥 폴더명] + 명사형
  • 세부 섹션 기능별 - categorize

✍ 1st Categorize -skimming

1. axios : 브라우저 확장성을 고려해 (DB연동, Auth처리..)서버와 통신하는 기능을 관리하는 파일
2. callback : dispatch 를 이용해 oauth를 callback 해주는 기능을 관리하는 파일
3. components : View에서 필요한 요소들및 파일들 관리하는 파일. (modal 파일 포함)
4. css : 스타일을 담당하는 파일로 페이지와 1:1 스타일들을 관리하는 파일.
5. functions : 메인 기능을 하는 타이머, 별점의 기능을 담은 파일
6. mediaQuery : react-responsive 라이브러리를 이용한 모바일 & 웹 스타일 파일
7. Pages : 와 components을 불러와서 라우팅된 페이지를 구성하는 파일
8. reducer : reduxjs/toolkit을 이용한 reduce 설정 파일
9. slideSetting : Slider 와 slick-carousel.css을 쓰기위한 설정 파일
10. store : redux와 관련된 파일을 관리하는 폴더이다.
11. test : reducer, sweetalert 등 낯선 라이브러리를 실험해 보는 파일

// to be continued

Q. 메인(킥) 을 왜이렇게 설정했니?
A. 아직 몰라..

Q 폴더 어떻게 쪼갠거임?
A 글쎄요..component 기능별로 최대한 쪼개려 한 거같은데..
또 보면 ..

//redux용따로 ?

//나머지는 아래와 같다..

✍ 알아볼것

• [폴더 관리] Container - Presenter
• 런타임 /라이브러리/ 프레임워크/ 차이점

reference

directory1
store
dir2