앵귤러 폴더 권한 문제 angular error windows [nodemon] clean exit, 윈도우 angular js choco install yarn 설치

앵귤러 폴더 권한 문제 angular error windows [nodemon] clean exit, 윈도우 angular js choco install yarn 설치

angular error [nodemon] clean exit - waiting for changes before restart sqlite

어느 날 갑자기 앵귤러 서버가 구동이 안 되는 일이 발생했다.

yarn start:server:nodemon

으로 잘 구동되던 노드 서버가 [nodemon] clean exit - waiting for changes before restart 에러를 띄우고 실행이 멈춘다.

윈도우 환경에서 SQLite를 사용할 때 SQL라이트가 Workspace에 Dev 폴더를 생성하고 database.sqlite 파일을 만들어야 하는데 못 만들어서 발생한 에러다.

앵귤러  폴더 권한 문제

windows 환경에서는 폴더에 쓰기권한을 주지 않은 경우가 대부분이다.

앵귤러 프로젝트를 윈도우 환경에서 개발할 때는 워크스페이스의 폴더 권한을 모두로 바꾸는 것이 좋다.

스택오버플로우 같은데서는 [nodemon] clean exit - waiting for changes before restart Error에 대해서

yarn add express or npm install express

으로 해결하라고 하지만 쓰기 권한 문제일 경우에는 백날 저거 해봐야 안된다.

windows10에서 권한 변경하는 것은 읽기전용 설정 해제만으로 가능하다.

쓰기 권한을 주더라도, dev 폴더만 생성되고 database.sqlite 파일이 안만들어지기도 한다.

이 때는 그냥 같은 이름의 빈 파일을 dev 폴더 안에 만들어 두면 된다.

이렇게 해서도 에러가 발생한다면 dbeaver 같은 디비 뷰어를 띄우고 진행하면 된다.

혹은 컴퓨터가 느린 경우에는 디비코넥션이 늦어져서 제 때 안 뜰 수도 있으므로 개발환경에서라면 settimeout함수를 써서 서버 구동을 딜레이 해주는 것도 한 방법이다. (편법이다)

윈도우 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/

Visual Studio Code - Code Editing. Redefined

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

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

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

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

https://nodejs.org/

Node.js

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

그리고 당연히 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

Yarn

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

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

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

https://chocolatey.org/install

Installing Chocolatey

초코를 윈도우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페이지는 먹고 들어간 셈이다.

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