[1] IntelliJ 셋팅하기(vuejs, nodejs, vuecli)
- 2021.09.27 -
- 2023.05.05 -
기존 개발블로그에서 작성했었던 내용물들을 통합하고자 옮겨 적었다
Web 개발을 위해 여러 프로그램을 찾던 도중 친척형의 조언을 얻어 IntelliJ를 찾게 되었다.
IntelliJ는 유로 프로그램으로 구독제로 관리가 되고있는데 대학생의 신분이라면 졸업 직전까지 충분히 무료로 사용할 수 있다.
학생용 라이센스 진행은 여기에서!
IntelliJ를 설치했다면 아래 항목들을 설치해야한다.
사이트는 누르면 이동할 수 있다. :)
1. vue.js
2. node.js
3. vue cli
IntelliJ는 html과 java 등 vuejs, nodejs를 다룰 수 있고 또한 GitHub를 통해서 코딩을 빠르고 편하게 공유할 수 있어서 장점이 많은 프로그램이다.
vue.js와 node.js, vue cli는 검색과 정식사이트를 통해서 설치할 수 있다.
그리고 나서 vue,node를 intelliJ와 연결을 시켜줘야 하는데
MAC 기준 - 좌측 상단 IntelliJ IDEA - Preferences - Plugins 로 들어간다.
(Windows는 Setting으로 들어가면 된다)
위 사진에서 중앙 상단에 위치한 Marketplace를 눌러서 플러그인을 검색한다.
Plug-ins을 검색하는 창에 Vue.js, Node.js, EJS를 검색해 Install한다.
그 다음 Terminal을 통해서 정상적으로 설치가 되었는지 확인을 해주어야 한다.
Terminal의 위치는 하단의 작은 탭들이 모여있는 곳에서 확인 할 수 있다.
이 터미널은 몇번 검색을 했었는데 계속 확실하지 않게 나왔다.
윈도우환경이라면 명령프롬프트창(cmd)라고 할텐데 캡쳐한 사진을 보면 윈도우가 맞는데 cmd라 안하고 terminal 이라고 해서 몇번 햇갈린 기억이 있다. 그러나 운영체제를 떠나서 IntelliJ프로그램에는 자체적인 Terminal이 있으니 앞으로 그 기능을 쓰면 될 것 같다.
명령어는 아래와 같다
node.js
node --version
vue.js
vue --version
이제 여기까지를 한번 정리 해보자
Chapter 1. IntelliJ를 설치 후 Vue.js & Node.js 사이트로 들어가 설치완료한다. Chapter 2. IntelliJ의 Preferences에서 Plugins항목에서 vue.js / node.js / ejs 를 검색 후 install. Chapter 3. IntelliJ의 Terminal에서 명령어를 통해 각각 버전을 확인 |
[NPM 설치]
이 다음에는 npm을 설치해 주어야 한다.
npm은 Node Package Manager / 노드 패키지 매니저의 약자로 자바스크립트 프로그래밍 언어를 위한 패키지 관리자이다.
런타임 환경 node.js의 기본 패키지 관리자.
Terminal에 아래와 같이 명령어를 입력한다.
npm install -g @vue/cli |
ERROR 01
[ MAC 환경 ]
MAC환경에서 올바르게 명령어를 입력했음에도 ERROR가 뜨면서 Fail이 일어나는 경우가 생긴다.
npm이 설치조차 되지 않는 상황..!
이럴땐 MAC OS 기준으로 Super User(관리자) 권한이 필요하다.
sudo su |
명령어를 이용해서 관리자 권한으로 계정을 전환한다.
이제 상태에서 npm을 설치하자!
ERROR 02
[ Windows 환경 ]
여러 스크린샷이 없지만 대부분 사용자계정의 권한문제이다. MAC OS와 동일한 점은 이 두개 모두 일반 유저 계정이라는 점인데
Windows 환경에서 또한 동일하게 Admin계정으로 다시 실행하면 문제가 해결된다.
sudo su 를 통해 su로 로그인 후 npm install를 완료하였다.
이제 vue.js , node.js , vue cli까지 모두 설치 했다.
이제 다음 명령어를 통해서 vue CLI 프로젝트를 생성해야하는데 내 MAC OS환경에서는 에러가 안났지만
Windows환경에서는 에러가 났다. 명령어는 아래와 같다.
vue create vue-cli |
`
`
`
ERROR
[ Windows ]
윈도우 환경에서는 다음과 같은 오류 메세지가 나오며 실행을 막는다.
오류: 이 시스템에서 스크립트를 실행할 수 없으므로 C:\user\username\AppData\Roaming\npm\vue.ps1 파일을 로드할 수 없습니다. |
이 오류는 윈도우에만 있는 PowerShell의 문제인데 파워쉘에서 악의적인 스크립트 실행을 방지하기 위한 안전기능 때문이다.
윈도우에서는 아래와 같은 코드로 실행해보자.
vue.cmd create vue-cli |
`
`
`
위 명령어인 vue create vue-cli를 입력하면 다음과같은 화면들이 나온다.
설치가 완료 되었는데 이제 가장 밑에 있는 청색 글씨의 명령어를 이용해 npm의 서버를 시작해본다.
원래 cd vue-cli 명령어 다음 npm run serve로 바로 시작해야한다.
나는 이미 설정까지 완료가 되었기에 exit를 통해서 su관리자계정에서 로그아웃하여 서버를 시작했다.
이제 Local, Network 주소를 눌러 welcome을 확인하자!
여기까지 intelliJ에서 vue.js / vue cli / node.js 등을 연동해보았다.
마 치 며
아무것도 모르는 상태에서 시작하려니 죽을맛이 였다..;
진짜 멘땅에 해딩하는 기분으로 조금씩 찾아서 설정을 해보았고
다행히 MAC OS와 Windows가 모두 있어서 이 두개를 모두번갈아 가면서 사용했다.
각각의 장단점도 파악할 수 있었고 나는 그중에 MAC으로 앞으로 환경을 잡아가기로 했다.
사실 이제 조금 .. 거즘 엄지발가락정도 담가본건데 앞으로 얼마나 험난한 일이 있을지..ㅋ..
'Develope > Dev Tools' 카테고리의 다른 글
[3] Vue.js를 이용한 todolist 만들기 (0) | 2023.05.05 |
---|---|
[2] IntelliJ 셋팅하기(Github 연동) (0) | 2023.05.05 |
댓글
이 글 공유하기
다른 글
-
[3] Vue.js를 이용한 todolist 만들기
[3] Vue.js를 이용한 todolist 만들기
2023.05.05 -
[2] IntelliJ 셋팅하기(Github 연동)
[2] IntelliJ 셋팅하기(Github 연동)
2023.05.05