[테디베어 코딩공부] 제2주차 React 완벽 가이드: 프레임워크 없이 시작하기

티스토리 뷰

하루하루 공부하는 테디베어/React 공부하기

[테디베어 코딩공부] 제2주차 React 완벽 가이드: 프레임워크 없이 시작하기 – 공식 문서와 프로젝트 설정

포근한테디 2024. 12. 22. 15:55

728x90

ReactJS 강의 2: 프레임워크 없이 시작하기 – 공식 문서와 프로젝트 설정

728x90

[테디베어 코딩공부] 제1주차 React 완벽 가이드: 개발 배경부터 핵심 개념까지

제1주차 React 완벽 가이드: 개발 배경부터 핵심 개념까지1. React의 개발 배경React는 페이스북의 소프트웨어 엔지니어인 조던 월케(Jordan Walke)가 처음 개발했습니다. React는 2011년 페이스북의 뉴스피

teddybearjobstory.tistory.com

2024.12.11-[GPT란 무엇이며 왜 혁신적인가?] GPT AI 기본 개념 정리 및 활용 전략 완벽 가이드

[GPT란 무엇이며 왜 혁신적인가?] GPT AI 기본 개념 정리 및 활용 전략 완벽 가이드

[GPT란 무엇이며 왜 혁신적인가?] GPT AI 기본 개념 정리 및 활용 전략 완벽 가이드목차서론본문GPT란 무엇인가?언어 모델(Language Model)의 기본 원리Transformer 아키텍처: GPT 혁신의 핵심사전 학습(Pre-tra

teddybearjobstory.tistory.com

2024.12.19-"GPT-1에서 GPT-4까지: 언어 모델의 진화 과정과 OpenAI의 비전"

"GPT-1에서 GPT-4까지: 언어 모델의 진화 과정과 OpenAI의 비전"

"GPT-1에서 GPT-4까지: 언어 모델의 진화 과정과 OpenAI의 비전"목차들어가며: GPT 모델 발전의 의의GPT 이전의 언어모델 연구 흐름과 한계점GPT-1: 시초를 알린 Transformer 기반 언어 모델3.1 GPT-1의 탄생 배

teddybearjobstory.tistory.com

서론

리액트(React)는 현대 웹 개발에서 가장 널리 사용되는 자바스크립트 라이브러리 중 하나로, 효율적이고 유연한 사용자 인터페이스(UI) 구축을 가능하게 합니다. 이번 2강에서는 리액트를 시작하는 데 필요한 공식 문서 소개와 함께, 프레임워크 없이 리액트를 직접 설치하고 설정하는 방법을 상세히 알아보겠습니다. 이를 통해 리액트의 기본 구조와 개발 환경을 깊이 있게 이해하고, 향후 더 복잡한 프로젝트나 다양한 프레임워크를 활용한 개발로 나아갈 수 있는 기반을 마련할 수 있습니다.

본론

리액트 공식문서 소개

리액트 공식문서는 리액트 학습과 개발에 필수적인 자료로, 최신 정보와 베스트 프랙티스를 제공합니다. 공식 사이트은 https://react.dev/이며, 한국어로도 지원되어 https://ko.react.dev/에서 확인할 수 있습니다. 공식 문서는 다음과 같은 섹션으로 구성되어 있어, 초보자부터 전문가까지 다양한 수준의 개발자가 참고할 수 있습니다:

Getting Started: 리액트 프로젝트를 시작하는 기본적인 방법을 안내합니다.
Main Concepts: 컴포넌트, 상태 관리, 라이프사이클 등 리액트의 핵심 개념을 설명합니다.
Advanced Guides: 컨텍스트 API, 고차 컴포넌트, 코드 분할 등 고급 주제를 다룹니다.
API Reference: 리액트의 다양한 API에 대한 상세한 설명을 제공합니다.
Hooks: 리액트의 훅 시스템을 활용한 상태 관리와 사이드 이펙트 처리 방법을 소개합니다.

또한, 레거시 문서도 제공되지만, 이는 옛날 버전 중심으로 작성되어 있어 초보자에게는 최신 문서를 권장드립니다. 레거시 문서는 https://ko.legacy.reactjs.org/에서 확인할 수 있습니다. 최신 문서는 지속적으로 업데이트되며, 새로운 기능과 개선 사항을 반영하고 있어 최신 기술 트렌드를 따라가기에도 적합합니다.

리액트 시작하기

리액트는 사용자 인터페이스를 구축하기 위한 자바스크립트 라이브러리로, 재사용 가능한 UI 컴포넌트를 만들어 사용하는 것을 목표로 합니다. 리액트의 주요 특징은 다음과 같습니다:

컴포넌트 기반 아키텍처: UI를 독립적이고 재사용 가능한 컴포넌트로 나누어 관리할 수 있습니다.
선언적 프로그래밍: 상태(state)와 속성(props)을 기반으로 UI를 선언적으로 정의할 수 있습니다.
Virtual DOM: 효율적인 UI 업데이트를 위해 가상 DOM을 사용하여 실제 DOM 조작을 최소화합니다.
풍부한 생태계: 다양한 라이브러리와 도구들이 리액트와 호환되어, 개발 생산성을 높일 수 있습니다.

리액트는 ES6(ES2015) 모듈 시스템을 사용하여 개발되며, 모듈화된 코드를 통해 유지보수성과 재사용성을 높입니다. 모듈 시스템은 import와 export 구문을 사용하여 코드 모듈 간에 종속성을 관리하고, 코드를 논리적으로 분리하여 개발할 수 있게 합니다.

프레임워크 없는 리액트 프로젝트 설정

프레임워크 없이 리액트를 시작하려면 다음 단계를 따라야 합니다. 이 과정에서는 기본적인 설정부터 번들링 도구 Vite를 사용한 고급 설정까지 다룹니다.

1. 리액트와 리액트 돔 라이브러리 설치

먼저, 프로젝트 디렉토리를 생성하고 해당 디렉토리로 이동한 후, 리액트와 리액트 돔 라이브러리를 설치합니다. 리액트 돔은 리액트를 실제 DOM과 연결하는 역할을 합니다.

# 프로젝트 디렉토리 생성 및 이동
mkdir my-react-app
cd my-react-app

# npm 초기화 (package.json 생성)
npm init -y

# 리액트와 리액트 돔 설치
npm install react react-dom

2. index.html 파일 작성

프로젝트의 진입점이 되는 index.html 파일을 작성합니다. 이 파일은 리액트 애플리케이션이 렌더링될 DOM 노드를 포함하고, 리액트 스크립트를 불러옵니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>React App</title>
</head>
<body>
  <!-- 리액트가 렌더링될 노드 -->
  <div id="root"></div>
  
  <!-- 리액트 애플리케이션을 불러오는 스크립트 -->
  <script type="module" src="index.jsx"></script>
</body>
</html>

3. index.jsx 파일 작성

index.jsx 파일에서는 리액트 컴포넌트를 정의하고, 이를 DOM에 렌더링하는 코드를 작성합니다. 최신 리액트에서는 createRoot API를 사용하여 애플리케이션을 렌더링합니다.

import { createRoot } from 'react-dom/client';
import React from 'react';

// 간단한 리액트 컴포넌트 정의
function App() {
  return (
    <h1>Hello from React!</h1>
  );
}

// DOM 노드 가져오기
const domNode = document.getElementById('root');

// 리액트 루트 생성
const root = createRoot(domNode);

// 컴포넌트 렌더링
root.render(<App />);

번들 도구 Vite 설치 및 설정

리액트 프로젝트를 효과적으로 개발하기 위해서는 번들 도구가 필요합니다. 번들 도구는 여러 개의 모듈을 하나의 파일로 묶어주어, 브라우저가 효율적으로 로드할 수 있도록 도와줍니다. 리액트 공식문서에서는 웹팩(Webpack)보다 빠르고 간편한 번들링 도구인 Vite를 추천합니다.

1. Vite 및 리액트 플러그인 설치

Vite는 빠른 빌드 속도와 간편한 설정을 제공하는 현대적인 번들러입니다. 리액트 프로젝트에 Vite를 통합하기 위해 Vite와 리액트 플러그인을 설치합니다.

# Vite 및 리액트 플러그인 설치
npm install vite @vitejs/plugin-react --save-dev

2. vite.config.js 파일 생성 및 설정

Vite의 설정 파일인 vite.config.js를 생성하고, 리액트 플러그인을 설정합니다. 이를 통해 Vite가 리액트 파일을 올바르게 처리할 수 있게 됩니다.

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000, // 개발 서버 포트 설정
    open: true, // 서버 시작 시 브라우저 자동 열기
  },
  build: {
    outDir: 'dist', // 빌드 결과물 디렉토리 설정
  },
});

3. package.json에 실행 스크립트 추가

package.json 파일에 Vite를 실행하기 위한 스크립트를 추가합니다. 이를 통해 개발 서버를 간편하게 시작할 수 있습니다.

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "cli": "mkdir abc", // 예시 커스텀 스크립트
    "start": "npm run dev && npm run cli"
  }
}

dev: 개발 서버를 시작합니다.
build: 프로덕션 빌드를 생성합니다.
serve: 빌드된 애플리케이션을 미리보기로 실행합니다.
cli: 예시로 추가된 커스텀 스크립트입니다.
start: 여러 스크립트를 동시에 실행하는 커스텀 스크립트입니다.

개발 환경 실행하기

설정을 완료한 후, 다음 명령어로 개발 서버를 실행할 수 있습니다. Vite는 빠른 핫 리로딩(HMR)을 지원하여 코드 변경 시 실시간으로 브라우저에 반영됩니다.

npm run dev

명령어를 실행하면 Vite가 개발 서버를 시작하고, 기본적으로 http://localhost:3000 주소에서 애플리케이션을 확인할 수 있습니다. 브라우저에서 해당 주소로 접속하여 리액트 컴포넌트가 제대로 렌더링되는지 확인합니다. 변경 사항이 자동으로 반영되므로, 개발 중에 빠르게 피드백을 받을 수 있습니다.

브라우저에서 리액트 컴포넌트 확인

개발 서버가 정상적으로 실행되었다면, 브라우저에서 http://localhost:3000에 접속하여 "Hello from React!"라는 메시지가 표시된 것을 확인할 수 있습니다. 이는 App 컴포넌트가 성공적으로 렌더링된 결과입니다. 이후 컴포넌트를 추가하거나 수정하면서 애플리케이션을 확장해 나갈 수 있습니다.

React Developer Tools 설치

리액트 개발을 더욱 효율적으로 하기 위해서는 React Developer Tools를 브라우저 확장 프로그램으로 설치하는 것을 권장합니다. 이 도구는 리액트 컴포넌트의 구조를 시각적으로 확인하고, 각 컴포넌트의 상태(state)와 속성(props)을 쉽게 관리할 수 있게 해줍니다.

React Developer Tools 설치 및 사용 방법

설치
- Chrome: Chrome 웹 스토어에서 "React Developer Tools"를 검색하여 설치합니다.
- Firefox: Firefox 애드온에서 "React Developer Tools"를 검색하여 설치합니다.
사용
- 브라우저에서 개발자 도구를 열고, "Components" 탭을 클릭합니다.
- 현재 페이지에서 렌더링된 리액트 컴포넌트 트리를 시각적으로 확인할 수 있습니다.
- 각 컴포넌트를 클릭하면 해당 컴포넌트의 상태(state)와 속성(props)을 상세히 볼 수 있습니다.
- 상태 변경이나 속성 수정 등을 통해 애플리케이션의 동작을 실시간으로 테스트하고 디버깅할 수 있습니다.

React Developer Tools는 리액트 애플리케이션의 구조를 이해하고, 상태 관리 및 성능 최적화에 큰 도움을 줍니다. 따라서 리액트 개발 시 필수적인 도구로 활용할 것을 권장드립니다.

추가 설정 및 최적화

기본적인 리액트 프로젝트 설정 후, 개발 생산성과 코드 품질을 높이기 위해 추가적인 설정과 최적화를 진행할 수 있습니다. 여기서는 Babel 설정, ESLint 및 Prettier 설정, 환경 변수 관리에 대해 다룹니다.

1. Babel 설정

Babel은 최신 자바스크립트 문법을 구형 브라우저에서도 호환 가능하게 변환해주는 트랜스파일러입니다. Vite는 기본적으로 Babel을 내장하고 있어 별도의 설정이 필요 없지만, 추가적인 플러그인이나 프리셋을 사용하고자 할 때는 설정이 필요할 수 있습니다.

# Babel 관련 패키지 설치
npm install @babel/core @babel/preset-env @babel/preset-react --save-dev

// babel.config.json
{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

2. ESLint 및 Prettier 설정

코드 품질을 유지하고 일관된 코드 스타일을 적용하기 위해 ESLint와 Prettier를 설정할 수 있습니다.

# ESLint 및 관련 플러그인 설치
npm install eslint eslint-plugin-react eslint-plugin-react-hooks --save-dev

# Prettier 설치
npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev

// .eslintrc.json
{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:prettier/recommended"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["react", "prettier"],
  "rules": {
    "prettier/prettier": "error",
    "react/react-in-jsx-scope": "off"
  }
}

// .prettierrc
{
  "singleQuote": true,
  "semi": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}

3. 환경 변수 관리

프로젝트에서 다양한 환경(개발, 테스트, 프로덕션)에 따라 설정을 다르게 해야 할 때 환경 변수를 활용할 수 있습니다. Vite는 .env 파일을 통해 환경 변수를 쉽게 관리할 수 있게 해줍니다.

# .env 파일 생성
VITE_API_URL=https://api.example.com
VITE_APP_TITLE=My React App

// 예시: 환경 변수 사용
const apiUrl = import.meta.env.VITE_API_URL;
const appTitle = import.meta.env.VITE_APP_TITLE;

function App() {
  return (
    <div>
      <h1>{appTitle}</h1>
      <p>API URL: {apiUrl}</p>
    </div>
  );
}

환경 변수는 보안상 민감한 정보를 포함하지 않도록 주의해야 하며, .env 파일은 .gitignore에 추가하여 버전 관리 시스템에 포함되지 않도록 설정하는 것이 좋습니다.

결론

이번 강의를 통해 리액트 공식문서를 활용하여 프레임워크 없이 리액트 프로젝트를 설정하는 방법을 배웠습니다. Vite와 같은 현대적인 번들 도구를 사용함으로써 개발 환경을 신속하게 구축하고, React Developer Tools를 통해 디버깅과 개발 효율성을 높일 수 있습니다. 추가적으로 Babel, ESLint, Prettier 등의 도구를 설정하여 코드 품질을 유지하고, 환경 변수를 관리함으로써 다양한 개발 환경에 유연하게 대응할 수 있습니다. 이러한 기본 설정을 마스터한 후에는 더 복잡한 프로젝트나 프레임워크를 활용한 개발로 나아갈 수 있으며, 리액트 생태계 내에서 다양한 도구와 라이브러리를 활용하여 효율적이고 유지보수하기 쉬운 애플리케이션을 개발할 수 있습니다.

728x90

저작자표시 비영리 변경금지

250x250

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

네이버블로그

TAG more

« 2025/01 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

글 보관함

테디베어의 잡지식세상

티스토리 뷰