티스토리 뷰
먼저 react를 개발하기 앞서 react는 node.js 기반으로 되어있기 때문에 node.js를 설치해야합니다.
nodejs 다운로드 링크입니다.
운영체제에 맞게 설치해주세요!
https://nodejs.org/en/download/current
Download | Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
저는 윈도우라서 Windows Installer를 클릭하여 다운로드받아 설치했습니다.
설치가 완료되면 시작줄에서 Node라고 검색하여 Node.js command prompt 터미널 앱을 열어주세요.
터미널이 열리면 이제 react 프로젝트를 생성해봅니다.
프로젝트를 생성하는 명령어입니다.
start_app에는 원하는 프로젝트이름을 적어주시면 됩니다.
npx create-react-app start_app
설치가 완료되면 터미널이 열려있는 경로에 start_app 프로젝트 폴더가 생성됩니다.
start_app/src 폴더로 들어가서 App.js 파일을 열어보면
페이지에 React 로고를 보여주는 코드가 디폴트로 작성되어있습니다.
Nodejs 터미널에서 생성한 프로젝트 경로로 들어가서,
프로젝트를 실행해봅니다.
cd start_app
npm run start
프로젝트가 실행되면서 http://localhost:3000 URL이 자동으로 열립니다.
App.js 코드에 적혀있던 react 로고 이미지가 보이네요.
이렇게 프로젝트 생성 및 실행은 간단하게 끝났고
다음 포스팅에서는 React 주요 개념에 대해서 알아보고 간단한 예제 페이지들을 만들어보려고 합니다!
끝
'프로그래밍 > Frontend' 카테고리의 다른 글
| [React] React.js 튜토리얼 3- 이벤트 처리하기 (34) | 2024.01.02 |
|---|---|
| [React] React.js 튜토리얼 2- 주요 개념 살펴보기(JSX, Component, Props, State) (50) | 2023.12.09 |
| [openlayers] polygon vector layer 클릭 시 나타나는 기본스타일 삭제하기 (16) | 2023.11.30 |
| [openlayers] 지도 타일맵을 VWORLD로 변경하기 - 일반(Base), 위성(Satellite), 하이브리드(Hybrid) (13) | 2023.11.29 |
| [DataTables] ajax를 통해 동적 테이블 만든 뒤, CSV다운로드 가능하게 하는 방법 (3) | 2023.11.02 |
