TIL - 19.12.26

노요셉·2019년 12월 26일

Vue.js로 프로젝트를 하게 되었습니다.
react의 create-react-app 같은 것이 vue-cli 라고 생각하여, vue-cli로 프로젝트를 생성하려고합니다.

vue-cli 설치

Node.js가 설치 되어있는 가정하에 설치합니다. 자세한 사항은 아래 공식 홈페이지에 나와있습니다.

npm install -g @vue/cli
# OR
yarn global add @vue/cli

https://cli.vuejs.org/guide/installation.html

vue-cli/init 설치

npm i -g @vue/cli-init
# OR
yarn global add @vue/cli-init

foodpang@foodpangui-MacBookPro  ~/Documents/study/foodpang  yarn global add @vue/cli-init

yarn global v1.19.2
[1/4] 🔍  Resolving packages...
warning @vue/cli-init > vue-cli@2.9.6: This package has been deprecated in favour of @vue/cli
warning @vue/cli-init > vue-cli > coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
warning @vue/cli-init > vue-cli > metalsmith > gray-matter > coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
warning Error running install script for optional dependency: "/Users/foodpang/.config/yarn/global/node_modules/fsevents: Command failed.
Exit code: 1
Command: node-gyp rebuild
Arguments:
Directory: /Users/foodpang/.config/yarn/global/node_modules/fsevents
Output:
gyp info it worked if it ends with ok
gyp info using node-gyp@5.0.5
gyp info using node@13.3.0 | darwin | x64
gyp info find Python using Python version 2.7.16 found at \"/System/Library/Frameworks/Python.framework/Versions/2.7/Resources/Python.app/Contents/MacOS/Python\"
gyp info spawn /System/Library/Frameworks/Python.framework/Versions/2.7/Resources/Python.app/Contents/MacOS/Python
gyp info spawn args [
gyp info spawn args   '/Users/foodpang/.nvm/versions/node/v13.3.0/lib/node_modules/npm/node_modules/node-gyp/gyp/gyp_main.py',
gyp info spawn args   'binding.gyp',
gyp info spawn args   '-f',
gyp info spawn args   'make',
gyp info spawn args   '-I',
gyp info spawn args   '/Users/foodpang/.config/yarn/global/node_modules/fsevents/build/config.gypi',
gyp info spawn args   '-I',
gyp info spawn args   '/Users/foodpang/.nvm/versions/node/v13.3.0/lib/node_modules/npm/node_modules/node-gyp/addon.gypi',
gyp info spawn args   '-I',
gyp info spawn args   '/Users/foodpang/Library/Caches/node-gyp/13.3.0/include/node/common.gypi',
gyp info spawn args   '-Dlibrary=shared_library',
gyp info spawn args   '-Dvisibility=default',
gyp info spawn args   '-Dnode_root_dir=/Users/foodpang/Library/Caches/node-gyp/13.3.0',
gyp info spawn args   '-Dnode_gyp_dir=/Users/foodpang/.nvm/versions/node/v13.3.0/lib/node_modules/npm/node_modules/node-gyp',
gyp info spawn args   '-Dnode_lib_file=/Users/foodpang/Library/Caches/node-gyp/13.3.0/<(target_arch)/node.lib',
gyp info spawn args   '-Dmodule_root_dir=/Users/foodpang/.config/yarn/global/node_modules/fsevents',
gyp info spawn args   '-Dnode_engine=v8',
gyp info spawn args   '--depth=.',
gyp info spawn args   '--no-parallel',
gyp info spawn args   '--generator-output',
gyp info spawn args   'build',
gyp info spawn args   '-Goutput_dir=.'
gyp info spawn args ]
No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'.

No receipt for 'com.apple.pkg.DeveloperToolsCLILeo' found at '/'.

No receipt for 'com.apple.pkg.DeveloperToolsCLI' found at '/'.

gyp: No Xcode or CLT version detected!
gyp ERR! configure error
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onCpExit (/Users/foodpang/.nvm/versions/node/v13.3.0/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:351:16)
gyp ERR! stack     at ChildProcess.emit (events.js:219:5)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:274:12)
gyp ERR! System Darwin 19.2.0
gyp ERR! command \"/Users/foodpang/.nvm/versions/node/v13.3.0/bin/node\" \"/Users/foodpang/.nvm/versions/node/v13.3.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js\" \"rebuild\"
gyp ERR! cwd /Users/foodpang/.config/yarn/global/node_modules/fsevents
gyp ERR! node -v v13.3.0
gyp ERR! node-gyp -v v5.0.5
gyp ERR! not ok"
info This module is OPTIONAL, you can safely ignore this error
warning "@vue/cli-init@4.1.1" has no binaries

문제발생

gyp: No Xcode or CLT version detected!
gyp ERR! configure error

해결책

sudo rm -rf /Library/Developer/CommandLineTools
xcode-select --install

https://stackoverflow.com/questions/34617452/how-to-update-xcode-from-command-line

레퍼런스

레퍼런스 :Vue CLI 3 사용법 - DaleSeo
레퍼런스 : [Vue.JS] Vue-CLI 3 시작하기 - Dev. DY

Spring Boot + Vue.js 연동하기

vue/cli, vue/cli-init이 설치가 되었다면 진행합니다.

spring project 루트 디렉토리에서
vue init을 통해 프로젝트 생성합니다.

vue init wepback frontend

vue build - standalone, unit test, e2e test with nightwatch, 빼고는 다 yes 해서 질문에 응답하면 프로젝트가 생성됩니다.

빌드 되는 설정만 바꿔줍니다.

frontend/config/index.js

vue init webpack 레퍼런스 : Vue.js - 프로젝트 구성 - 최고영회

레퍼런스 : Webpack 템플릿으로 vue.js 개발환경 구축하기 - kkd927

레퍼런스 :Spring Boot + Vue.js 연동하기 - kkd927

spring-boot에서 h2 바로 실행하기

다음과 같이 설정해줍니다.
/src/main/resources/application.properties

spring.datasource.url=jdbc:h2:./test
spring.datasource.driverClassName=org.h2.Driver
spring.datasource.username=sa
spring.datasource.password=
spring.h2.console.enabled=true

그리고 @SpringBootApplication이 설정된 main메서드를 실행해주면
http://localhost:8080/h2-console에서 연결을 해서 들어가시면 들어가시면 됩니다.
파일이 없다고 에러가 뜨면요

Database "/Users/*/*" not found, either pre-create it or allow remote database creation (not recommended in secure environments) [90149-200] 90149/90149 (Help)
org.h2.jdbc.JdbcSQLNonTransientConnectionException: Database "/*/*/*" not found, either pre-create it or allow remote database creation (not recommended in secure environments) [90149-200]

touch ~/test.mv.db 한 후에 연결 누르시면 들어가집니다.