[TIL] 11/19

1. 경로 관리 - 상대경로 -> 절대경로 만들기

 
프로젝트를 진행하다보면 경로가 지저분하게 생기고 상대경로로 불러오기 때문에 어디서 불러오고 있는지 파악이 어려워진다. 
그래서 CRACO 로 상대경로를 절대경로로 바꾸어서 보기 편하게 만들어보려고 한다. 절대경로로 바꾸어두면 보기도 편하고 디렉토리 구조가 변경되더라도 import 경로를 쉽게 유지/관리할 수 있다. 

 
 
1.1. CRACO (Create React App Configuration Override)
 
설치

npm i -D @craco/craco

npm i -D craco-alias

 
 
프로젝트 폴더에 tsconfig.paths.json 파일 만들고(프로젝트 폴더명이 project 라면 project/tsconfig.paths.ts ),
기존의 tsconfig.json 파일을 열고 아래 코드를 추가해준다. 이렇게하면 확장이 되기 때문에 tsconfig.paths.json 에 작성한 내용을 tsconfig.json 에서 받아들일 수 있게 된다.

"extends": "./tsconfig.paths.json",

 
이제 만들어둔 tsconfig.paths.json 파일을 아래와 같이 작성해준다.

• baseUrl: 타입스크립트 컴파일러가 모듈 해석을 할 때 기준이 되는 디렉토리를 지정, "." 로 설정했으므로 현재 프로젝트의 루트 디렉토리를 기준으로 함
• paths: 타입스크립트가 모듈 이름을 특정 경로로 매핑하는 규칙을 정의 (별칭(alias)을 정의하는 것)

아래의 경우, import MyComponent from "@/components/MyComponent" 와 같이 작성하면,
타입스크립트는 경로를 src/components/MyComponent 로 해석한다. 

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

 
그리고 craco.config.js 파일을 만들고(/project/craco.config.js) 아래의 코드를 붙여넣어준다.

const cracoAlias = require('craco-alias');

module.exports = {
    plugin: [
        {
            options: {
                source: "tsconfig",
                baseUrl: ".",
                tsConfigPath: "tsconfig.paths.json",
                debug: false,
            },
        },
    ],
}

 
마지막으로 pakage.json 파일로 가서 scripts 를 이렇게 바꾸어준다. 이렇게하면 craco 설정이 적용된 상태에서 개발 서버를 실행할 수 있다. 

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject",
    "typecheck": "tsc --noEmit --skipLibCheck"
  },

 
이제 상대경로로 import 하고 있는 파일로 가서 절대경로로 적어주면 된다. 참고로 상대경로와 절대경로를 함께 사용해도 문제가 없다고 한다.

 
 
 

2. 스니펫 만들기

스니펫을 사용하면 반복되는 코드를 쉽게 짤 수 있다. 일종의 단축키 같은 것이라고 생각하면 된다.
스니펫을 쉽게 만들기 위해서는 vscode 의 익스텐션을 다운 받아야 한다. 

 
 
아래와 같은 코드를 만들어야 한다고 했을 때, 반복되는 부분(Home)에 $n 의 값을 넣고 드래그 한 후 마우스 우클릭을 하면 Generate snippet 이라는 옵션이 뜬다. 

 
 
Generate snippet 을 누르면 상단에 언어를 선택하는 입력창이 뜨는데 원하는 언어를 선택하면 된다. 

 
언어 선택 후에는 차례로 스니펫 이름 -> 스니펫 트리거(스니펫 단축키) -> 스니펫에 대한 설명을 입력하는 입력창이 뜨는데 알아서 입력해주면 된다. (나 같은 경우 위의 코드의 스니펫으로 _comp 를 설정함)
 
만약 아래와 같이 입력해야할 부분이 여러 곳이라면 각 자리에 차례로 $1 -> $2 -> $3 로 써주면 된다. 
스니펫을 등록하고 해당 코드를 불러오면 각 자리가 비어있는데 빈자리를 채우고 탭을 치면 다음 자리로 넘어간다. 

<Title size='입력1' color='입력2'>입력3</Title>

<Title size='$1' color='$2'>$3</Title>

 
 
 

3. react-query