🌟 Create-React-App (CRA)란?
🪄 이전 포스트에서도 언급했듯,, 지금까지 배운 건 현재 실무에서 사용되지 않는 cdn 작성법이라 기본 개념만 익히기로 하고, 오늘 포스트에서는 본격적으로 실무에서도 활용되고 가장 간편하며 효과적으로 작업할 수 있는 Create-React-App(CRA) 환경에 대해 배워보기로 한다.
🪄 CRA는 복잡한 설정 없이 빠르게 리액트 개발 환경을 구성할 수 있도록 도와주는 도구로, 다양한 사전설정과 편리한 기능을 제공한다.
👍🏻 React, ReactDOM, Webpack, Babel 등 필수 패키지 자동 설치
🔹 리액트 컴포넌트와 렌더링, 최신 자바스크립트 변환을 위한 Babel 같은 필수 도구들을 따로 설치하거나 CDN으로 연결하지 않아도 알아서 세팅해준다.
👍🏻 개발 서버 실행 및 코드 변경 시, 자동 새로고침 지원
🔹 코드를 수정하면 별도 새로고침 없이 바로 브라우저에 변경 사항이 반영되어 개발 속도가 빨라진다.
🌟 Create-React-App (CRA) 시작하기
1️⃣ Node.js 설치
📍Node.js 공식 사이트에서 운영체제에 맞는 버전 설치
🔹 설치 후, 명령 프롬프트(cmd)를 열고 node -v 명령어로 설치 여부와 버전 확인
🔹 npx 입력을 통해 npx가 정상적으로 동작하는지 확인
🔸 npx : 필요한 패키지를 따로 설치하지 않고도 바로 실행할 수 있게 도와주는 도구로, 제대로 작동하면 CRA 프로젝트 생성도 문제없이 할 수 있다.
2️⃣ 프로젝트 생성
🔹 명령 프롬프트(cmd)를 열고 npx create-react-app my-app 명령어를 입력하여 my-app 이라는 프로젝트를 생성 (my-app은 본인이 설정할 프로젝트명으로 설정하면 됨)
🔹 프로젝트 생성이 완료되면 React, ReactDOM 등 필수 패키지가 자동 설치되고, 프로젝트 폴더가 만들어진다.
🔹 VS Code로 바로 열고 싶다면 code my-app 명령어를 입력
나는 react-for-beginners라는 프로젝트 명으로 시작하지롱~
3️⃣ 개발 서버 실행
🔹 VS Code 내 터미널에서 npm start 명령어를 실행하면 개발용 서버가 실행되며, 자동으로 브라우저가 열린다.
4️⃣ 프로젝트 구조 및 초기 정리
🔹 src 폴더 : 애플리케이션 소스 코드가 위치하는 곳으로 프로젝트의 모든 파일을 관리할 폴더
🔹 기본 생성되는 파일 중 필요 없는 파일들은 삭제해도 무방 ex) App.test.js, App.css, index.css, logo.svg, reportWebVitals.js, setupTests.js
🔹 index.js와 App.js 파일을 중심으로 깔끔하게 코드 작성이 가능
