[현대이지웰 Java 풀스택 개발자 아카데미 6월] TIL 3주차 - React 앱 생성

📚 요약

리액트를 시작하고자 한다면 필수 디렉터리와 파일들 만들고 리액트 라이브러리를 설치하고...🥹

 

 

이것저것 과정이 많고 생각보다 시간이 오래 걸리기에

 

node.js를 이용해 명령어 한 줄로 자동 생성하는 방법을 정리해볼 것이다!😎✨

 

 

 

 

 

🎷VS Code에서 파워쉘(PowerShell) 사용하기

가장 먼저 리액터 앱을 만들어줄 위치를 선정하고

 

VS Code의 최상단 메뉴에서 파일(File) => 폴더 열기(Open Folder) 를 선택해 해당 경로를 열어준다.

 

한글팩 설치해서 한글로 보이는 중

 

나는 C에 Workspace를 만들어 두고 쓰는데 여기에 따로 reactWorkspace폴더를 만들었다.

 

 

이제 VS Code에서 ctrl + ` 키를 누르면 하단에 터미널 창이 생긴다.

 

창 내용을 보면 내가 vs code에서 연 폴더의 경로로 자동으로 들어가있는 것을 볼 수 있다!

 

 

여기에 명령어를 입력해주면 되는데, 일단 npx create-react-app 프로젝트명 을 입력해보자면

 

 

위와 같이 에러가 발생한다...🥲

 

 

1️⃣ 터미널 종류 바꾸기

가장 간단한 해결책은 터미널을 powershell이 아닌

 

cmd(Command Prompt)로 바꿔서 명령어를 실행하면 된다.

 

CMD로 여는 방법

 

 

2️⃣ 실행 정책 변경

하지만 기왕 기술블로그에 작성하는 거니까...

더 깊게 파보기 위해 에러의 내용대로 주소로 이동해 자세한 내용을 살펴봤다.

 

https://go.microsoft.com/fwlink/?LinkID=135170

about_Execution_Policies - PowerShell

 

 

내용을 간략히 읽어보자면 결국 PowerShell 실행 정책 문제라고 한다.

 

조금만 더 읽어보면 현재 정책값을 가져오는 방법도 있다.

 

 

현재 컴퓨터의 실행 정책은 Restricted 였는데 주요 설명은 스크립트를 실행하지 않는다. 였다.

 

 

스크립트를 실행할 수 있는 실행 정책으로 바꿔야 하는데 강사님은 RemoteSigned로 바꾸라고 하셨고

 

자료를 더 찾아보면서 아래 글을 찾았다.

 

https://m.blog.naver.com/vanstraat/221732533202

Powershell 파워쉘 실행정책 - Execution Policy

 

위 블로그 글에도

Microsoft Windows PowerShell 팀에서 권장할 만큼 가장 많이 설정되는 값

이라고 설명되어 있기도 하고 강사님도 이걸로 바꾸라고 하셨으니... 요걸로 바꿔보겠다.

 

바꾸는 방법도 에러에서 알려준 링크를 읽다보면 나온다.

 

 

참고에 따라 powerShell을 관리자 권한으로 실행해주고

 

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned

명령어를 실행해준다.

 

이제 VS Code에서 터미널을 사용할 준비가 끝났다!

 

 

 

 

 

🎺 Node.js를 이용해 React 앱 생성해보기

그 다음은 너무 쉽다!

 

VS Code 터미널에서 앞서 실행해 주었던

npx create-react-app 프로젝트명 명령어를 실행해주면 된다!

 

여기까지 오기가 길었다...

 

리액트 라이브러리가 자동으로 설치되고~

 

npm 으로 시작하는 명령어도 몇 개 알려주고~

 

최종적으로 Happy hacking! 이라는 문구가 뜨면 모든 준비가 끝났다!!!

 

드디어!!

 

 

 

 

 

🔥 결론

node.js로 리액트 설치하는 건 명령어 단 한 줄로 끝날만큼 간단했는데

 

실행 정책 오류를 살펴보다가 내용이 엄청 길어졌다...

 

 

뭐.. 이것도 나름대로 공식문서 보는 연습 한거라고 생각하면 유의미한 행동이 아니었을까...?😗🎶