전자정부프레임워크에서 REACT.JS, VUE.JS 사용하기 -springboot편-

springboot환경을 만들어보자

https://start.spring.io/

Group과 Artifact명을 정하자 Dependencies에는 web 과 rest Repositories를 추가하여 Generate Project를 클릭하여 다운로드 받는다.

 

적당한 폴더에 풀어주고 터미널을 열어 준비하자

drwxr-xr-x@ 8 reikop  staff   256  3 28 14:46 .
drwxr-xr-x  4 reikop  staff   128  3 28 14:47 ..
-rw-r--r--@ 1 reikop  staff   261  3 28 05:46 .gitignore
drwxr-xr-x@ 3 reikop  staff    96  3 28 14:46 .mvn
-rwxr-xr-x@ 1 reikop  staff  6468  3 28 05:46 mvnw
-rw-r--r--@ 1 reikop  staff  4994  3 28 05:46 mvnw.cmd
-rw-r--r--@ 1 reikop  staff  1551  3 28 05:46 pom.xml
drwxr-xr-x@ 4 reikop  staff   128  3 28 14:46 src

위와같은 내용이 나오면 일단 성공

이제 pom.xml 에 front-end 지원 plugin을 추가하자

https://github.com/eirslett/frontend-maven-plugin

<plugin>
  <groupId>com.github.eirslett</groupId>
  <artifactId>frontend-maven-plugin</artifactId>
  <version>${frontend-maven-plugin.version}</version>
    <configuration>
      <workingDirectory>frontend</workingDirectory>
    </configuration>
  <executions>
    <execution>
        <id>install node and npm</id>
        <goals>
            <goal>install-node-and-npm</goal>
        </goals>
        <configuration>
            <nodeVersion>${frontend-maven-plugin.nodeVersion}</nodeVersion>
            <npmVersion>${frontend-maven-plugin.npmVersion}</npmVersion>
        </configuration>
    </execution>
    <execution>
        <id>npm install</id>
        <goals>
            <goal>npm</goal>
        </goals>
        <configuration>
            <arguments>install</arguments>
        </configuration>
    </execution>
    <execution>
      <id>npm build</id>
      <goals>
        <goal>npm</goal>
      </goals>
      <configuration>
        <arguments>run build</arguments>
      </configuration>
    </execution>
  </executions>
</plugin>

<workingDirectory> 부분이 package.json 파일이 있는 폴더를 지정하게 된다. 적어 놓은 경로를 추가해보자

$mkdir frontend
$cd frontend

이제 vue.js 개발 환경을 설정해보자

그리고 maven repository가 필요하다면 이 링크를 클릭해보자

댓글 남기기