[Canvas App] 프로젝트 세팅하기_Alias

프로젝트를 시작하며...

처음 시작은 HTML의 canvas 태그와 스크립트를 사용해서 웹 그림판을 만들어보고 싶었었습니다.

그 후에 그림판의 기능을 어느정도 데모로 만들어보니 레이어 관리와 여러가지 툴들을 제공해주는 앱( 요즘 많이 사용되고 있는 여느 디자인 툴들과 같이)을 만들어 보고 싶어 개인 프로젝트를 진행하게 되었습니다.

 

이번 프로젝트의 목적은 기획, 디자인, 개발까지 혼자서 진행하면서 프로젝트 프로세스의 전반적인 흐름을 익혀가고,

캔버스를 활용하여 관련된 다양한 기능들을 구현해보는데에 있습니다. 

 

 

프로젝트 초기 세팅

프로젝트는 컴포넌트 재 사용성을 고려하여 개발하기 편한 싱글페이지 어플리케이션을 만들 수 있는

React 라이브러리와 Typescript를 사용하여 진행합니다.

Create React App

$npx create-react-app test-canvas-app --template typescript

 

Third Party Library

프로젝트 써드파티 라이브러리는 다음과 같이 정하였습니다.

// styled-components
npm i styled-components
npm i -D @types/styled-components

// react-router-dom v6
npm i react-router-dom

// react redux toolkit
npm install @reduxjs/toolkit

// immer
npm i immer

// craco
npm i @craco/craco

// ResizeObserver Polyfill
npm i resize-observer-polyfill

 

별명 Alias

프로젝트를 진행하면서 모듈을 가져오기(import) 할때에 다음과 같은 상황( 상대경로의 지옥 )은 피하고 싶었습니다.

가지수(Deps)가 더 많아지게 된다면 리팩토링 하기도 엄두도 안나게 되는 최악의 상황이 될겁니다.

그래서 대채로 Alias 라는 방식을 사용하게 되는데, 절대경로를 별명을 붙여 사용하는 방법입니다.

// 상대경로
import Component from "../../../../../something/components.tsx";

// 절대경로
// 여기서 @/ 가 의미하는 것은 baseUrl 을 설정하기 나름인데 보통 Root경로를 바라봅니다.
import Component from '@/components/component.tsx'

 

절대경로를 사용하기 위해서 Craco라는 라이브러리를 사용하였습니다.

Third Party Library 항목에서의 craco 라이브러리를 설치한 후 여러가지 설정을 해줍니다.

 

craco.config.js

루트에 craco.config.js 를 생성해주고 다음과 같이 @를 통해서 가져올 루트 디렉토리를 작성해줍니다.

저는 @/ 이후에 src 폴더의 내용을 가져오려합니다.

const path = require('path');
module.exports = {
  webpack: {
    alias: {
      '@': path.resolve(__dirname, 'src/'),
    },
  },
  jest: {
    configure: {
      moduleNameMapper: {
        '^@(.*)$': '<rootDir>/src$1',
      },
    },
  },
};

 

tsconfig.paths.json

마찬가지로 루트에 tsconfig.paths.json를 생성하고 다음과 같이 작성합니다.

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

 

 

 

tsconfig.json

마지막으로 tsconfig.json 에 다음과 같이 tsconfig.paths 와 craco.config.js 를 추가해줍니다.

{
  "extends": "./tsconfig.paths.json",
	... some config
  "include": ["src", "craco.config.js"],
  "exclude": ["node_modules", "**/node_modules/*"]
}

 

이제 @/ 를 통해서 src 내부의 폴더들을 절대경로로 가져올 수 있게 설정을 완료했습니다.

다음은 Canvas를 통해서 그림을 그리는 방법에 대해서 다뤄보겠습니다.