[React] 작업 환경 설정

겨레·2024년 11월 6일

📍 Node.js란?
크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임. 이를 통해 웹 브라우저 환경이 아닌 곳에서도 자바스크립트를 사용해 연산할 수 있다.

① 리액트 프로젝트를 만드려면 Node.js를 반드시 먼저 설치해야 한다.

리액트 애플리케이션은 웹 브라우저에서 실행되는 코드로 Node.js와 직접적인 연관은 없지만, 프로젝트를 개발하는 데 필요한 주요 도구들이 Node.js를 사용하기 때문에 설치하는 것!


Node.js를 설치하면 Node.js 패키지 매니저 도구인 npm이 설치되는데, npm으로 수많은 개발자가 만든 패키지(재사용 가능한 코드)를 설치하고 설치한 패키지의 버전을 관리할 수 있다.


② npm 대신 yarn이라는 패키지 관리자 도구를 설치해 사용 가능하다. yarn은 npm을 대체할 수 있는 도구로 npm보다 더 빠르고, 효율적인 캐시 시스템과 기타 부가 기능을 제공한다. npm에 이미 익숙하고 기존에 사용하던 흐름에 변화를 주고 싶지 않다면 npm을 계속 사용해도 된다.


③ 리액트 애플리케이션을 만들면서 코드를 수정할 때는 사용할 코드 에디터를 설치한다. 리액트 프로젝트를 진행하면서 자주 사용하는 에디터로는 서브라임 텍스트(Sublime Text), 브래킷(Bracket), VS Code, 아톰 등이 있다.

  • VS Code 에디터 사용 시, 설치하면 유용한 확장 프로그램
    : ESLint, Reactjs Code Snippets, Prettier-Code formatter



④ 프로젝트 버전을 관리하고 협업을 돕는 형상 관리 도구(Configuration Management Tool) Git 설치하기.


⑤ create-react-app으로 프로젝트 생성하기

  • create-react-app
    리액트 프로젝트를 생성할 때 필요한 웹팩, 바벨 설치 및 설정 과정을 생략하고 바로 간편하게 프로젝트 작업 환경을 구축해 주는 도구로 나중에 설정을 커스터마이징해야 하면 자유롭게 설정 변경할 수 있음.
profile
호떡 신문지에서 개발자로 환생

0개의 댓글