[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개의 댓글