프로젝트 배포 및 React 기초

young-gue Park·2023년 2월 14일

JavaScript React

React

목록 보기

1/17

⚡ 프로젝트 배포 및 React 기초

📌 Projcet deploy

🔷 기본적으로 History API 기반의 SPA를 배포하려면 해당 서비스에서 404 에러에 대해 처리할 수 있는 옵션이 필요함.

서버에서 직접 호스팅하기
- 인프라 지식이 많이 필요하기 때문에 가장 어렵다.
- 하지만 할 줄 알아야 트러블 슈팅이 쉽고 문제 해결이 수월하다.
여러 클라우드 업체에서 제공하는 서버에서 직접 호스팅 하는 방법

⭐ aws S3 + cloudfront

S3: 파일만을 제공하는 서비스, 별도의 서버를 거치거나 하지 않음
CloudFront: 캐싱 서비스를 제공, 404 에러에 대해 처리를 해줌

⭐ github pages

무료!
정적 블로그 생성을 위해 사용하는 경우가 많다.
url도 보기 좋은 url로 생성됨

⭐ Firebase

NOSQL기반 데이터베이스, RealTime 데이터베이스를 제공한다.
호스팅 설정을 통해 서버와 비슷하게 이용할 수 있다.
기본적으로는 무료지만 일정 트래픽을 넘어서면 과금이 필요하다.

⭐ netlify

깃허브 등의 별도의 코드 저장소를 연동
필자는 이미 이용하고 있다. (개인 페이지, 프로젝트)

netlify를 이용하는 개인 페이지이다.

⭐ Vercel

netlify의 서버는 한국 서버가 없다. (사이트 접속이 느림)
반면 Vercel은 한국 서버가 있어서 빠르다.
netlify와 비교하여 사용법도 비슷하기 때문에 현재 한국에서는 가장 선호하는 방법

💡 FallBack
실패했을 때의 대안을 뜻한다. 404 error에 대한 FallBack을 위의 방법들은 각자 다른 방식으로 처리한다.

📌 React

⭐ React란?

개발을 돕기 위해 JS의 여러 모듈을 모은 Library
페이스북에서 제작, 2013년 5월에 처음 오픈 소스로 공개
한글 문서를 제공해주고 있음
방대한 문서의 양 덕에 시행착오에서 벗어나기 쉽고 안정적인 기술 스택이라고 할 수 있다.

⭐ React의 특징

리액티브 프로그래밍(Reactive Programming)

반응형 프로그래밍: 상태를 관찰하고 변화가 발생할 경우 연관된 곳에서 연산이 수행된다.

💡 엑셀의 스프레드시트를 생각하면 쉽다.

컴포넌트의 조합으로 View를 구성한다.

M V C 에서 V(View)만을 관리한다.
컴포넌트에 여러 요소를 담아 트리 구조로 구성하여 사용한다.

💡 레고 블럭을 조립하는 것과 비슷하다.

Virtual DOM

코드로 DOM Tree를 구현하여 필요한 부분만 한 번에 렌더링한다.
성능보다는 개발을 편하게 할 수 있도록 도입한 것이 react이다.

⭐ 기초적인 react app

웹-앱을 만들고 싶은 폴더 내에서 명령어를 입력한다.
npx 혹은 npm 혹은 yarn 명령어와 create-react-app 명령 이후 만들고 싶은 앱의 이름을 넣는다.

npx create-react-app first-app

💡 create-react-app

리액트 앱을 만들 수 있는 가장 빠른 방법

JSX라고 부르는 가상 DOM을 그려 return 시킨다.

🌟 생성되는 기본 구조

당장 구조만 봐서는 뭐가 뭔지 알기 쉽지가 않다. 아무 것도 수정하지 않은 상태에서 실행을 해보겠다.

npm start

🖨 화면

이 화면이 가장 기본적으로 구성되어있는 화면이다. 이제 조금의 JS 기초 지식을 곁들여서 App.js를 수정해보겠다.

🖥 App.js

import logo from './logo.svg';
import './App.css';

function App() {
  // 변수나 상수를 선언하고 {}안에 넣어 사용할 수 있다.
  const name = '리액트';
  // 조건식으로서 사용할 수도 있다.
  const showLink = true;
  const showLogo = 'show?';
  // 반복문 사용을 위한 상수
  const names = ['React', 'Vue', 'Angular'];
  return (
    // JSX
    // JSX에서는 이미 자바스크립트 내에서 예약어인 class 대신 className을 이용하여 클래스 이름을 선언한다.
    <div className="App">
      <header className="App-header">
        { 
          // 조건 사용
          showLogo === 'show' ?
          <img src={logo} className="App-logo" alt="logo" />
          : <h1>React</h1>
        } 
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        // 조건 사용 2
        {showLink && (
              <a
              className="App-link"
              href="https://reactjs.org"
              target="_blank"
              rel="noopener noreferrer"
            >
              Learn {name}
            </a>
          )}
          <ul>
            { // key 값(id)을 적어주어야 성능을 최적화할 수 있다.
              // item 리스트 안의 값들이 li 형식으로 반복되며 모두 출력된다.
              names.map(item => (
                <li key={item}>{item}</li>
              ))
            }
          </ul>
      </header>
    </div>
  );
}

export default App;