서론

리액트(React)는 현대 웹 애플리케이션 개발에서 중심적인 역할을 하는 자바스크립트 라이브러리 중 하나이다. 사용자 인터페이스를 구축하는 데 필수적인 도구로 자리 잡은 리액트는 그 효율성과 유연성으로 많은 개발자들에게 사랑받고 있다. 하지만, 모든 전문 기술이 그러하듯, 리액트 역시 기초를 탄탄히 다지는 것이 중요하다. 오늘은 리액트의 입문 단계인 'Create React App으로 설치된 리액트 기본 구조 살펴보기'와 'React App 실행해보기(npm run start)' 라는 두 강의를 듣고 그 내용을 복습하는 시간을 가지고자 한다.

본론

환급 챌린지 조건에 의해 최소 두 개의 강의를 들어야 한다. 다음 두 강의를 나누어 간략히 내용과 후기를 적으려 한다.

첫 번째 강의: Create React App으로 설치된 리액트 기본 구조 살펴보기
두 번째 강의: React App 실행해보기(npm run start)

첫 번째 강의: Create React App으로 설치된 리액트 기본 구조 살펴보기

이 강의에서는 리액트 프로젝트를 쉽게 시작할 수 있는 환경을 제공하는 'Create React App' 도구를 사용하여 리액트 애플리케이션을 생성하는 과정을 배웠다. 'Create React App'을 사용하면 복잡한 환경 설정 없이 몇 분 안에 리액트 개발 환경을 준비할 수 있다. 강의를 통해 생성된 프로젝트의 구조를 살펴보았는데, public 디렉토리와 src 디렉토리, 그리고 여러 설정 파일들을 포함하고 있는 것을 배웠다. 특히, src 디렉토리 안에는 애플리케이션의 주요 로직과 컴포넌트들이 들어 있음을 알 수 있었다. 다음은 npx create-react-app을 사용해 리액트 프로젝트를 설치했을 때 볼 수 있는 첫번째 html파일이다.

<div id="root"></div> 에 모든 리액트 컴포넌트들이 그려지게 된다.

두 번째 강의: React App 실행해보기(npm run start)

두 번째 강의에서는 첫 번째 강의를 통해 생성된 리액트 애플리케이션을 실제로 실행해보는 과정을 배웠다. npm run start 명령어를 통해 개발 서버를 시작하고, 브라우저에서 애플리케이션을 확인할 수 있었다. 이 과정에서 리액트 애플리케이션이 어떻게 브라우저에서 렌더링되는지, 그리고 개발 서버가 실시간으로 변경사항을 반영하여 화면에 나타내는 방식을 경험할 수 있었다. 비록 매우 기초적인 수준의 내용이었지만, 리액트 개발의 전체적인 흐름을 이해하는 데 도움이 되었다.

다음은 npx create-react-app을 사용해 리액트 프로젝트를 설치했을 때 실제 npm run start 명령어를 사용해줄 수 있게 도와주는 설정 파일이다.

결론

리액트의 기초를 다지는 것은 장기적인 개발 능력을 쌓는 데 있어 매우 중요하다. 오늘 배운 'Create React App'을 통한 리액트 애플리케이션의 기본 구조 파악과 애플리케이션 실행 방법은 리액트 개발의 입문 단계에서 반드시 숙지해야 할 필수 지식이다. 이러한 지식은 향후 보다 복잡한 리액트 프로젝트를 진행할 때 견고한 기반을 마련해 줄 것이다. 앞으로도 지속적인 학습을 통해 리액트의 다양한 기능과 최적의 사용 방법을 탐구해 나가야겠다.

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.

https://bit.ly/48sS29N