본문 바로가기

react 개발 환경

리액트 개발함에 있어서 개발환경 설정은 어렵지 않다.

 

nodejs를 설치하고 visual code를 설치하고 프로젝트를 생성하고 개발을 하면 된다. 그 뒤 부턴 문법과 로직을 연구해서 구현을 하는게 반복이다.

 

시간도 가면 새로운 툴도 나온다. 보통의 개발일을 하다보면 저건 안해도 괜찮아 하는 것이 되돌아 올 때가 있다.

 

프로그래밍을 하다가 계속 외면 할 수 있으면 상관이 없지만 언젠가는 부딪혀야 할 때가 있다. 문법의 차이 언어의 차이는 개발한 시간이 길어지면 큰 문제가 안된다.

 

여기에 있는 것이 저기도 있고 쓰는 방법의 차이가 있을 뿐이지 대부분 비슷하게 구현이 된다.

제일 먼저 할 일은 node를 설치 하는 것이다.

https://nodejs.org/ko/

 

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

각 버전이야 자주자주 판올림이 되니 큰 문제가 없으면 LTS를 받아서 설치를 하자. 이제 끝이다.

 

 

 

그 다음 VISUAL CODE를 받자.

https://code.visualstudio.com/

 

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

프로젝트가 진행이 될 폴더를 하나 만들고 콘솔이나 파워쉘에서 아래 명령어를 입력해서 프로젝트를 생성하자.

npx create-react-app 프로젝트명

 

하게 되면 뭔가 한창 install을 하고 받는 과정이 지나고 나면 기본적인 프로젝트 셋팅은 완료가 된다.

물론 기본적인 html, css, js는 알아야 한다.

 

참고로 나는 오래전에 설치를 해서 노드 버전은 10x버전이고 create react app required node >= 14.0.0 or higher.

please update your version of Node. 라고 메시지가 나왔다. 

업데이트를 하라 소리다.

먼저 캐시를 날려주자.

npm cache clean -f

구버전 이라면 npx create-react-app@3.4.0 my-app으로 프로젝트를 만들자.

https://stackoverflow.com/questions/70380801/how-to-use-create-react-app-with-windows-7

그냥 속편하게 윈도우 10 / nodejs 최신을 깔고 쓰는것이 속편하다.

 

이제 앞으로 나올 api, json, state 관리등을 배우면서 진행 하면 된다.