[프로젝트 기본 세팅] 백엔드&프론트 기본 환경 세팅

프로젝트 기본 세팅

1. 기본 환경 세팅

---

Portfolio-For-Developers

프로젝트 백엔드&프론트 기본 환경 세팅을 포스팅 한다.

front는 vuetify를 이용한 vue.js, api는 스프링 부트를 이용하여 만든다.

우선 로그인 구현을 먼저 하고 그 이후 포트폴리오를 만들어주는 기능을 구현, 그 뒤에 개발에 대한 정보를 올릴 수 있는 게시판을 만들려고 한다.

백엔드 초기 세팅

spring initializr를 이용하여 다음과 같이 프로젝트를 만들어준다.

JPA, Spring Security, Spring Web, Lombok, Devtools, MySql을 추가해 주었다.

build.gradle

    implementation 'io.springfox:springfox-swagger2:2.6.1'
    implementation 'io.springfox:springfox-swagger-ui:2.6.1'
    implementation 'io.jsonwebtoken:jjwt:0.9.1'
    compile group: 'javax.validation', name: 'validation-api'
    compile group: 'org.hibernate', name: 'hibernate-validator', version: '6.1.0.Final'
    compile group: 'org.springframework.boot', name: 'spring-boot-starter-mail', version: '1.2.0.RELEASE'

build.gradle에 추가로 Swagger, jjwt, validation-api, spring-boot-starter-mail도 다음과 같이 추가해 주었다.

application.yml

server:
  port: 5000
  servlet:
    context-path: /
    encoding:
      charset: UTF-8
      enabled: true
      force: true

spring:
  profiles:
    include: key
    active: local
  devtools:
    livereload:
      enabled: true
  jpa:
    hibernate:
      naming:
        physical-strategy: org.hibernate.boot.model.naming.PhysicalNamingStrategyStandardImpl
    show-sql: true

application.yml을 다음과 같이 만들고 DB에 대한 정보와 jwt key에 대한 정보는 application-key.yml, application-local.yml를 따로 만든 뒤 이그노어 하였다.

접속

5000번 포트로 접속 결과 다음과 같이 정상적으로 실행됨을 확인할 수 있다.

프론트엔드 초기 세팅

vue create front-end

명령어를 통해 front-end를 만들고 다음과 같이 설정하여 진행한다.

디폴트 설정에서 Vuex와 Router도 추가하였고, Prettier와 Lint on save를 적용했다.

cd front-end

vue add vuetify

다음과 같은 명령어로 프론트엔드 파일로 들어간 뒤 vuetify를 추가한다.

vuetify 추가는 디폴트로 진행하였다.

.eslintrc

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
  parserOptions: {
    parser: "babel-eslint"
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    "prettier/prettier":[
      "warn",
      {
        "semi": false,
        "trailingComma":"none",
      }
    ]
  }
};

.eslintrc를 다음과 같이 수정하였다.

semi, trailingComma에 대한 옵션을 수정한 것이다.

vue.config.js

module.exports = {
  transpileDependencies: ["vuetify"],
  devServer: {
    port: process.env.VUE_APP_PORT || 3000
  }
}

vue.config.js도 다음과 같이 수정하여 포트 번호를 변경했다.

접속

3000번 포트로 접속 결과 다음과 같이 정상적으로 실행됨을 확인할 수 있다.