리액트(React)는 사용자 인터페이스를 구축하기 위한 프론트엔드 구현시 인기 있는 자바스크립트 라이브러리입니다.
이번 포스팅에서는 이러한 리액트 개발환경 구축을 해보고 나아가 실제 프로젝트 몇개를 진행 해보도록 하겠습니다.
개발환경 구축 설명은 Mac OS 을 기반 으로 설명드립니다만, 윈도우도 유사하다고 보시면 됩니다.
Node.js 와 npm 설치하기
리액트 개발환경 구축을 위해서는 사전준비가 필요합니다. 바로 Node.js 와 npm(Node Package Manager) 설치입니다.
Node.js 와 npm(Node Package Manager) 은 리액트 프로젝트를 생성, 관리 및 실행하는 데 필요한 도구입니다.
1) Node.js 다운로드
https://nodejs.org/en 에 접속 후 LTS 버전 다운
Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
우리는 안정된 버전 이라는 뜻인 LTS 를 받도록 하겠습니다.
2) 설치 확인
설치가 끝나면 cmd 창에서 설치를 확인하기 위해 터미널을 열고 node -v와 npm -v 명령어를 입력하여 각각의 버전을 확인합니다.
저는 기존에 받아논 버전이 뜨는 것이니, 버전이 다르다고 걱정하지 않으셔도 됩니다.
리액트앱 생성하기
Node.js와 npm이 설치되었으면, 이제 리액트 앱을 생성할 수 있습니다. Create React App 은 리액트 개발 환경을 빠르게 설정할 수
있는 공식적인 방법 입니다.
1) 터미널을 열고 원하는 경로에서 아래와같은 명령어를 실행하여 새 리액트 앱을 생성 합니다
npx create-react-app my-first-app
# my-first-app 은 여러분이 만들고 싶은 리액트 앱 이름 입니다. 바꾸셔도 됩니다
2) 생성된 앱 폴더로 이동 합니다.
cd my-first-app
해당 폴더에 들어갔을 때, 이렇게 여러 폴더와 파일이 있으면 생성 된겁니다
리액트앱 실행하기
리액트 앱이 성공적으로 생성되면, 개발 서버를 시작하여 앱을 실행할 수 있습니다.
1)개발 서버 시작: 아래 명령어로 개발 서버를 시작합니다.
# 주의사항 : 리액트앱 생성된 폴더에서 아래 명령어를 입력하셔야 합니다!!
npm start
2)브라우저 확인: 기본 브라우저가 자동으로 열리고, localhost:3000에서 앱을 볼 수 있습니다. 3000 번 포트가 기본이며,
이미 무언가 실행이 되고있으면, 포트번호는 바뀔수있습니다.
여기까지 작동이 된다면, 리액트앱 생성 및 실행은 완료되었습니다
이제 개발환경은 구축되었습니다.
Visual Studio Code 로 리액트앱 생성 및 실행하기
마지막으로, Visual Studio Code 로 리액트앱 생성 및 실행해보도록 하겠습니다.
Visual Studio Code ( VSC ) 에서 터미널을 켜시고,
npx create-react-app my-first-app
입력하시면, 아래와같이 생성이 완료 됩니다.
VSC 를 쓰시면, 간단하게 생성 및 실행 이 가능합니다.
이번 포스팅에서는 리액트 개발환경을 구축했습니다.
다음 포스팅에서는 리액트로 페이지, 기능 개발 을 중점적으로 작성하도록 하겠습니다.
Happy hacking! 즐거운 코딩 되세요!!