Vue Cli 로 프로젝트를 처음 만들어보고

대박이다. npm을 통해 뭔가 설치를 하는데 무려 30분이 지났지만 아직도 설치하고 있다. 

(이건 나중에 알고보니 대상 드라이브가 네트워크 드라이브라서 그렇다. 하지만 로컬 드라이브라 해도 오래 걸린다.)

 

웹 프로그램인데 컴파일? 

C++ 개발자라 늘 컴파일 & 링크 하는게 귀찮았는데 이제 웹까지도 컴파일을 해야 하다니.

여기 저기 의존성 있는 모듈이 잔뜩 있는지라 이 녀석들 중에서 꼭 필요한 스크립트만 뽑아 컴팩트하게 만들어주고 그 과정에서 없는 모듈을 체크하고. 그 과정과 행동을 보면 C++의 컴파일과 다를게 없긴 하다. 

그저 템플릿 프로젝트 1개를 만드는데 다운로드 되는 파일이 만개가 넘다니. 

이건 C++로 치면 프로젝트 하나 만들때마다 Windows SDK를 통째로 다운로드 받는 느낌. 

웹 개발 시작부터 난관. 

 

코드 스타일 강제화에 단위 테스트 모듈까지 설치된다.

풋. 이건 C++ 개발 환경보다 더 좋은데?

하지만 지나치게 오버스럽다. 

 

으윽. 3일 째 보고 있다. 

그리고 조금 알 것 같다. 이제 자바스크립트로 데스크탑 앱도 만들 순 있는 시대가 오긴 왔구나. 

물론 데이터는 서버에서 가져오고 UI + 데스크탑 껍데기(크로미움으로 도배된 어마 어마한 껍데기)만 만드는 거지만. 

 

자바스크립트로 node.js에 넣어 서버도 만들고, 모바일, 윈도, 맥 가릴 것없이 크로스 플랫폼으로 앱을 만들고 (어차피 핵심은 웹이니 껍데기는 각 OS에서 제공해주는걸로 쓰면 되지) 이러니 자바스크립트로 모든 걸 다 만들 수 있다는 말까지 하는 사람들도 있다.

 

개발 과정에서 내 PC에 node.js를 설치해 이놈으로 패키지 관리와 테스트 서버를 삼고 말이 좋아 데스크탑 앱이지 결국 웹 프로그램. 어디서인가 제공되는 근원 데이터를 가져다 가공하고 처리해서 아름답게 보여주는 UI 프로그램일 뿐. 

모든 프로그램은 UI만으로는 안된다. 하지만 또 사용자에게 제공되는 대부분의 프로그램은 UI가 없으면 안된다. 

 

늘 안보이는 프로그램만 만들다 UI에 일자무식인 내가 이런 걸 보니 신세계지만. 느려. 너무 느려. 더럽게 느려. 

 

패키지 받아오는데 하세월. 거기다 크로미움이 통째로 뜨니 느리기도 더럽게 느리다. 

속 터져 못 하겠다. 웹 개발자들이 존경스럽다. 

 

심지어 프로젝트 설정도 웹 브라우저 - node.js - 자바스크립트 - 로컬PC 구조의 UI를 준다. cli 명령에 익숙하지 않으니 어찌할 수도 없고. 

 

Visual Studio 또는 XCode 에서 Native 언어로 마음대로 만들고 개발 하는 것이 얼마나 좋은 환경인지 이제서야 느낀다. 

 

 

 

 

이런 경고는 왜 뜨는걸까?

C:\WORK\orange\agent\webview\p2>npm run build

> p2@1.0.0 build C:\WORK\orange\agent\webview\p2
> node build/build.js

- building for production...(node:7700) Warning: Accessing non-existent property 'cat' of module exports inside circular dependency
(Use `node --trace-warnings ...` to show where the warning was created)
(node:7700) Warning: Accessing non-existent property 'cd' of module exports inside circular dependency
(node:7700) Warning: Accessing non-existent property 'chmod' of module exports inside circular dependency
(node:7700) Warning: Accessing non-existent property 'cp' of module exports inside circular dependency
(node:7700) Warning: Accessing non-existent property 'dirs' of module exports inside circular dependency
(node:7700) Warning: Accessing non-existent property 'pushd' of module exports inside circular dependency
(node:7700) Warning: Accessing non-existent property 'popd' of module exports inside circular dependency
(node:7700) Warning: Accessing non-existent property 'echo' of module exports inside circular dependency
(node:7700) Warning: Accessing non-existent property 'tempdir' of module exports inside circular dependency
(node:7700) Warning: Accessing non-existent property 'pwd' of module exports inside circular dependency
(node:7700) Warning: Accessing non-existent property 'exec' of module exports inside circular dependency
(node:7700) Warning: Accessing non-existent property 'ls' of module exports inside circular dependency
(node:7700) Warning: Accessing non-existent property 'find' of module exports inside circular dependency
(node:7700) Warning: Accessing non-existent property 'grep' of module exports inside circular dependency
(node:7700) Warning: Accessing non-existent property 'head' of module exports inside circular dependency
(node:7700) Warning: Accessing non-existent property 'ln' of module exports inside circular dependency
(node:7700) Warning: Accessing non-existent property 'mkdir' of module exports inside circular dependency
(node:7700) Warning: Accessing non-existent property 'rm' of module exports inside circular dependency
(node:7700) Warning: Accessing non-existent property 'mv' of module exports inside circular dependency
(node:7700) Warning: Accessing non-existent property 'sed' of module exports inside circular dependency
(node:7700) Warning: Accessing non-existent property 'set' of module exports inside circular dependency
(node:7700) Warning: Accessing non-existent property 'sort' of module exports inside circular dependency
(node:7700) Warning: Accessing non-existent property 'tail' of module exports inside circular dependency
(node:7700) Warning: Accessing non-existent property 'test' of module exports inside circular dependency
(node:7700) Warning: Accessing non-existent property 'to' of module exports inside circular dependency
(node:7700) Warning: Accessing non-existent property 'toEnd' of module exports inside circular dependency
(node:7700) Warning: Accessing non-existent property 'touch' of module exports inside circular dependency
(node:7700) Warning: Accessing non-existent property 'uniq' of module exports inside circular dependency
(node:7700) Warning: Accessing non-existent property 'which' of module exports inside circular dependency

아아아아.

예나 지금이나 여전히 웹 쪽은 개발하기 싫다. 

 

Tip: built files are meant to be served over an HTTP server.
  Opening index.html over file:// won't work.

 

난 로컬에서 돌릴건데 이건 왜 이런걸까.

css, js와 같이 로드할 파일 경로와 관계가 있다. '/'와 같이 절대 경로로 시작되면 로컬에서 로드가 안되니 이 부분을 '/'없이 해주면 된다. 

 

젠장. 윈도에서 쓸만한 UI만 잘 제공해줬어도 이 지랄은 하지 않아도 되는건데. 

 

 

 

vue-cli로 vue 시작하기

skypacific.github.io/2019/02/25/kang.heehun@buildup_vuejs.html

빈 프로젝트 부터 시작하여 풀스펙 Vue.js 프로젝트 구축