뒤죽박죽 React 생성기

박진톨·2022년 3월 12일
0

ReactProject

목록 보기
1/3
post-thumbnail

일단 폴더부터 생성 해야겠죠?
이렇게 새로운 폴더를 하나 만들어 주었어요!

이렇게 폴더를 생성했다면 이제 리엑트를 폴더에 install 해줘야하는데요

react 를 install 하기전에

node.js 를 설치해주겠습니다.

https://nodejs.org/en/

저는 node.js를 사용하여 package를 install 할건데요

node.js 를 이용하여 package를 구성하는것을

npm(Node Package Manager) 이라고 한다고 해요!

그러나 리엑트에서 추천하는건 npx 로 install하라고 하는데요

npx 는 npm과 다른것이 아닌 npm을 더욱 편리하게 관리가 가능한

도구라고 보시면 됩니다!

자 이제 node.js 를 설치했고 이제 리엑트를 install 해볼까요?

자 이렇게 폴더를 우클릭 후 이폴더의 터미널 창을 열어주겠습니다!

그리고 터미널 창에

npx create-react-app 패키지명

라고 입력 해주시고 엔터를 눌러주시면
이렇게 폴더안에 패키지이름과 함께 초기 파일들이 생성된걸 볼수있습니다.

자 이제 폴더를 생성했고 이제 한번 VSC(Visual Studio Code)를 이용하여

생성한 폴더를 열어볼까요!

프로그램을 실행한 뒤

Mac 기준 왼쪽상단 파일을 클릭후 Open Folder 를 클릭합니다.

이제 제가 만든 폴더안에 패키지를 선택합니다.

저 처럼 헷갈려 하실 분들이 있을수 있어 말씀 드리자면 제가 리엑트를 설정한

패키지는 myproject폴더가 아닌 제 폴더 기준 firstreact 폴더 이기때문에

폴더를 열때

firstreact 파일을 여는것이 더 편합니다.

이렇게 열지 않고 myproject로 폴더를 열게 되면 터미널을 열고
npm run start로 react를 실행시켰을때 이런 오류를 보실수 있는데요
물론 터미널을 firstreact를 선택하여 터미널창을

하나 더 열고 해도 되겠지만 처음부터 firstreact 폴더로 터미널을 연다면

마우스가 한번더 움직이는 수고는 하지 않아도 되겠죠? 저희는 1초도 소중한

개발자가 될거니까요^*^
자 이제 정상적으로 터미널을 열고 나서 npm run start 를 입력하게 되면
어쩌구 저쩌구 영어 나부랭이가 뜨면서 react를 실행 시켜줍니다.
실행을 시키면 이렇게 localhost:3000에서 react가 실행된것을 확인 하실수 있습니다!

시작이 반이라고 react 초기 설치 및 VSC로 폴더까지 열어 실행 시켜 보았는데요

저도 처음부터 다시 차근 차근 배우면서 홈페이지 하나를 만드는것이 목표 입니다.

같이 따라 하실분들은 조금씩 업데이트를 할 예정이니 천천히 따라와 주시면 되겠습니다!

이상 초보도 할수있는 react설치 및 간단한 실행기 였습니다.

profile
아마도 개발자

0개의 댓글