[포트폴리오 제작 과정] 환경 설정(React와 TypeScript를 사용하는 이유)

먼저, 나는 React, TypeScript를 기반으로 CSS 스타일링은 Styled-Component를 쓰고, 게시판 기능을 위한 데이터베이스는 Firebase를 사용했다.

 

프론트엔드 개발 과정에서 가장 많이 사용해봤던 React를 사용하는 게 편해서도 있지만, 다음과 같은 이유로 리액트를 사용한다.

• 재사용 가능한 컴포넌트를 구현하는 것이 용이하다.
  • 컴포넌트의 기능과 역할을 구분해서 유지보수와 관리가 용이하고, 반복 사용이 필요할 경우 분리해서 저장해두고 다시 사용할 수 있다.
• Virtual DOM을 이용해서 성능 향상이 가능하다.
  • Virtual DOM은 실제 DOM의 복사본으로, 개발자가 변화를 주고 싶은 부분만 Virtual DOM을 변경한 뒤에 실제 DOM과 비교해서 변화가 일어난 부분 즉, 실제 DOM과 Virtual DOM의 차이점만 DOM에 반영할 수 있다.
  • 만약 Virtual DOM을 사용하지 않을 경우, 유저의 인터랙션에 따라 어떤 상태 변화가 발생할 때마다 렌터 트리 재생성, 요소의 스타일 계산, 패인팅 등을 다시 해주어야 하고, 상태 변화가 빈번하게 발생하면 시스템이 수행해야 하는 연산이 매우 많아지기 때문에 비효율적일 수 있다. 
• 거대한 커뮤니티와 다양한 라이브러리 지원
• JSX 문법 지원
  • JSX는 JavaScript + XML을 의미하고, 자바스크립트의 확장 문법이다. 
  • 아래와 같이 return()문을 이용해서 HTML을 컴포넌트화할 수 있다는 장점이 있다.
  • 이후 Babel에서 해당 코드를 컴파일하는 과정에서 문법 오류를 발견할 수 있다.

import React from "react";

const App = () => {
  return (
    <div className="App">
        Hello
    </div>
  );
};

export default App;

 

 

동적 타입 언어인 JavaScript에 정적 타입을 추가한 TypeScript는 다음 이유로 사용한다.

• 이름 그대로, Type 즉, 자료형을 사용할 수 있기 때문이다.
  • 변수에 값이 들어갈 때 어떤 타입의 값이 들어갈지 선언해주는데, 컴파일 과정에서 맞지 않은 타입이 들어가면 컴파일 에러가 발생하기 때문에 컴파일 에러를 방지하고 손쉽게 디버깅할 수 있다.
• 직관적인 코드
  • Javascript로 코드를 작성할 때, 객체의 필드나 함수의 매개변수로 들어오는 값이 무엇인지 알기 위해 여러 파일을 살펴야 했지만 TypeScript를 사용한다면 변수의 이름뿐만 아니라 그 데이터의 자료형까지 알 수 있게 된다.
  • 그래서 코드 작성을 쉽고 직관적으로 할 수 있다.

번외로, JavaScript는 코드를 한 줄 한 줄 해석하면서 바로 처리하는 '인터프리터 언어'이고, TypeScript는 소스 코드 전체를 컴퓨터가 이해할 수 있는 기계어로 컴파일 한 뒤에 실행하는 '컴파일 언어'이다. 

컴파일 언어는 소스코드를 기계어로 번역하는 변환 과정이 따로 필요하기 때문에 인터프리터 언어보다는 느리지만, 런타임 상황에서는 모든 소스코드가 변환되어 있기 때문에 빠르게 실행할 수 있다는 장점이 있다.

 

React+TypeScript 프로젝트 생성

npx create-react-app project-name --template typescript

 

• npx는 자바스크립트 패키지 관리 모듈인 npm(node package module)의 일종의 실행 도구이다.
• npm과 달리 모듈을 로컬에 저장하지 않고 매번 최신 버전의 파일만을 불러와서 임시로 불러와서 실행한 뒤에 다시 그 파일이 없어지는 방식으로 모듈이 돌아가고 있다.
• CRA와 같은 모듈의 변경이 잦은 보일러플레이트의 경우 버그나 기능 업데이트가 많기 때문에 최신 버전을 유지해주는 것이 좋은데, 이를 위해 npx를 이용해서 실행해주는 것이 좋다.

 

Styled-Components 설치

// styled-components 설치
npm i styled-components
// typescript 타입 정의 받기
npm i -D @types/styled-components

npm i 에 대한 자세한 설명은 이 글을 참고하시면 좋습니다.

 

Global Style 적용

import { createGlobalStyle } from 'styled-components';

export const GlobalStyle = createGlobalStyle`
    *{
        margin:0;
        padding:0;
        box-sizing:border-box;
    }
`

import { GlobalStyle } from './GlobalStyle';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <>
    <GlobalStyle/>
    <App/>
  </>

);

src 폴더 밑에 GlobalStyle.tsx 파일을 생성해서 모든 컴포넌트에 기본적으로 적용할 Global Style을 선언해줬다.

 

Firebase + React + TypeScript 연동

https://velog.io/@song961003/react와-firebase-연동하기-with-Typescriptㅇ

firebase에 react 호스팅하기 with firestore

위 글을 따라하면서 연동을 완료했다!

파이어베이스 프로젝트 생성 과정에서 발급받은 API_KEY, 권한 아이디 등은 .env 파일을 만들어서 저장해두고 gitignore 파일에 포함해뒀다.