전반적인 프로젝트 구조

다양하게 사용할 수 있겠지만, 기본적인 구조만 생각해 보면 MVC 패턴에 대입을 해볼 수 있을듯 하다.  구조를 정하지 않거나 모르면, 구성요소를 다 알고 있어도 어디에 어떤 항목을 사용해야 할지 몰라, 프로젝트 시작 단계 부터 난감 할 수 있다.

 

• View 대응
  • 각 화면 혹은 각 화면에 속한 모듈별로 소스코드를 나눠 구성한다. 
    • 두 군데 이상에서 사용되는 UI 요소는 모듈로 나누어 재사용 하는게 좋다.
  • View에 해당하므로 css 파일과 연계가 필요하다. 
    • css 도 View 소스파일과 1:1 매칭이 되면 어떨까?

 

 

• Model 대응
  • 커스텀 hook 을 생성하여 마치 클래스를 정의하듯 각 항목별로 클래스 정의
  • 간단한 처리 함수들을 포함 할 수 있음.

 

• Control 대응
  • 컨트롤 클래스를 두고, 비즈니스 로직에 따라, 혹은 필요에 따라 위의 View 와 Model 항목들을 적절히 섞어서 구현

 

• 서비스 모듈 (서버 통신 등)
  • callback 훅을 이용하여 함수 작성 (변수에 해당 함수를 담게 됨)
  • callback 훅이 담긴 변수 자체를 리턴
  • 서비스 모듈을 호출하여 이용하는 함수에서 해당 서비스를 import
  • 내부 변수에 서비스 모듈 리턴값 (callback 훅)을 받은 후 함수 호출
  • 또는 서비스 모듈을 singleton 이나 static 클래스를 만들어 사용 할 수도 있다.

 

• 추가
  • 추가로 여러 모듈에서 공통으로 사용되는 항목 (예 : 로그인 정보) 은 context 훅을 이용