✈ 윈도우즈에서 angular js choco install yarn 설치 / 실행 하기 위한 환경 갖추기 에러해결 with vscode

앵귤러js는 최근 프론트엔드 개발자들에게 가장 각광받는 프레임워크이다.

jquery가 라이브러리라면 angular js는 프레임워크다.

A부터Z까지 책임지는 JS생태계라는 뜻이다.

이 글에서는 angular js 설치하기와 앵귤러JS실행하기 위한 환경을 갖추는 것에 대해서 다룬다.

필자는 퍼블리셔 출신이라 리눅스니, macOS는 귀찮다.

따라서 윈도우즈 환경에서 앵귤러JS설치하기와 angular js 실행하기 위한 환경을 다룬다.

IDE로는 비주얼 스튜디오 코드(vscode)를 기본으로 설명하겠다.

IDE란 이클립스나 에디트플러스 같은 에디터 툴이라고 생각하면 되겠다. (하지만 보다 강력한?)

https://code.visualstudio.com/

노트북에는 이클립스가 설치되어 있지만 데스크탑에는 이클립스를 깔아 놓지 않아서 그냥 vs코드로만 설명하겠다.

그리고 참고로 필자 데스크탑은 여전히 윈도우7이다. 그것도 32비트 OS다. 

조만간 64비트OS로 새로 설치할 예정이지만, 32비트 OS에서 개발을 해야하거나 윈도우7환경에서 학습 중인 사람들을 위해서 환경 설정 부분만 큼은 일단 이 환경에서 설치하는 방법부터 설명하겠다.

먼저 angular js를 원활히 이용하기 위해서는 nodeJS를 먼저 설치해야 한다.

https://nodejs.org/ko/

에서 설치하면 된다. (복제방지는 걸지 않을테지만 링크도 걸지 않겠다. 카피앤페이스트...)

그리고 당연히 vscode를 설치 해야한다.

필수는 아니지만 가급적이면 얀을 설치하는 것도 좋다.

하지만 32비트 OS에서 yarn을 설치하는 것은 조금은 까다롭다.

32비트 윈도우 7에서 yarn을 설치하려면 초코(choco)를 이용하기를 추천한다.

일단 하나씩 설치 해보자.

먼저 node를 설치 한다. 윈도우 32비트용을 설치한다.

노드 설치는 별 문제가 없을 것이다.

vscode설치 역시 별 문제가 없을 것이다.

그리고 사실상 이 글의가장 핵심인 앵귤러를 사용하기 위해서는 당연히 앵귤러를 설치해야 한다.

노드를 설치했다면 CMD에서

npm i @angular/cli -g

를 명령하면 앵귤러 Cli가 설치 된다.

위 명령어는 npm install -g @angular/cli 와 같은 뜻이다.

이게 되어 있어야 ng new로 폴더 생성이 가능하다.

이 쯤이면 앵귤러를 사용할 수 있다.

하지만 이 이후 얀의 설치는 윈도우32비트에서는 설치시 에러 문제가 발생할 수 있다.

먼저 초코 설치부터 문제가 된다.

https://yarnpkg.com/en/docs/install#windows-stable

에서 msi파일을 다운받아서 설치 할 수도 있지만 초코로 설치할 것을 추천한다.

msi파일이라도 관리자권한으로 실행하면 되긴 할 것 같지만....

초코 설치 안내 페이지는 다음과 같다.

https://chocolatey.org/install

초코를 윈도우7 32비트에서 설치하려면 관리자권한으로 파워셀을 실행해서 다음의 코드를 붙여 넣고 설치 한다.

Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

초코를 설치 한 후에는 

choco install yarn

명령어로 얀을 설치 한다.

얀을 그냥 프롬프트에서 초코로 설치하면 다음과 같은 에러가 난다.

관리자권한 실행의 파워셀에서는 다음과 같이 설치가 된다.

이렇게 초코가 설치 된 뒤에 얀을 설치 한다.

얀이 잘 설치 되었다면 VS코드에서 angular 프로젝트를 만들어 보자.

먼저 Open New window로 새 화면을 연다.

처음 vscode를 기동했다면 그냥 따라서 작업을 하면 된다.

상단 메뉴에서 New Terminal을 연다.

이 때 열리는 터미널은 사용자 환경에 따라 다르지만, 기본적으로는 cmd prompt가 열린다.

git bash를 설치 했다면 bash를 선택할 수 있다.

윈도우10 64비트라면 파워쉘을 열 수도 있다.

터미널은 복수 개를 열 수 있다.

일단 열린 하나의 터미널을 cmd라 생각하고 활용하자.

루트는 윈도우 사용자계정 루트가 기본으로 열린다.

하지만 사용자 계정 아래에 작업 공간을 만들면 여러모로 귀찮아지고, 필자의 경우 C드라이브 SSD가 64기가 짜리라 용량이 부족하므로 D:로 옮기겠다.

D드라이브로 옮기는 명령어는

D:

이다.

work라는 폴더를 만들고 싶다면 일단은 

md work

로 만든다. 이 명령어는 기본적인 DOS명령어다. 리눅스에서라면 아마 mkDir [폴더명] 일 것이다.

이 폴더 아래에서 새로운 앵귤러 프로젝트를 실행하려면

ng new [폴더이름]

이때 적어줄 폴더 이름이 프로젝트 이름이 된다.

tst2로 만들어 보았다.

ng new 명령으로 폴더를 만들면 자동으로 앵귤러 프로젝트와 각종 리소스 파일들이 설치된다.

npm WARN deprecated circular-json@0.5.9: CircularJSON is in maintenance only, flatted is its successor.

라는 에러가 거슬리겠지만 패스해도 된다.

would you like to add Angular routing? Yes

Wich stylesheet format would you like to use?

를 물어 볼 땐 본인이 혹은 이 프로젝트에서 사용할 스타일시트 구성 방법을 선택한다.

필자는 일단 SCSS를 선택했다. angular material scss

이건 뭘 선택하건 본인 자유다.

아니..프로젝트 기술서대로...

하지만 초보라면 그냥 CSS.

이로써 앵귤러js를 해 볼 수 있는 가장 기초적인 설정과 폴더가 만들어졌다.

귀찮겠지만 Open Folder에서 방금 생성한 폴더를 열자.

폴더를 연 후 터미널을 스플릿한 후 오른쪽에서 얀을 실행하자.

yarn start 

라고만 쳐도 된다.

yarn start를 하는 것은 각종 node.js 서적과 angularJS에서 언급하는 

ng serve

를 띄우는 것과 같은 역할을 하지만 좀 더 다양하고 섬세한 설정을 한다.

각종 컴파일을 한 후 얀이 실행되면 브라우저에서 

http://127.0.0.1:4200/

을 열면 다음과 같은 화면이 나온다.

시작이 반이다.

이 과정을 앵귤러 관련 서적에서 여기까지 하는데 30~50페이지를 할애한다.

이 글을 본 순간 당신은 앵귤러js관련 서적의 50페이지는 먹고 들어간 셈이다.

당신이 앵귤러의 역사와 철학을 알아야만 앵귤러로 프로그램을 짤 수 있는 것은 아니잖은가?