Vue.js + Spring Boot + MySQL+JPA 게시판 만들기(4) - Intelij 설정

이번 포스팅에서는 프로젝트시 사용할 Intelij 설정을 적용해보겠습니다.

 

1. 플러그인 설치

Intelij 메뉴에서 File > Setting > Plugins로 들어가면 아래와 같은 화면이 나오게됩니다. 

 

상단에 Marketplace에서 플러그인을 검색하고 설치할 수 있습니다.

Vue.js, Prettier, Lombok 3개를 검색하고 설치해줍니다.

이상으로 3개의 플러그인을 설치하였습니다.

 

2. webpack.config 파일 생성 & 적용

다음으로는 webpack.config.js 파일을 만들고 적용시켜보도록 하겠습니다.

 

프로젝트 root > front 위치에 webpack.config.js 파일을 생성합니다.

생성 후 아래 코드를 복사 & 붙여넣기 합니다.

const path = require('path');

module.exports = {
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src/')
        }
    }
};

해당 코드는 "상위경로/src/" 의 경로를 @로 대체하는 코드입니다.

 

C:\a\b\c\root\front\src/ 까지의 경로를 @로 대체할 수 있습니다.

 

해당 기능을 쓰게 되면 컴포넌트 import시에 @/컴포넌트 이름으로 편하게 사용할 수 있습니다.

 

자세한 내용은 이후 포스팅에서 컴포넌트 import시에 설명합니다.

 

그러면 Intelij 에서 webpack 파일을 적용시켜보겠습니다.  File > Settings로 들어가 webpack을 검색합니다.

그러면 다음과 같이 파일을 지정할 수 있습니다. 방금 생성한 webpack.config.js 파일을 지정해줍니다.

 

3. Eslint 저장시 자동 포맷 적용

eslint를 검색하여 ctrl + s (저장) 을 누르면 자동으로 포맷을 맞춰주도록 Eslint를 셋팅해줍니다.

 

 

4. Backend 저장시 프로젝트 재빌드

Build, Execution, Deployment > Compiler를 누르고 Build project automatically를 클릭해줍니다.

 

해당기능을 체크하면 spring boot 에서 코드 변경시 자동으로 빌드를 다시하게됩니다.

 

 

이로써 Intelij 프로젝트 설정이 완료되었습니다.

 

다음 포스팅에는 백엔드 API의 구조를 설명하고 생성해보겠습니다.

 

해당 코드는 아래 링크에서 확인할 수 있습니다.

https://github.com/sungjaeyoon/board

sungjaeyoon/board