리액트 개발 환경, 시작이 반이다

본격적으로 리액트 개발을 시작하기 전에, 쾌적한 환경을 갖추는 것은 그 자체로 반은 성공한 셈입니다. 많은 사람들이 바로 코드부터 작성하려 하지만, 올바른 개발 환경이야말로 성공적인 프로젝트의 밑거름이 됩니다. 이제부터 리액트 프로젝트를 시작하는 데 필요한 모든 준비 과정을 차근차근 살펴보겠습니다.

Node.js와 npm, 그리고 필수 도구들

리액트 프로젝트의 출발점은 Node.js 설치입니다. Node.js는 자바스크립트로 작성된 코드를 브라우저가 아니라 컴퓨터에서 직접 실행시킬 수 있도록 돕는 런타임입니다. npm은 Node.js와 함께 제공되는 패키지 관리자(도구함)로, 리액트를 설치하고 관리하는 데 반드시 필요합니다.

Node.js 공식 사이트에 접속해 각 운영체제에 맞는 LTS(Long Term Support) 버전을 설치하세요. 설치가 정상적으로 되었는지 확인하려면, 커맨드 라인(윈도우에서는 명령 프롬프트, macOS나 리눅스에서는 터미널)을 열고 다음 명령어를 입력합니다.

node -v
npm -v

버전 번호가 출력된다면 성공입니다.

프로젝트 생성, 단 한 줄로 시작하기

Node.js가 준비되었다면, 리액트 애플리케이션의 기본 구조를 자동으로 만들어주는 'create-react-app'을 활용할 차례입니다. 복잡한 설정 없이 딱 한 줄이면 기본 프로젝트 뼈대를 만들 수 있습니다. 터미널에 다음과 같이 입력하세요.

npx create-react-app my-react-app

'my-react-app'은 원하는 프로젝트 이름으로 대체가 가능합니다. 명령이 끝나면 동일한 이름의 폴더가 생성되고, 기본 설정과 디렉터리 구조가 모두 갖춰진 상태가 됩니다.

프로젝트 디렉터리로 이동해 개발 서버를 실행해 봅시다.

cd my-react-app
npm start

이제 브라우저에서 localhost:3000에 접속하면 리액트가 반기는 화면을 볼 수 있습니다.

코딩의 동반자, Visual Studio Code

효율적인 개발을 위해서는 에디터 선택도 매우 중요합니다. Visual Studio Code(VSCode)는 빠르고 다양한 확장 기능을 제공해 리액트 개발에 최적화돼 있습니다. 한국어 지원, 테마, 코드 자동 완성, 오류 표시 등, 개발의 속도와 정확성을 높여줍니다.

VSCode를 설치한 뒤, 'ESLint', 'Prettier', 'Bracket Pair Colorizer' 같은 인기 확장 프로그램도 곁들인다면, 코드 품질과 생산성이 한층 향상됩니다.

작은 경험의 반복이 실력을 만든다

환경이 마련되면, 이제부터는 작게 자주 실행해보는 것이 가장 좋은 학습법입니다. 첫 화면을 바꿔보고, 파일을 추가해보고, 코드 수정 후 바로 결과를 확인하는 경험을 통해 자연스럽게 리액트의 기초를 다질 수 있습니다. 환경 설정에 너무 많은 시간을 쓸 필요는 없지만, 올바르게 준비된 개발 환경은 앞으로 부딪힐 수많은 시행착오를 줄여줄 것입니다.

이제 여러분은 리액트 세계로 진입할 모든 준비를 마쳤습니다. 다음 장에서는 리액트의 핵심 개념들과 진짜 코드로 한 뼘 더 성장하는 여정을 함께하겠습니다.