[React] 설치 with VisualStudio_Code

최근 웹 프로그래밍을 주로 react를 이용하여 사용한다고 한다. 일단 나는 기존에 이클립스, 비주얼 코드를 이용해서 웹 프로그래밍을 해본 경험이 있기에 이를 살려 오늘은 우선 react부터 다운로드를 받아서 사용해보겠다😊

 

 

1. node.js을 다운로드 받는다! 

 

-> https://nodejs.org/ko

 

*다운로드가 잘 되었는지 확인 하는 방법은 cmd를 연다. node -v, npm -v를 입력해서 버전이 뜨면 된다.

(나는 2025.02.25에 node.js를 재설치하고 다운로드를 받았기에 아래와 같은 결과가 나왔다)

 

C:\Users\사용자>node -v
v22.14.0

C:\Users\사용자>npm -v
10.9.2

 

2.  비주얼 스튜디오 코드에서 터미널을 연다.(이게 제일 작업하기 편하다!) 

 

3. 터미널에 npx create-react-app my-react-app를 입력한다.

 

npx : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Program Files\nodejs\npx.ps1 
파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.micros 
oft.com/fwlink/?LinkID=135170)를 참조하십시오.
위치 줄:1 문자:1
+ npx create-react-app my-react-app
+ ~~~
    + CategoryInfo          : 보안 오류: (:) [], PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

 

나는 이런 오류가 떠서, 찾아보니 추가적으로 설정 변경이 필요했다!

 

• 1. PowerShell를 관리자 권한으로 실행한다. 
• 2. 스크립트 실행 정책 변경을 입력한다.  -> Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser를 입력하면 된다.
• 3. 실행 규칙 변경 실행 정책은 신뢰하지 않는 스크립트로부터 사용자를 보호합니다. 실행 정책을 변경하면 about_Execution_Policies 도움말 항목(https://go.microsoft.com/fwlink/?LinkID=135170)에 설명된 보안 위험에 노출될 수 있습니다. 실행 정책을 변경하시겠습니까? [Y] 예(Y) [A] 모두 예(A) [N] 아니요(N) [L] 모두 아니요(L) [S] 일시 중단(S)[?] 도움말 (기본값은 "N"): 이렇게 질문을 던질 것이다.
• Y는 현재 설정을 허용하고 변경, A는 이후 모든 질문에 대해 Y로 자동 응답을 하는 것이기에 자칫 위험할 수 있다. Y를 누르는게 좋아보인다.

이후 비주얼 코드에 입력하면 시간이 소요된 뒤, 

Created git commit.

Success! Created my-react-app at C:\Users\사용자\my-react-app
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd my-react-app
  npm start

Happy hacking!

이렇게 뜬다. 나는 react를 이용해, 페이지를 이동하는 웹 프로젝트를 간단하게 구현하고 싶기에 미리 

-> npm install react-router-dom를 터미널에 입력하여 다운로드 받았다. 

 

added 9 packages, and audited 176 packages in 3s

28 packages are looking for funding
  run `npm fund` for details

7 vulnerabilities (2 low, 2 moderate, 3 high)

To address issues that do not require attention, run:
  npm audit fix

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details. 성공 시 위와 같이 뜬다!

 

혹시 또 react에서 추가적으로 필요한 작업이 있으면 이후 수정하겠다. ⇊