기존 backend(express) 설계에 vue-cli(혹은 nuxt)를 붙이는 경우에는 디렉토리를 어떤식으로 설계하는지 궁금합니다.
382
작성한 질문수 5
안녕하세요? 퀄리티 높은 강의 덕분에 많은 도움을 받고 있습니다. 정말 감사합니다 강사님!
제가 궁금한 점은, 저는 기존에 백엔드만 학습했었습니다. 그래서 제가 작성했던 코드들도 백엔드만 고려하여 디렉토리를 설계했었습니다. 예시로 제가 이전에 진행했던 API 로직 관련 프로젝트의 디렉토리 구조는 다음과 같습니다.
.
├── config
│ ├── config.ts
├── controllers
│ ├── post.ctrl.ts
│ └── user.ctrl.ts
├── models
│ ├── index.ts
│ ├── sequelize.ts
│ ├── hashtag.ts
│ ├── like.ts
│ ├── post.ts
│ ├── user.ts
│ └── refreshToken.ts
├── node_modules
├── routes
│ ├── index.ts
│ ├── post.router.ts
│ └── user.router.ts
├── types
│ └── express.d.ts
├── utils
│ ├── generateToken.ts
│ └── authenticateToken.ts
├── index.ts
├── tsconfig.json
├── package-lock.json
└── package.json이 프로젝트는 SNS와 관련된 api 로직들을 작성하는 것이었습니다. 강사님 강의를 보면서 이 프로젝트에 vue(nuxt)를 이용하여 프론트엔드단의 코드도 작성하려고 하는데, 이럴 경우 디렉토리를 어떻게 설계하면 되는지 궁금해서 질문드렸습니다.
추가로, vue나 nuxt + express 같은 경우 먼저 vue-cli나 nuxt init을 통해 생성되는 짜여진 디렉토리 위에서 backend를 나중에 추가하는 방식이 일반적인 것 같은데, 이런 식으로 구성되는 이유도 궁금합니다.
답변 1
0
안녕하세요, 좋은 질문 주셨네요 :) 먼저 질문에 대한 결론을 말씀 드리면 API 서버 코드와 FE 코드를 분리하시는 것을 추천드립니다. 물론 현재 구조에서도 Vue 스크립트를 추가하는 형태로 해서 점진적으로 작성하실 수 있겠지만 궁극적으로는 별도의 서버 인스턴스를 가져가시는 것이 scale out 하기 좋습니다.
하나의 서버 인스턴스에서 REST API와 FE 관련 처리를 모두 하시게 된다면 트래픽이 몰렸을 때 처리하시기 더 쉽지 않으실 것 같아요. 그럼에도 불구하고 현재 구조에서 넉스트 폴더를 추가한다면 루트 레벨에 /nuxt 를 하나 추가해서 해당 폴더 하위에 nuxt의 권장 폴더 구조로 갈 것 같습니다 :)
개발자 툴에서 Vue가 표시되지 않는 현상.
0
126
2
chrome 확장 devtools 버전 문제
0
108
1
Vue.js not detected가 자꾸 뜹니다
0
109
2
마지막 강의가 안되요
0
73
1
data, computed, watch > Reactivity
0
58
1
f12누르고 개발자도구에 vue 탭이 안생겨요
0
111
1
vue composition api
0
78
1
강의 자료 다운이 될까요?
0
142
1
개발자 도구에서 뷰탭이 안보여요....
0
625
3
프롭스 데이터 질문입니다.
0
119
1
component.html:11 Uncaught ReferenceError: Vue is not defined at component.html:11:20 (anonymous) @ component.html:11
0
149
1
화면이 안떠요,, 이전 이후 강의는 뜨는데..
0
259
6
크롬 확장 프로그램 vue devtools 설치했는데
0
566
2
코드를 수정하고 브라우저의 Vue로 넘어가면 다운이 됩니다.
0
252
1
버튼을 클릭해도 event가 발생하지 않습니다.
0
320
1
vue3 css 경로 표시 문의
1
242
2
개발자도구 vue탭
0
362
1
화면 코드 보기
1
239
2
App.vue 내용 변경했는데 창이 연결할수없대요ㅜㅜ
1
395
2
html/css/js로 작성된 코드를 vue.js로 일부 전환하고자 이 강의를 듣기 시작했습니다.
1
906
2
{{ num }} 이 <app-content> 아래에 들어가 있을때에는 노출이 안됩니다...
1
295
2
뷰 개발자도구 이벤트 타임라인 어느 부분에서 확인가능한건가요
1
404
2
다음 단계 강의는...?
1
391
2
버튼을 눌러도 data의 값이 변경되지 않습니다
1
287
2





