실시간 식당 예약 프로그램 - 프로젝트 구조 만들기

본격 프로젝트 시작

백엔드는 intelliJ 에서, 프론트엔드는 vsCode에서 작업하기로 하였다.

별다른 이유는 없고 배울 때 그렇게 배워서.

 

이번 프로젝트에서는 제시된 개발 환경이 있었다.

 

서버

• 스프링부트
• JPA(하이버네이트)

 

클라이언트

• vue.js
• ajax를 사용하여 통신

 

데이터베이스

• MySQL

 

프론트 프로젝트 구조 만들기

GPT한테 물어보거나 구글을 레퍼런스 해보면, 백엔드 개발 후 프론트엔드를 작업하라고 하는게 일반적인것 같다.

하지만 교육 과정 중에 강사님께서 화면 설계 후 화면에 맞춰서 서버 개발을 하는게 더 쉬울 것이라며 그렇게 배웠고, 실제로도 그게 더 쉽게 느껴져왔기 때문에 우리팀은 클라이언트부터 설계하기로 하였다.

 

지난 2차 프로젝트 때 별다른 템플릿을 사용하지 않고 직접 UI를 만들었었는데, 나름 깔끔했고 보람은 있었다만 아무래도 템플릿을 사용한 프로젝트에 비해서는 조금 없어보이긴 했다.

그리고 이번 프로젝트에서는 vue를 통해서 프론트 개발을 할 것을 요구받았는데 vue는 또 새로워서 백엔드 개발자 과정 수강생인 우리로써는 개발하기 까다로웠다.

하여 템플릿을 사용하기로 하였다.

 

우리가 선택한 vue 템플릿에서는 nuxt.js 라는 vue.js의 프레임워크(프레임워크의 프레임워크!)를 사용하고 있었다.

nuxt라는건 태어나서 처음들어보았고, 살짝 맛봤던 vue의 패키지 구조와도 약간 다른점이 있어서 구글링과 GPT 레퍼런스를 통해서 여차저차 만들어보았다.

 

• .nuxt
  nuxt의 여러 설정들을 담은 디렉토리인 것 같다. 라우터 설정을 해당 디렉토리 안에서 자동으로 처리해주어서 편하게 작업하였다. 다만 자동으로 라우팅을 해주다보니 임의로 수정해야하는 경로에서조차 자꾸 초기화를 해버려서 nuxt.config.js에서 따로 설정을 추가해주어야 했다.
• api
  api모음 디렉토리
• assets
  정적 자원들을 저장하는곳. 이미지, css파일, js 파일 등을 해당 디렉토리에 구성한다.
• components
  컴포넌트가 위치하는 디렉토리. 일반적인 프론트 작업을 해당 디렉토리에서 컴포넌트를 만들어서 작업하면 된다
• layouts
  레이아웃을 정의하는 vue.js 파일들이 위치하는데, 템플릿을 사용했기 때문에 거의 만질 일이 없었다. 있는거 쓰는게 제일 예뻤다.
• pages
  라우팅과 뷰 렌더링을 위한 vue들을 넣으면 된다. 자동으로 라우팅된다.
• nuxt.config.js
  nuxt.js의 설정파일. 라우팅설정, 빌드옵션, 모듈설정, 플러그인 설정 등을 구성할 수 있다.
• package-lock.json
  의존성 관리
• package.json
  의존성 관리
• yarn.lock
  의존성 관리

요정도로 프론트 파트의 프로젝트 구성이 되었다.

 

 

서버 구조 만들기

• config
  -AppConfig
  -MailConfig
  -SecurityConfig
  컨피그 설정 파일들이 들어있다. 내 작업 파트는 아니었지만 mail도 쓰는것 같고, 스프링 시큐리티도 적용할 계획이기 때문에 해당 파일들을 만들어두었다.
• controller
  클라이언트에서 요청을 받고 보낼 컨트롤러
• domain
  -restaurant
  -reservation
  -review
  등등 데이터베이스의 객체들을 담은 디렉토리. entity느낌
• dto
  -dto 객체들을 담은 디렉토리. service 계층에서 다루는 객체들이다.
• repository
  -레포지토리 계층. JpaRepository 덕분에 따로 쿼리를 적지 않아도 자동으로 findAll 이런것들은 만들어준다.
• service
  -객체에 대해 직접적인 비지니스 로직들을 적용하고, dto 객체로 변환해서 프론트단으로 보내는, 실제로 무언가 작업이 이루어지는 공간
• exception
• test

서버의 작업 공간은 요정도 디렉토리로 구조를 나누어놓았다.

 

그리고 이제부터 본격 개발 시작인가..?