2. react.js 프로젝트 만들기
1) 소개
리액트(React)는 Facebook에서 개발한 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리입니다.
Vue.js와 동일하게 반응형 웹페이지를 제작하기 쉬우며, 컴포넌트 기반 아키텍처를 기반으로 하여 재사용 가능한 UI 조각을 만들어 복잡한 UI를 구축하는 데 용이합니다.
React는 가상 DOM을 사용하여 효율적으로 업데이트를 관리하며, 이를 통해 성능을 최적화합니다.
2) 프로젝트생성방법
React.js 프로젝트를 생성하는 방법을 단계별로 설명하겠습니다.
1) Node.js 설치
저 컴퓨터에 Node.js를 설치해야 합니다. Node.js는 JavaScript 런타임 환경으로, Create React App을 실행하는 데 필요합니다.
Node.js를 설치하는 방법은 다음과 같습니다.
아래 페이지 참조해서 설치해 줍니다.
2) Visual Studio Code 설치
다음으로, Visual Studio Code(VS Code)를 설치합니다. VS Code는 강력한 기능을 제공하는 코드 편집기로, React 개발에 매우 유용합니다.
VS Code 설치 방법은 다음과 같습니다:
Visual Studio Code 공식 웹사이트에서 운영체제에 맞는 설치 파일을 다운로드합니다.
설치 파일을 실행하고 설치 과정을 완료합니다.
3) 프로젝트 디렉토리 생성
프로젝트를 생성할 디렉토리를 만듭니다. 터미널에서 다음 명령어를 실행하여 디렉토리를 생성할 수 있습니다:
mkdir my-react-app
cd my-react-app
여기서 my-react-app은 프로젝트 디렉토리 이름입니다. 원하는 이름으로 변경할 수 있습니다.
4) Create React App 설치
Create React App은 React 애플리케이션을 쉽게 설정할 수 있도록 도와주는 도구입니다.
터미널에서 다음 명령어를 실행하여 Create React App을 전역으로 설치합니다:
npm install -g create-react-app
5) React 프로젝트 생성
Create React App을 설치한 후, 다음 명령어를 실행하여 React 프로젝트를 생성합니다:
여기서 blog_app은 프로젝트 이름입니다. 원하는 이름으로 변경할 수 있습니다.
명령어를 실행하면 프로젝트가 생성되고, 필요한 모든 파일과 디렉토리가 자동으로 설정됩니다.
6) 프로젝트 실행
생성된 프로젝트 디렉토리로 이동한 후, 다음 명령어를 실행하여 프로젝트를 실행합니다:
> cd blog_app
> npm start
명령어를 실행하면 개발 서버가 시작되고, 브라우저에서 애플리케이션이 자동으로 열립니다.
에러? 프로젝트 생성 된 디렉토리로 이동해야합니다. > cd 프로젝트명(blog_app)
3) 실행화면
다시 실행
> npm start
기본적으로 http://localhost:3000에서 애플리케이션을 확인할 수 있습니다.
기본 화면에는 "Edit src/App.js and save to reload."라는 메시지가 표시됩니다.
이는 src/App.js 파일을 편집하고 저장하면 애플리케이션이 자동으로 새로 고쳐진다는 것을 의미합니다.
React 프로젝트를 생성하고 실행하는 과정은 비교적 간단합니다.
Node.js와 Create React App을 사용하면 쉽게 React 애플리케이션을 설정할 수 있으며, VS Code와 같은 강력한 코드 편집기를 사용하여 개발 효율성을 높일 수 있습니다.
이제 기본 구조를 이해한 후, 이 구조를 바탕으로 원하는 기능을 추가하고, 커스터마이징할 수 있습니다.
React를 사용하여 멋진 웹 애플리케이션을 개발해 보세요!
질문이 있거나 도움이 필요하시면 언제든지 댓글을 남겨주세요.
읽어주셔서 감사합니다! 😊