VSCode에서 Hello World 개발

[ 1 단계 ] 

제일 먼저 cmd 에서 노드, npm 설치여부를 체크한다. 

환경변수 설정등은 생략한다.

 

VS코드를 설치한다. 

해당 과정은 설치한다.

 

다음은 설치 이후를 설명한다.

 

주의할 점 !!!

VS코드를 관리자권한으로 실행해야한다.

그렇지 않을 때는 다음과 같은 권한에러가 발생하는 경우가 있다.

 

 

 

 

하단부에 터미널이 열린다. 

npm 설치여부를 체크한다.

VS코드 아래 터미널에 관리자권한으로 접속을 허용한다.

Set-ExecutionPolicy Unrestricted

ExecutionPolicy

npm install -g create-react-app

create-react-app my-app

 

React 설정

 

 

위 그림처럼 Happy hacking  이 보이면

아래에  C;\test 부분에 그대로 코딩한다.

cd my-app

npm start

 

아래와 같은 방화벽이 보이면 성공이다.

엑세스를 허용한다.

 

 

 

 

일단 여기까지 하고 체크한다....

 

[ 2 단계 ] 

스캐폴딩으로 생성된 보일러플레이트를 내가 원하는 폴더( 예) api-frontend )로 마이그레이션한다.

다음에 VS코드 터미널에서 실행해서 위와 같은 Atom 마크가 생성되면 성공한 것이다.

다만 

VS코드를 관리자 권한으로 하지 않을 때, 아래와 같은 에러가 발생한다.

 

그래서, 처음부터 VS코드를 관리자 권한으로 실행한 상태에서 작동시키는 것을 추천한다.

다만, 내부에서 권한제한이 엄격하지 않을 경우 이 처럼 하지 않아도 잘 작동하는 경우도 있다.

그때는 그냥 사용하면 된다.

 

 

[ 3 단계 ] Hello React 를 브라우저에서 출력하기

 

 

 

메뉴바 > File > Auto Save 를 클릭하면 V 체크 표시됨.

 

 

index.js 를 열면 아래 소스가 보입니다.

 

 

폴더와 파일을 생성합니다.

 

 

 

터미널에서 yarn start 해주세요.