React 처음 세팅하고 localhost에서 띄워보기.

시작하기 전 필요한 준비사항

 

React를 처음 설치하려면 Node.js와 npm(Node Package Manager)이 필요하다. 

이 글에서는 Node.js와 npm의 설치 방법과 React 프로젝트를 생성하는 방법에 대해 설명할 것이다.

 

Node.js 설치 및 확인

 

Node.js는 자바스크립트 런타임으로, React와 같은 라이브러리를 사용하여 웹 애플리케이션을 개발할 때 필요하다. 
Node.js를 설치하려면 다음 단계를 따르자.

 

Node.js 공식 사이트에 접속한다.

https://nodejs.org/

Node.js

 

LTS 버전을 다운로드하고 설치한다.
설치가 완료되면 터미널(또는 명령 프롬프트)을 열고 다음 명령어를 입력하여 Node.js와 npm이 제대로 설치되었는지 확인한다

 

node -v
npm -v

 

최신 버전과, 이전에 설치한 나의 버전 체크

 

create-react-app으로 프로젝트 생성

React  프로젝트를 생성하려면 create-react-app이라는 공식 도구를 사용한다.

이 도구를 사용해서 React 프로젝트의 기본 구조와 필요한 의존성이 자동으로 설정된다.

다음 명령어를 터미널에서 입력하여 프로젝트를 생성하자.

 

npx create-react-app my-app
cd my-app

 

설치하는데 시간이 좀 걸린다.. 커피한잔의 여유를 갖자..

 

Happy hacking이라고 뜨면 완료된것이다.

 

이제 visual studio code나 다른 ide를 통해서 프로젝트를 열어보자.

 

필자는 Visual studio code로 열었다.

 

다음과같이 패키지가 자동 완성되어있다면 성공적인것이다.

 

간략하게 저 폴더안에 있는 내용물을 설명하자면,

 

• node_modules: 프로젝트에서 사용되는 외부 패키지가 설치되는 곳이다.
• public: 웹 서버에서 호스팅할 정적 파일들이 위치한다.
• src: 애플리케이션의 소스 코드가 저장되는 곳이다.
• package.json: 프로젝트의 메타 정보와 의존성 정보가 담긴 파일이다.

 

이제 실행을 해보자

 

 

첫 번째 React 컴포넌트 만들기

'src' 폴더 안에 있는 App.js를 열어보자.

 

이런식으로 적혀있지만, 어려울 내용이 아니다.

어느정도 익숙해지면 그런 소스였구나 싶을것이고, 쉽게 생각해보자.

 

일단 저대로 실행해도 좋지만, React 아이콘이 빙빙 도는것보다 그냥 내가 쓰고싶은 말을 한번 작성해보자.

 

import React from "react";
import "./App.css";

function App() {
  return (
    <div className="App">
      <h1>이제부터 시작해보는 React 페이지 구성하기</h1>
      <p>
        React로 배워보는 UX/UI 디자인 실력 향상
      </p>
    </div>
  );
}

export default App;

 

이제 프로젝트를 실행해보자.

 

프로젝트 실행 및 확인

프로젝트를 실행하려면 터미널에 다음 명령어를 입력한다.

 

npm start

 

Visual studio code에서는 상단에 Terminal -> New Terminal 해서 밑에 창이 뜨면 저 명령어를 입력하자.

 

이 명령어를 실행하면 웹 브라우저가 자동으로 열리고 개발하려는 서버에 자동으로 접속된다.

만약에 열리지 않는다면 위 local 주소인 http://localhost:3000에 접속해보자.

 

아래와 같이 잘 나오는지 확인해보면 된다.

 

 

React 설치 및 기본 구성에 대해서 간단하게 알아보았다.

앞으로도 React를 이용한 웹 애플리케이션 개발을 계속 진행하여 더 많은 기능과 컴포넌트를 만들어 보자!