쿠팡이츠, 프론트엔드 셋업하기

들어가며

이번 시리즈는 쿠팡이츠 클론코딩(ft.백엔드) 편에 이어서 쿠팡이츠 클론코딩(ft.프론트엔드)편으로 진행됩니다. 프로젝트 전반에 대한 설명은 쿠팡이츠 클론코딩 시작하기(ft.백엔드)를 참고해주시면 감사하겠습니다. 그렇다면 이번시간에는 바로 본론으로 들어가 프로젝트 생성을 위한 셋업 방법들을 소개해드리겠습니다.

웹 개발 프로젝트를 시작할 때, 개발 환경을 구축하는 것은 프로젝트의 성패를 좌우할 수 있는 중요한 첫 단계입니다. 이 글에서는 React.js, TypeScript, 그리고 TailwindCSS를 사용하여 프로젝트를 설정하는 방법을 상세히 설명하여, 독자 여러분이 현대적이고 효율적인 웹 애플리케이션을 구축할 수 있도록 돕겠습니다.

1. Create React App을 이용한 프로젝트 생성

시작하기: TypeScript 템플릿을 사용한 React 프로젝트

React 개발의 시작점으로, create-react-app 명령어를 사용하는 것이 가장 흔한 방법입니다. TypeScript는 JavaScript의 슈퍼셋으로, 타입 안정성을 제공하여 더 큰 규모의 프로젝트 관리나 협업 시 버그를 줄이는 데 큰 도움이 됩니다.

npx create-react-app my-app --template typescript

이 명령어는 필요한 React, TypeScript 설정과 함께 새 프로젝트를 생성합니다. 생성된 프로젝트에는 tsconfig.json 파일이 포함되어 있으며, 이 파일에서 TypeScript 컴파일러 옵션을 관리할 수 있습니다. 예를 들어, ES6 이상의 자바스크립트 기능을 사용하도록 설정하고, 모듈 시스템으로는 esnext를 지정합니다.

2. TailwindCSS 설치 및 설정

스타일링의 혁신: 유틸리티 우선의 CSS 프레임워크

TailwindCSS는 유틸리티 클래스를 통해 CSS를 훨씬 더 유연하게 사용할 수 있게 해 주는 CSS 프레임워크입니다. 클래스를 조합하여 디자인을 적용함으로써, 매우 빠르게 반응형 디자인을 구현할 수 있습니다.

TailwindCSS 설치

npm install -D tailwindcss

설치 후, Visual Studio Code 사용자는 TailwindCSS 인텔리센스를 제공하는 확장 프로그램을 설치하여 개발 경험을 향상시킬 수 있습니다.

TailwindCSS VSCode 플러그인

CSS를 위한 PostCSS 설정

PostCSS는 다양한 플러그인을 사용하여 CSS를 변환하는 도구로, TailwindCSS와 결합하여 사용될 때 그 진가를 발휘합니다. 예를 들어, TailwindCSS로 작성된 유틸리티 클래스를 표준 CSS로 컴파일할 수 있습니다.

postcss.config.js 파일 설정

npm install -D postcss autoprefixer

설정 파일에는 다음과 같이 기본 플러그인을 포함시킬 수 있습니다.

module.exports = {
  plugins: {
    "postcss-import": {},
    tailwindcss: {},
    autoprefixer: {},
  }
};

TailwindCSS 커스터마이징

TailwindCSS는 매우 유연하게 설정을 변경할 수 있습니다. 예를 들어, 프로젝트의 특정 요구 사항에 맞추어 색상을 정의할 수 있습니다.

npx tailwindcss init -p

이 명령은 tailwind.config.js 파일을 생성하

며, 여기에 웹 애플리케이션의 디자인을 커스터마이즈 할 수 있는 설정을 추가할 수 있습니다.

const colors = require("tailwindcss/colors");
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      colors: {
        lime: colors.lime,
        sky: colors.sky,  // 여기에 보시는 것처럼 TailwindCSS의 기본 색상을 확장하여 사용할 수 있습니다.
      },
    },
  }
};

3. React Router 설치: SPA 라우팅 관리

React 애플리케이션에서 여러 페이지를 관리하기 위해 react-router-dom을 설치합니다. 이 라이브러리는 싱글 페이지 애플리케이션(SPA)에서 클라이언트 사이드 라우팅을 쉽게 구현할 수 있게 해 줍니다.

npm i react-router-dom

4. graphql 관련 설치

Apollo Client 및 graphql 설치

npm install @apollo/client graphql

graphql-ws

npm i graphql-ws

마치며

이제 TypeScript와 TailwindCSS를 사용하여 React.js 프로젝트를 설정하는 방법을 알게 되었습니다. 이 설정을 기반으로, 개발자는 보다 강력하고 유지보수가 용이한 웹 애플리케이션을 구축할 수 있습니다.