리액트 개발 전 ! 설치 환경을 만들어보자!

오늘은 리액트의 개발환경을 구축해볼꺼에요.

 

일단 node.js를 설치해야합니다.

https://nodejs.org/en/ 에 들어가서 lts 버전을 설치해주도록 합시다.

저는 따로 설정한 것 없이 바로 install 했어요!

 

그 다음 node.js가 제대로 설치되었는지 확인을 해야겠죠?

윈도우분들은 -> cmd를 켜주신 후 -> node -v 을 입력해주세요

이름은 가렸어요

v20.14.0이 보이실꺼에요 그러면 설치가 된거에요 그렇다면 그냥 바탕화면 여러 프로젝트를 두면 바탕화면 개판이 되니

바탕화면에서 그냥 폴더를 생성하든 난 좀 있어보이고 싶다 하시는 분들은 

저는 바탕화면부터 들어가니

cd desktop 

( tip: 두글자 입력하고 tab을 누르면 자동 완성이 됩니다. 그게 아닌 경우는 똑같이 시작하는  파일들이 나열되니까 선택해주시면 됩니다.)

mkdir {filename}  -> 폴더를 설치하는 명령어에요

후에 

 

여기서 앞으로 많이 쓰시게 되실 react 설치 명령어 입니다.

npx create-react-app ./first-project -> first-project란 폴더를 생성 후 안에 설치

npx create-react-app ./                   

 

근데 윈도우 분들은 아마 이 에러를 많이 보실텐데 

대부분 유저 폴더가 한글명이라서 그러더라구요 필자는 바꿔왔어요

npm install npm -g

 

npm을 전역에다가 설치를 하는겁니다.

그 이후에 npx create-react-app ./first-project 을입력해주시면 설치가 될꺼에요!

저기에 설명대로 우리는 first-project 안에다가 리액트를 설치했기 때문에 cd first-project를 해주시고 

npm run start를 해주시면 localhost:3000에 리액트가 실행된 것을 볼 수 있어요~

 

다들 저보다 똑똑이들이라 알겠지만 

 first-project 경로까지 온다음에  code . 을 입력해주시면 vscode가 실행됩니다!