반응형
리액트 프로젝트 생성을 위한 사전작업 입니다.
맥OS를 기준으로 설명합니다.
1. 설치 순서
- Node.js / npm, yam 설치하기
- 코드 에디터 설치하기
- Git 설치하기
- create-react-app 으로 프로젝트 만들기
2. Node.js
Node.js는 백엔드 서버를 구축하는데 필요한 자바스크립트 런타임입니다. 리액트 애플리케이션은 웹브라우저에서 실행되는 코드이므로 Node.js와 직접적인 연관은 없지만 개발하는 데 필요한 도구들이 Node.js를 사용하기 때문에 설치합니다.
Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
Node.js를 설치하면 패키지 매니저 도구인 npm 이 같이 설치됩니다.
3. 코드에디터 설치
리액트 프로젝트 이용하면서 자주 사용하는 에디터로는 서브라임 텍스트(Sublime Text), 브래킷(Bracket), VS Code, 아톰 등이 있습니다.
특별히 사용하는 에디터가 없다면 모든 운영체제를 지원하는 VS Code를 추천합니다.
VS Code 확장프로그램을 설치 및 셋팅합니다.
- ESLint : 자바스크립트 문법 및 코드 스타일 검사
- Reactjs Code Snippets : 리액트 컴포넌트 및 라이프사이클 함수를 작성할 때 단축 단어를 사용하여 간편하게 코를 자동으로 생성
- Prettier Code formatter : 코드 스타일을 자동으로 정리해주는 도구
- Korean Language Pack for Visual Stuido Code : 설치 후 F1 Key 누른 후 "Configure Display Language" 를 입력하고 엔터를 누르면 locale.json 파일이 열리는데 locale 값을 ko 로 설정한 뒤 VS Code를 재시작
4. Git 설치
Git은 형상관리도구로 프로젝트 버전을 관리 및 협업용 툴입니다.
설치사이트 : https://git-scm.com/
Git
git-scm.com
5. 리액트 프로젝트 생성하기
- 프로젝트가 만들어질 디렉토리 만들기 (예: >mkdir labs)
- 해당 디렉토리로 이동 (예: >cd labs)
- 리액트 프로젝트 만들기 (예: labs>npx react-create-app lab03)
- 생성된 앱 디렉토리로 이동 (예: >cd lab03)
- 개발서버 실행하여 앱을 브라우저에 표출 (예: lab03>npm start)
npm start 는 package.json 파일이 있는 곳에서 실행
리액트 기본화면이 브라우저에 표출되면 성공적으로 개발환경 구성이 완료
반응형