• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

기존 backend(express) 설계에 vue-cli(혹은 nuxt)를 붙이는 경우에는 디렉토리를 어떤식으로 설계하는지 궁금합니다.

22.08.29 11:36 작성 조회수 244

1

안녕하세요? 퀄리티 높은 강의 덕분에 많은 도움을 받고 있습니다. 정말 감사합니다 강사님!

제가 궁금한 점은, 저는 기존에 백엔드만 학습했었습니다. 그래서 제가 작성했던 코드들도 백엔드만 고려하여 디렉토리를 설계했었습니다. 예시로 제가 이전에 진행했던 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의 권장 폴더 구조로 갈 것 같습니다 :)