메뉴 닫기
  • Home
  • React 프로젝트 실습: 리액트 기초 개념과 서버 실행 가이드
    •

React 프로젝트 실습: 리액트 기초 개념과 서버 실행 가이드

원진 김 0 댓글

React 프로젝트 실습: 리액트 기초 개념과 서버 실행 가이드

React 소개

이번 React 프로젝트 실습에서는 리액트의 기본 개념부터 실제 서버에서 실행하는 방법까지 단계별로 살펴봅니다.

처음 React를 배우는 분들도 쉽게 따라 할 수 있도록

실제 환경에서 애플리케이션을 구동하는 실습 과정을 함께 진행해볼 거예요.

1. React란?

**React(리액트)**는 **Meta(구 페이스북)**에서 만든 사용자 인터페이스(UI) 라이브러리입니다.

웹 애플리케이션의 화면을 효율적으로 그리기 위해 설계되었으며,

지금은 전 세계적으로 가장 널리 사용되는 프론트엔드 도구 중 하나입니다.

React의 주요 특징

1) 컴포넌트 기반 구조

화면을 여러 개의 작은 단위(컴포넌트)로 나누어 개발할 수 있습니다.

이 방식은 코드 재사용성을 높이고 유지보수를 쉽게 만들어 줍니다.

2) Virtual DOM

React는 실제 DOM 대신 가상의 DOM을 사용해

변경된 부분만 빠르게 업데이트하기 때문에 성능이 매우 뛰어납니다.

3) 단방향 데이터 흐름

데이터가 한 방향으로만 흐르기 때문에,

애플리케이션의 상태 관리가 명확하고 오류를 줄일 수 있습니다.

4) 풍부한 생태계

Redux, React Router, Next.js 등 다양한 라이브러리와 쉽게 연동할 수 있습니다.

React는 프레임워크가 아니라 UI 제작에 특화된 라이브러리이기 때문에,

개발자는 원하는 백엔드나 빌드 환경을 자유롭게 선택할 수 있습니다.

2. React 개발 환경 준비하기

React 프로젝트를 만들려면 Node.js와 npm이 설치되어 있어야 합니다.

아래 명령으로 버전을 확인하세요.

node -v
npm -v
node 버전 확인

버전이 표시되지 않는다면, Node.js를 설치한 후 진행하면 됩니다.

3. React 프로젝트 생성하기

최근 React 공식 문서에서는 Vite나 Next.js를 권장하지만,

이번 실습에서는 create-react-app을 사용해 가장 기본적인 환경을 만들어보겠습니다.

 
npx create-react-app intro-page
react 프로젝트 설치

설치 중 경고 메시지가 나타날 수 있지만,

프로젝트 생성과 실행에는 영향을 주지 않습니다.

4. 프로젝트 구조 살펴보기

React 프로젝트를 생성하면 다음과 같은 구조가 만들어집니다.

 
intro-page/

├── node_modules/

├── public/

├── src/

├── package.json

└── README.md

  • src 폴더: 실제 React 코드가 들어갑니다.

  • public 폴더: 정적 파일과 HTML이 포함됩니다.

  • package.json: 프로젝트의 설정 및 의존성 정보를 담고 있습니다.

5. 자기소개 페이지 만들기

이제 기본 예제 코드를 삭제하고,

간단한 자기소개 페이지를 만들어봅시다.

src/App.js 파일의 내용을 아래 코드로 교체하세요.

 

import React from “react”;

 

function App() {

const profile = {

name: “김원진”,

job: “서버 관리자”,

intro: “안녕하세요! 안정적인 시스템 운영과 서버 최적화를 위해 노력하는 서버 관리자 김원진입니다.”,

skills: [

“Windows Server 관리”,

“IIS 설정 및 트러블슈팅”,

“리눅스 서버 환경 운영”,

“DB 및 네트워크 모니터링”,

“보안 정책 관리”,

],

goal: “안정성과 확장성을 모두 갖춘 인프라를 설계하고 운영하는 것이 제 목표입니다.”,

email: “test@smileserv.com”,

};

 

return (

<div style={styles.container}>

<header style={styles.header}>

<h1>👋 {profile.name} 입니다</h1>

<h2>{profile.job}</h2>

<p style={styles.intro}>{profile.intro}</p>

</header>

 

<section style={styles.section}>

<h3>🧰 보유 기술</h3>

<ul>

{profile.skills.map((skill, index) => (

<li key={index}>{skill}</li>

))}

</ul>

</section>

 

<section style={styles.section}>

<h3>🎯 목표</h3>

<p>{profile.goal}</p>

</section>

 

<footer style={styles.footer}>

<p>📧 이메일: {profile.email}</p>

<p>© 2025 Kim Wonjin</p>

</footer>

</div>

);

}

 

const styles = {

container: {

fontFamily: “Pretendard, sans-serif”,

backgroundColor: “#f2f5f9”,

color: “#2d3436”,

minHeight: “100vh”,

padding: “40px”,

},

header: {

textAlign: “center”,

borderBottom: “2px solid #74b9ff”,

paddingBottom: “20px”,

},

intro: {

fontSize: “18px”,

marginTop: “10px”,

color: “#636e72”,

},

section: {

marginTop: “30px”,

backgroundColor: “#ffffff”,

padding: “20px”,

borderRadius: “12px”,

boxShadow: “0 2px 8px rgba(0,0,0,0.1)”,

},

footer: {

marginTop: “40px”,

textAlign: “center”,

color: “#636e72”,

fontSize: “14px”,

},

};

 

export default App;

저장 후 npm start 명령을 실행하면

브라우저에서 자기소개 페이지가 정상적으로 표시됩니다.

6. 리눅스 서버에서 React 실행하기

로컬이 아닌 리눅스 서버 환경에서 React 애플리케이션을 실행하려면

포트를 직접 지정해 주어야 합니다.

예를 들어 5000번 포트를 사용하려면 아래 명령을 입력합니다.

 
nohup bash -c "PORT=5000 npm start" > app.log 2>&1 &

이 명령은 React 개발 서버를 백그라운드에서 실행하며,

로그는 app.log 파일에 기록됩니다.

실행이 완료되면

http://서버IP:5000 으로 접속해 확인할 수 있습니다.

react 구성 화면

7. React를 백엔드처럼 항상 실행하기

서버를 재시작해도 React 앱이 계속 실행되게 하려면

pm2를 사용하는 방법이 가장 안정적입니다.

 
npm install -g pm2
cd /root/intro-page
PORT=5000 pm2 start npm --name "react-intro" -- start
pm2 save

이 설정을 적용하면 서버 재부팅 후에도

React 애플리케이션이 자동으로 다시 실행됩니다.

8. React 프로젝트 배포하기

React는 개발 서버뿐 아니라 정적 사이트 형태로도 배포할 수 있습니다.

다음 명령을 통해 최적화된 빌드 파일을 생성해보세요.

 
npm run build

빌드가 완료되면 build 폴더 안에

HTML, CSS, JS 파일이 모두 압축된 형태로 만들어집니다.

이 폴더를 Nginx 또는 Apache 웹 서버의 루트 디렉터리에 배치하면

외부 사용자에게 React 앱을 서비스할 수 있습니다.

9. 마무리

이번 글에서는 React의 개념, 프로젝트 생성 과정,

그리고 리눅스 서버에서 실행 및 배포 방법까지 살펴봤습니다.

React는 단순한 UI 도구를 넘어

프론트엔드 개발의 구조를 완전히 바꿔 놓은 라이브러리입니다.

처음에는 조금 낯설 수 있지만,

한 번 구조를 이해하면 대규모 애플리케이션도 효율적으로 관리할 수 있습니다.

다음에는 React Router를 이용한 페이지 라우팅,

또는 API 연동(fetch, axios) 기능을 추가해보며

더 실무적인 React 개발을 연습해보세요.

이번 React 프로젝트 실습을 통해 리액트의 기초를 익히고 서버 운영 감각을 함께 다져보세요.

 

더 자세한 내용은 React 공식 문서에서 확인할 수 있습니다.

 

서버에서 React를 효율적으로 운영하려면 Node.js 환경 이해가 중요합니다.

Node.js 설치 및 설정

답글 남기기

이메일 주소는 공개되지 않습니다.