[리액트] 프로젝트 시작 전 필수! 유용한 프로젝트 초기 세팅 방법

ᴄsᴇ ᴘᴇʙʙʟᴇ·2024년 5월 21일
0
post-custom-banner

프로젝트를 할 때 개발 능률을 올리기 위해서는 초기 프로젝트 세팅이 중요하다. 초기 세팅에 시간 투자를 하고 조금만 고통 받으면 이후 프로젝트를 진행하면서 쭉 만족스럽고 빠르게 개발을 할 수 있다. 하지만 어떤 것부터 해야 하는지 막막한 것도 사실이다.

이 글을 보는 초기 세팅에 어려움을 겪는 사람들에게 조금이나마 도움이 되고자, 내가 이번 졸업 프로젝트를 본격적으로 시작하기 전에 했던 Tailwind CSS 설치 및 초기 세팅 방법과 CRA 절대 경로 설정 방법에 대해 소개한다.

Tailwind CSS를 설치하고 세팅해보자

Tailwind CSS란?

Tailwind CSS가 생소할 사람들을 위해 간단히 Tailwind CSS에 대해 소개한다.

Tailwind CSS란 CSS 프레임워크로, 인라인 스타일을 사용하여 쉽고 빠르게 스타일링을 할 수 있으면서도 디자인 시스템만큼이나 일관된 디자인을 가능하게 해준다. styled-components 등과 같이 작은 스타일 변경에도 컴포넌트를 만들어야 하는 번거로움에 지쳤거나 매번 클래스명을 고민하는 것이 힘들었다면 이 Tailwind CSS를 적극적으로 추천한다.

Tailwind CSS는 Utility-First 컨셉을 가진 CSS 프레임워크다.m-1, flex와 같이 미리 세팅된 유틸리티 클래스를 활용하는 방식으로 HTML 코드 내에서 스타일링을 할 수 있다.

  • Utility-First: 미리 세팅된 유틸리티 클래스를 활용하여 HTML 코드 내에서 스타일링

예시를 보면 좀 더 이해가 잘 될 것이다.

<button class="py-2 px-4 rounded-lg shadow-md text-white bg-blue-500">
  Click me
</button>

Tailwind CSS 설치 및 초기 세팅 방법

Tailwind CSS가 무엇인지 알았으니 이제 본격적으로 설치하고 초기 세팅하면 좋을 팁들을 알아보자.

Tailwind CSS 설치

공식 문서를 보고 설치하는 것이 가장 정확하지만 귀찮은 사람들을 위해 2024년 5월 기준 설치 방법을 소개한다.

  1. 터미널에서 Tailwind CSS 설치
    명령어는 아래와 같다. VSC 코드의 터미널 등에서 아래 명령어를 입력해주면 된다.

    npm install -D tailwindcss
npx tailwindcss init

  2. tailwind.config.js 파일에서 path 설정해주기

    /** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

    1번 설치 과정을 거쳤다면 프로젝트 root 폴더에 자동으로tailwind.config.js 파일이 생성되었을 것이다.
    이 파일의 content 부분에 tailwind를 사용할 파일의 위치를 잘 작성해주어야 한다. 맨 뒤에 나오는 파일 확장자명은 자신의 프로젝트에 맞게 설정해주어야 하는데, 내가 진행한 프로젝트의 경우 typescript를 사용했기 때문에 아래와 같이 세팅해주었다.

    content: ["./src/**/*.{tsx, ts}"],

  3. 기본 CSS 파일에 @tailwind directives 추가

    main.css, index.css 등 자신의 프로젝트에 따라 기본 CSS 파일이 있을 것이다. 해당 CSS 파일의 맨 위에 아래의 내용을 추가해준다. 

    @tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind CSS 초기 세팅 방법

이 포스트 주제의 핵심 부분이다. 보다 편하게 작업을 할 수 있도록 도와주는 Tailwind CSS의 초기 세팅 방법에 대해서 소개한다.

Tailwind CSS의 장점 중 하나는 커스터마이제이션이 쉽다는 것이다. 이 장점을 활용하여 초기 세팅을 해보자.

  1. 자주 쓰는 스타일링 class 정의해두기
    Tailwind CSS는 클래스를 활용하여 스타일링한다고 앞서 소개했다. 미리 정의된 클래스를 이용하는 것 뿐만 아니라 내가 class를 직접 정의해서 사용할 수도 있다.
    나의 경우 main.css, index.css 등 기본 CSS 파일에 커스텀 클래스를 정의해준다. 실제 프로젝트에서 정의해둔 커스텀 클래스는 아래와 같다.

    // App.css 
...

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.custom-grid-template-rows {
  grid-template-rows: min-content auto;
}

.custom-grid-template-columns {
  grid-template-columns: 70px auto;
}

    특히 .flex-column과 .flex-center의 경우 어떤 프로젝트에서든 아주 많이 쓰이기 때문에 꼭 정의해두는 것을 추천한다.

  2. 프로젝트에서 사용되는 색상 정의하기

    tailwind.config.js 파일의 theme 섹션에서는 프로젝트의 색상 팔레트, 타입 스케일, 폰트, breakpoints, border radius values 등 다양한 스타일 정보를 커스텀하여 정의할 수 있다.

    나는 매번 색상 코드를 작성해주는 것이 귀찮아서 색상 팔레트를 정의해주었다. 그 방법은 아래와 같다.

    		/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{tsx, ts}"],
theme: {
  extend: {
    colors: {
      white: "#ffffff",
      black: "#000000",
      "dark-gray": "#525252",
      blue: {
        base: "#6979F8", // 기본 버튼 색상
        highlight: "#3647A7", // 클릭 시 버튼 색상
        pitch: "#A1A1FF", // 음성 듣기 및 포기하기
        "bar-1": "#D7D6FF", // 목표 음정 바
        "bar-2": "#A1C1FF", // 현재 음정 바,결과 음역대 범위 바
        "bg-bar": "#C7D3EB",
        result: "#E1E1FA",
      },
    },
  },
},
plugins: [],
};

    theme 섹션 안의 extend에 보면 색상 팔레트를 정의한 것을 확인할 수 있다. 사실 extend 안에 colors를 쓰지 않고 theme 안에 바로 colors를 작성해주어도 되지만, 이렇게 작성해준 이유는 Tailwind CSS에서 기본적으로 제공되는 colors를 사용하기 위해서이다.

    theme 안의 colors에는 Tailwind CSS에서 기본적으로 제공되는 색상이 내장되어 있기 때문에 그곳에 직접 내가 정의한 색상을 넣어주면 기본 색상을 덮어씌우면서 더 이상 기본 색상은 사용할 수 없게 된다.
    그렇기 때문에 기본 제공되는 색상에 "확장하여" 내가 정의한 색상도 쓰겠다는 의미로 extend 안에 colors를 작성해준 것이다.

    실제로 내가 정의한 색상을 이용할 때는 아래와 같이 작성해주면 된다.

    		<h2 className="text-dark-gray"></h2>
		<div className="bg-blue-result"></div>

절대경로를 설정하여 파일을 쉽게 불러오자

절대경로 설정의 필요성

우리는 리액트 프로젝트를 할 때 수많은 모듈 및 파일을 불러오고(import) 내보낸다(export). 파일 외부에 위치한 자원을 현재 파일에서 사용하기 위해선 JS가 제공하는 import 구문을 사용해야 하는데, 이 때 import 구문 뒷 부분에 가져오려는 자원에 대한 위치를 명시해야 한다.

별도의 설정이 없다면 경로의 앞 부분에 ./이 붙은 형태인 상대경로를 사용하게 된다. 하지만 상대경로는 현재 파일의 위치를 기준으로 외부 파일의 위치를 명시하는 것이기 때문에 프로젝트의 규모가 커지고 폴더 구조가 깊어지면 경로 부분이 길어지게 되어 가독성을 해칠 수 있을 뿐만 아니라 작성이 매우 귀찮아진다(상대경로 지옥). 또한, 만약 현재 파일의 위치를 변경하게 되었을 때는 파일 내부에서 사용하는 모든 import 경로를 다시 변경해주어야하는 불편함이 따르게 된다.

예를 들어,

└ src
  ├ a1
  │  └─ b1
  │     └─ c1
  │         └─ f1
  ├ a2
  │  └─ b2
  │     └─ f1

위와 같은 구조에서 b2의 f1파일에서 c1의 f1파일을 가져오려면
import * from '../../a1/b1/c1/f1'; 처럼 경로가 길어지게 된다.

이러한 단점을 해결하기 위해 절대경로 설정 방법에 대해 소개한다. 나는 CRA로 리액트 초기 설치를 해주었기 때문에, CRA 환경 기준으로 절대경로를 설정하는 방법에 대해 작성하겠다.

CRA + Craco로 절대경로 설정하기

CRA 환경에서는 Craco 라이브러리로 쉽게 절대경로를 설정해줄 수 있다.

공식 문서를 보고 설치하는 것이 가장 정확하지만 귀찮은 사람들을 위해 2024년 5월 기준 설치 방법을 소개한다.

  1. 터미널에서 Craco 설치

    npm i -D @craco/craco

  2. package.json 파일 수정하기
    package.json 파일을 보면 아래와 같이 작성된 부분이 있을 것이다.

    "scripts": {
	"start": "react-scripts start",
	"build": "react-scripts build",
	"test": "react-scripts test",
	"eject": "react-scripts eject"
}

    이 부분을 아래와 같이 수정한다. 

    "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
},

  3. craco.config.js 파일 생성하기
    craco.config.js 파일은 craco를 설치할 때 자동으로 생성되지 않는다. 직접 프로젝트의 root 경로에 파일을 생성해주어야 한다.

  4. 생성한 craco.config.js 파일에 절대경로 설정하기

    const path = require("path");

module.exports = {
  webpack: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
};

    경로에서 @를 작성해주면 src 폴더를 의미한다. 리액트 프로젝트에서는 거의 모든 모듈과 파일들을 src 폴더 안에 넣기 때문에 이 src를 base를 나타내는 @ 기호로 세팅해주는 것이 일반적이다. 나는 src 자체만 세팅해주었지만 아래와 같은 방법이 많이 쓰이는 것 같다.

    const path = require('path');

  module.exports = {
    webpack: {
      alias: {
        '@components': path.resolve(__dirname, 'src/components'),
        '@pages': path.resolve(__dirname, 'src/pages'),
        '@hooks': path.resolve(__dirname, 'src/hooks'),
      },
    },
  };

    src 폴더의 직속 폴더 경로를 모두 세팅해주는 것이다.

  5. tsconfig.json(또는 jsconfig.json) 파일 수정하기

    typescript는 tsconfig.json 파일, javascript는 jsconfig.json 파일을 보면 compilerOptions 섹션이 있을 것이다. 이 부분에 아래와 같은 내용을 추가해주면 된다.

    {
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
  		"@/*": ["./*"]
	}
  }
}

    나는 src 폴더만 절대경로를 설정해주었기 때문에 이렇게만 작성했지만, 4번에서 소개한 일반적인 방법으로는 아래와 같이 설정해주면 된다.

    {
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@pages/*": ["./pages/*"],
      "@components/*": ["./components/*"],
      "@hooks/*": ["./hooks/*"]
    }
  }
}

    baseUrl은 작성할 경로의 base가 되는 경로를 의미하고, paths는 craco.config.js에 작성한 alias path 정보들을 typescript 또는 javascript가 이해할 수 있도록 한번 더 작성해주는 것이다.

이렇게 하면 절대경로 세팅이 모두 완료되었다! 실제 코드에서 절대경로를 사용하는 예시를 보자.

import MikeButton from "@/components/home/MikeButton";

src/components/home 폴더에 있는 MikeButton.tsx 모듈을 불러오는 코드이다. 상대경로 지옥 탈출 성공!

여기까지가 내가 소개하는 프로젝트 초기 세팅 방법이다. 나는 프로젝트 초기 세팅을 할 때 정보가 한곳에 모여져 있지 않아 꽤나 많은 시간과 노력을 들였는데, 이 글을 보는 사람들이 조금이라도 더 빠르게 초기 세팅을 해서 개발 시간을 아끼는데 도움이 되었으면 좋겠다.

profile
ᴄsᴇ ᴘᴇʙʙʟᴇ
ꜱɪɴᴄᴇ ２０２１.０９.０１
이전 포스트

[Javascript] find, findIndex 함수

post-custom-banner

0개의 댓글