React와 함께 웹 개발의 첫 걸음은 흥미로운 도전일 수 있습니다. 여기에 있으시다면, 개발 환경을 빠르고 효율적으로 설정하고 첫 프로젝트를 시작하는 방법을 배우고 싶어하는 것입니다. 이 안내서는 Vite를 빌드 툴로 사용하여 React 앱을 만드는 데 필요한 단계를 안내합니다.
주요 포인트
React 개발 환경을 설정하려면 Visual Studio Code, Node.js와 NPM이 필요합니다. 올바른 명령어와 툴을 사용하여 곧바로 첫 번째 React 앱을 만들고 브라우저에 표시할 수 있습니다.
단계별 안내
개발 환경 설정
실제 개발을 시작하기 전에 올바른 툴을 갖추고 있는지 확인해야 합니다. 먼저 Visual Studio Code를 설치해야 합니다. 마이크로소프트의 인기 있고 무료 개발 환경인 Visual Studio Code는 JavaScript 개발에 특화되어 있습니다. Visual Studio Code를 설치하려면 공식 웹사이트를 방문하고 다운로드 및 설치 지침을 따릅니다.
Visual Studio Code 외에도 JavaScript 런타임 환경인 Node.js와 패키지 관리자인 NPM이 필요합니다. Node.js는 Node.js 웹사이트에서 다운로드할 수 있습니다. 다운로드 페이지에서 LTS 버전(Long-Term Support)을 선택하여 안정적이고 검증된 버전을 받을 수 있습니다.
Node.js 및 NPM 설치 및 확인
Node.js를 설치한 후에는 올바르게 설치되었는지 확인해야 합니다. 터미널을 엽니다. Visual Studio Code에서 직접 할 수 있습니다. "터미널"을 클릭한 다음 "새 터미널"을 선택합니다. 터미널에서 npm -v 명령어를 입력합니다. 버전 번호가 나오지 않는다면 설치에 문제가 있을 수 있습니다.
Node.js가 제대로 작동하는지도 확인해야 합니다. 이를 위해 터미널에 node -v 명령어를 입력합니다. 두 명령어는 설치된 NPM 및 Node.js 버전을 표시해야 합니다.
Vite를 사용한 새 프로젝트 생성
다음 단계는 새 프로젝트를 생성하는 것입니다. npm create vite를 사용하고 앱의 이름을 입력하세요. 이 예시에서는 "할 일 앱"을 사용합니다. 이것은 여러 옵션을 제공하는 마법사를 실행하고, React 또는 다른 프레임워크를 사용할 지 선택하도록 물을 것입니다. "React"를 선택하세요.
이후에 React에 TypeScript를 사용할 지 묻는데, 초기에 TypeScript를 사용하지 않는 것이 좋으므로 표준 "React" 옵션을 선택하세요.
프로젝트 디렉터리로 이동
프로젝트가 성공적으로 생성되면 새로 만든 앱의 디렉터리로 이동해야 합니다. 이를 위해 cd todo-app 명령어를 사용하세요. 그곳에서 필요한 패키지를 설치해야 합니다. 터미널에 npm install 명령어를 입력하세요. 이 명령어는 React를 포함한 필요한 종속성을 모두 설치합니다.
개발 서버 실행
이제 재미있는 순간입니다: 개발 서버를 실행할 수 있습니다! npm run dev 명령어를 실행하세요. 이렇게 하면 Vite의 개발 서버가 시작될 것이며, 브라우저에서 앱을 볼 수 있는 URL이 제공됩니다.
최신 웹 브라우저를 열고 제공된 주소를 입력하세요. 로고가 회전하고 일부 텍스트를 볼 수 있으며, 카운터를 표시하는 버튼이 있어야 합니다.
앱 수정
기능에 대한 첫 인상을 얻기 위해 앱을 약간 수정할 수 있습니다. src/main.jsx 파일을 열고 App 컴포넌트의 텍스트를 변경하세요. 파일을 저장하고 페이지를 다시로드하지 않고도 브라우저에서 변경 사항이 즉시 반영되는 것을 관찰하세요. 이것은 Vite의 핫 리로딩이 얼마나 효율적으로 작동하는지를 보여줍니다 - 개발 중 빠른 피드백을 위한 훌륭한 기능입니다.
텍스트가 업데이트되어도 카운터가 유지되는 것에 주목하세요. 이것이 React의 장점 중 하나입니다: 사용자 인터페이스가 업데이트되어도 상태가 유지됩니다.
개요
당신은 개발 환경을 성공적으로 설정하고, Node.js와 NPM을 설치하고, 새로운 React 프로젝트를 만들고 브라우저에서 실행시켰습니다. Vite를 사용하여 React 앱을 설정하는 기초가 마련되었으며, 이제 첫 번째 애플리케이션을 시작할 수 있습니다.
자주 묻는 질문
Vite가 무엇인가요?Vite는 JavaScript를 위한 현대적인 빌드 도구로, 빠른 개발 서버와 최적화된 번들링 기능을 제공합니다.
어떤 Node.js 버전을 설치해야 하나요?Node.js의 LTS 버전(Long-Term Support)을 설치하는 것이 좋습니다.
React 개발에 Vite가 필요한가요?Vite는 필수는 아니지만 개발 속도와 효율성 측면에서 장점을 제공합니다.
React는 JavaScript만 지원하나요?React는 TypeScript 및 기타 JavaScript 방언도 지원하지만 시작하기에는 JavaScript로 충분합니다.
다른 편집기에서 React를 사용할 수 있나요?네, 모든 코드 편집기나 IDE에서 React를 사용할 수 있지만 Visual Studio Code를 권장하는 경우가 많습니다.
