2017-05-03 2 views
0

현재 React/TypeScript 프로젝트에서 작업 중이며 파일을 몇 개의 폴더로 분리했습니다. 내 프로젝트는 다양한 처리 방법을 사용하여 대화 형 스도쿠를 해결하고, 그래서 나는이 구조에 내 응용 프로그램을 분할했다 : 신청서를 어떻게 작성해야합니까?

sudokusolver/ 
    css/ 
    dist/ 
    fonts/ 
    img/ 
    js/ -> external libraries, ie. jquery, etc. 
    node_modules/ 
    server/ -> fetches puzzle data from the server 
    ts/ 
     actions/ -> user actions stored for history navigation 
     components/ 
     containers/ 
     enumerations/ 
     models/ -> stores multiple actions for history navigation 
     solver/ -> sudoku solving methods 
     index.tsx 
    index.html 
    package.json 
    ... 

는 지금, 내 components/containers/ 폴더가 상당히 큰지고있다. 나는이 파일이 단일 페이지 응용 프로그램이라는 것을 알고 내 파일 구조를 재구성하기 위해 어떤 계획을 따라야하는지 궁금합니다. 어떤 도움을 주시면 감사하겠습니다.

+0

'jquery'가'node_modules'에없는 이유는 무엇입니까? 'css'가 컴포넌트들 옆에없는 이유는 무엇입니까? 기본적으로 자산 인'font '와'img'가 공통 디렉토리에없는 이유는 무엇입니까? 나는 또한'ui' 폴더를 만드는 것으로 시작할 것입니다. 'ts' 폴더를 호출하지 마십시오. 왜 단순히'src' 또는'source'라고 부르지 않습니까? – Sulthan

+0

내 js 폴더 컨테이너 부트 스트랩, jquery, 등.하지만 npm은 어쨌든 그것을 처리 할 수있을 것 같아요. 좋은 지적! – iHowell

+0

구성 요소 옆에 CSS를 사용하면 어떤 도움이 될까요? 전체 응용 프로그램은 클라이언트 쪽이며'server /'폴더에 데이터 액세스를위한 하나의 PHP 스크립트가 있습니다. – iHowell

답변

1

귀하가 올린 글에서 귀하의 componentcontainer 폴더가 평평한 것으로 읽습니다. 좋은 생각이라고 생각하지 않습니다. 말하자면, 상당히 긴 폴더로 이어질 것입니다.

내 개인 프로젝트 중 하나에는 다음과 같은 레이아웃이 있습니다. 구성 요소 아래에는 재사용 가능한 모든 구성 요소와 구성 요소가 있습니다. 그것들은 다소 임의적으로 중첩되어 있습니다 - 난 혼란을 막기 위해 모달, 레이아웃, 폼 등의 아래에 "게임"폴더가 있습니다. "컨테이너"(내가 그들을 이해), "경로"아래에있는 자신의 폴더 구조가로드 전년도를하고있는 URL의 경로를 따라 (/profile/gamesroutes/profile/games/...에서 용기/래퍼를 사용)

enter image description here

는 것 내 의견으로는, 프로젝트의 빌드와 관련이없는 모든 것들 (예 : webpack 정의, npm의 package.json, gulpfiles, (babel/eslint/tslint) rc 파일 등)을 하위 폴더 -또는 그와 비슷한 것으로 이동시키는 것도 도움이됩니다. .

또한 서버와 클라이언트 응용 프로그램을 분할하여 동일한 폴더에 둘 필요가 없습니다. 나는 보통

과 같은 것을합니다. 이것은 혼란을 줄이는 데 도움이됩니다.

+0

좋습니다, 감사합니다! 또한 명확히하기 위해, 이것은 컨테이너/컴포넌트 레이아웃을 따르는 것일 뿐이며, 라우트와 관련이 없으므로 컨테이너가 컴포넌트의 로직을 보유합니다. 내 생각에, 당신이 말하는대로, 나는 그것들을 결합한 다음, 그 계층 구조 (페이지의)에 따라 모든 것을 새로운 폴더로 분해해야합니다. 그것도 조금 도움이 될 것입니다. – iHowell

+0

예 - 이것은 제 개인적인 스타일이지만 잘 작동한다고 생각합니다. 폴더를 중첩하는 것을 두려워하지 마십시오. 폴더를 쉽게 축소/숨길 수 있습니다. 그리고 말했듯이, 내 "경로"폴더는 "컨테이너"폴더와 같다고 생각합니다. 경로의 모든 항목은 고급 구성 요소 (예 : "그림 그리드 배치")를 보관/배치합니다. –

+0

공통 슈퍼 폴더에'actions'와'reducers'를 넣는 것을 추천합니다. '국가'. 사실, 어떤 사람들은'navigation.reduced.ts'와'navigation.actions.ts'와 같은 이름의 파일들로 작업과 감속기를 같은 폴더에 보관하는 것을 선호합니다. 그 이유는 이러한 파일은 일반적으로 매우 밀접하게 결합되어 있으므로 하나를 편집 할 때 일반적으로 두 번째 파일을 편집하기 때문입니다. – Sulthan

관련 문제