[Angular] 앵귤러 WebStorm으로 기존 Angular Project 실행하기

WebStorm으로 기존에 eclipse로 생성했던 프로젝트를 하나 실행해 보려고 합니다.

WebStorm 설치 방법은 단순하지만 필요하다면 아래 링크를 참조 합니다.

[WebStrom] 웹스톰 설치 (WebStorm-2018.3.2.)

설명은 4단계로 진행 됩니다.

1. WebStorm 실행

2. 프로젝트 열기

3. 프로젝트 실행

4. 결과 확인

 

1. WebStorm 실행

 

설치된 웹스톰 프로그램을 실행 합니다.

 

2. 프로젝트 열기

 

기존에 작성한 프로젝트를 실행해 보려고 하는 것이니 Open을 선택 합니다.

아이콘 테스트를 했었던 myNgProject가 눈에 띄는군요.

선택하고 [OK] 버튼을 클릭 합니다.

 

프로젝트가 WebStorm으로 올라 옵니다.

WebStorm을 처음 사용해 보는거라 잠시 깜놀 했습니다.

내가 안드로이드 스튜디오를 열었나???

 

3. 프로젝트 실행

 

다시 본론으로 돌아와서

좌측 파일들에서 package.json을 찾아봅니다.

찾으셨으면 마우스를 대고 우측버튼을 클릭해 줍니다.

아래쪽에 [Show npm Scripts]가 보이는군요 클릭을 합니다.

툴모양이 변경되면서 하단에 package.json 항목이 나열됩니다.

여기서 start를 더블클릭 합니다.

처음 실행을 하면 보안 경고가 나옵니다.

[엑세스 허용] 버튼을 클릭하면 이 팝업은 다음부터는 보고 싶어도 볼 수가 없습니다. 굳바이...

 

또 하단에 창이 하나 딸려나오면서 머가 잔뜩 써져 있습니다.

많이 보던거네요.

ng serve도 있고

http://localhost:4200도 있고

Compiled successfully.도 있네요.

 

4. 결과 확인

 

그럼 빨리 웹 브라우저를 하나 열어서 http://localhost:4200으로 접속해 봅니다.

잘 나오는 군요.

- copy coding -