1. 개요
환경설정을 하면서 기존의 프로젝트를 지우고 다시 하자는 생각으로 초기화를 한 순간 똑같은 문제가 발생했고 이를 해결하기까지 하루가 걸린 이야기
1-2. 환경설정
우선 기본적인 세팅이 끝나고 환경설정에 대해서 제대로 공부하기 위해 코드를 작성하던 도중
너무 꼬인 기분이 들었다.
EsLint를 나의 스타일대로 사용할 지, 아니면 유명한 스타일을 사용할지 고민했었고 각 스타일의 장/단점을
정리 했다.
1) 내가 한 스타일
설명 : EsLint에 대한 강의 영상과 구글링을 통해 획득한 지식으로 정리한 스타일
장점 : EsLint에 대해 확실하게 공부할 수 있음. 환경설정에 대한 공부가 가능,입맛대로 커스텀 가능
단점 : 각각의 규칙이 세심하지 못함, 코드 꼬임의 문제가 생길 수 있음.
2) Airbnb
설명 : 환경설정을 하면서 제일 유명한 스타일 중 하나인 Airbnb 가이드라인으로 사용자가 많고 기본 사용에 대한 공식홈페이지가 있음
장점 : 해결글, 커뮤니티, 공식홈페이지가 존재하는 만큼 비교적 쉬운 적용 가능, 다른 팀원들과 협업 시 원활하게 사용가능
단점 : 비교적이라고 해서 어렵지 않은 것이 아님, 깊이 있는 공부는 어려움.
이렇게 장점과 단점을 비교해보았을 때 나는 Airbnb를 사용하기로 결정했다.
그 이유는 다음과 같은데
1. 환경설정을 하는 큰 이유는 하나는 원활하게 협업하는 방법을 기르는 것이므로 차라리 많이 쓰는 Airbnb를 확실히 아는 것이 협업 시 도움이 될 것이라고 생각
2. 현재 프로젝트는 팀스터디형식으로 진행되고 기간이 정해져 있으므로 가능한 빠른 시간내에 완료해야함.
3. 환경설정이 익숙하지 않은 나에게 커스텀은 시간이 너무 많이 걸릴것이라고 생각
그래서 결과적으로 Airbnb 가이드라인을 이용해서 하기로 했다.
이제 이대로 적용했으면 좋겠는데...
2. 상황설명
EsLint를 공부하면서 적용하다보니 설치된 라이브러리가 너무 많았고 차라리 처음부터 다시하자는 생각으로 초기화를 진행했다. 그러나 그 다음부터 생성된 프로젝트는 저번과 동일한 증상이 발견됬고 똑같은 해결법으로 처리되지 않았다....
3. 문제점
- tailwind 모듈이 적용되지 않음
- UI 컴포넌트에 모듈이 적용되지 않음TS(2307)
4. 해결하기 위한 시도
우선 1번의 경우는 저번과 동일한 방법으로 금방 해결할 수 있었다.
문제는 2번, 2번의 문제를 해결하기 위해 다음과 같은 방법을 시도했다.
1) vscode, prettier, Eslint 초기화
2) 구글링, chatGpt 물어보기
3) TS, Vite, Tailwind 공식 사이트 검색
4) Typscript, node, npm 버전 최신화
5) json파일에서 옵션 변경
===> 이모든 과정들을 몇 번씩 반복했지만 결과는 달라지지 않았다.
그러다가 너무 힘들어서 다른 조원들에게 나의 상황을 얘기했고 얘기하면서 이상한 점을 발견했다.
- tsconfig.json()의 분리
이미지를 보면 확인할 수 있겠지만 원래라면 하나여야할 tsconfig.json이 각각 app.json,
node.json으로 분리된 것을 확인할 수 있다.
그리고 각각의 코드는 다음과 같다.
tsconfig.json
{
"files": [],
"references": [
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.node.json"
}
]
}
tsconfig.app.json
{
"compilerOptions": {
"composite": true,
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
"baseUrl": ".",
"paths": {
"@/*": [
"./src/*"
]
},
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"moduleDetection": "force",
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": [""]
}
tsconfig.node.json
{
"compilerOptions": {
"composite": true,
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true,
"strict": true,
"noEmit": true
},
"include": ["vite.config.ts"]
}
이렇게 어플리케이션과 노드별로 구분이 되었다.
- UI 컴포넌트의 위치
다른 조원들에게 물어본 결과 UI컴포넌트를 설치했을 때 다음과 같은 경로로 설정된다고 한다.
그런데 나는 이런 상태였다.
원래 src 폴더 안에 생성되어야 할 컴포넌트가 루트 파일에서 '@'라는 폴더안에 위치하게 된 것.
이 두 개의 상황이 달랐고 해당 내용에 대해 얘기를 나눈 결과 중요한 사실을 알았다.
5. 문제의 원인과 해결법
원래는 종합적으로 담당해야할 tsconfig.json파일이 app과 node로 분리 되면서 기존의 설정한 절대경로가 제대로 인식하지 않게 된 것이다.
따라서 절대 경로를 제대로 설정하기 위해선 tsconfig.app.json 뿐 아니라 경로 역할만 하고 있는 tsconfig.json파일에도 똑같이 경로 설정을 해주어야 한다.
tsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
},
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"files": [],
"references": [
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.node.json"
}
]
}그리고 다른 글들을 찾으면서 vite의 경우 ts의 절대경로를 인식하기 위해 resolve나 혹은 플러그인을 설치한다는 것도 알게 되었다.
npm install tsconfig-paths해당 플러그인을 설치하게 되면 viteconfig시 resolve를 쓰는 코드를 줄일 수 있다.
//vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tsconfigPaths from 'vite-tsconfig-paths';
export default defineConfig({
plugins: [react(),tsconfigPaths()],
});
이 과정을 거치면서 UI 컴포넌트도 정상적으로 src 폴더 안에 들어 갔고 절대경로도 인식된다!
