강의

멘토링

로드맵

Inflearn brand logo image

인프런 커뮤니티 질문&답변

hrhan님의 프로필 이미지
hrhan

작성한 질문수

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

4.3) React App 구동원리 살펴보기

책과 강의 병행 중 서로 다른 내용이 있어요

작성

·

112

0

안녕하세요 책과 강의를 병행하고 있습니다!

4장 리액트 앱 만들기, 5장 실습부분을 진행하고 있는데요

책에서는 create-react-app 으로 리액트 앱을 만들고, 강의는 vite로 앱을 만들고 있습니다. 또한 책에서는 main.jsx대신 index.js와 bundle.js가 생성된다고 하는데 강의를 따라가면 되는걸까요 ??

분명 책과 강의의 차이점에 대해 어딘가에 정리되어있을 것 같은데.. 찾을 수가 없어서 질문드립니다!

답변 2

0

이정환 Winterlood님의 프로필 이미지
이정환 Winterlood
지식공유자

안녕하세요 이정환입니다.

맞습니다 도서 집필 이후에 강의가 한번 리뉴얼 되어서 도서는 CRA를 기준으로, 강의는 Vite를 기준으로 진행됩니다. 다만 둘 간의 차이는 크게 없기 때문에 프로젝트를 생성하고 구성 요소를 살펴보는 과정 중에만 강의를 기준으로 최신버전이라고 생각하고 진행하시면 됩니다! 그외의 React.js의 기본적인 기능은 모두 동일합니다.

hrhan님의 프로필 이미지
hrhan
질문자

감사합니다!

0

안녕하세요, 인프런 AI 인턴입니다. hrhan님, 질문을 남겨주셔서 감사합니다!

리액트 프로젝트를 시작하면서 책과 강의 간에 서로 다른 도구와 파일 명명 규칙을 마주하실 수 있습니다. 이는 React 생태계의 발전과 다양한 도구의 도입으로 인해 발생하는 일반적인 차이입니다.

Vite와 Create-React-App (CRA)의 차이

  1. Vite: Vite는 빠른 개발 환경을 제공하기 위해 설계된 새로운 도구로, ESM 기반의 번들링을 통해 속도 면에서 유리합니다. 최근 들어 많은 프로젝트가 Vite를 활용하여 프로젝트를 세팅하고 있습니다.

  2. Create-React-App (CRA): CRA는 리액트 프로젝트를 쉽게 시작할 수 있는 전통적인 도구로, 초기 설정을 간편하게 해주지만, 번들링 속도가 상대적으로 느릴 수 있습니다.

main.jsx와 index.js

  • main.jsx (or .js): Vite를 사용하는 경우 보편적으로 사용하는 파일명입니다. 이 파일은 주로 Vite 프로젝트의 진입점(entry point)으로 설정됩니다.

  • index.js: CRA를 사용할 때 주로 생성되는 파일로, 프로젝트의 진입점이 됩니다. 전통적인 방식의 리액트 프로젝트에서 많이 볼 수 있습니다.

이어서 강의를 따라가도 될까요?

강의를 따라가시는 것이 문제 없습니다. 두 도구 모두 리액트 애플리케이션을 개발하는 데 있어서 큰 차이가 없기 때문에, 책과 강의에서 제공하는 개념과 실습 과정의 가장 핵심적인 부분은 동일합니다. 다만, 강의에서 소개하는 Vite의 장점들을 익혀보면서 새로운 작업 방식도 체험해보시는 것을 추천드립니다.

유사한 문의로 Vite와 CRA를 비교하여 설명한 글이 있으니 참고하시면 좋겠습니다. 이 링크에서는 Vite와 CRA의 차이점, 사용 장점 등을 자세하게 설명해주고 있어, 도움이 될 것입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

hrhan님의 프로필 이미지
hrhan

작성한 질문수

질문하기