프로그래밍 공부 노트

프로젝트를 진행하다 보면 폴더 구조가 복잡해지고 깊어질 수록 파일 import 경로를 작성하는것이 어려워진다.  상대경로를 사용하여 특정 파일을 import 하게되면 아래와 같이 작성해야 한다. ex)  ../../../components/header/index.tsx 이러한 문제점을 절대경로를 사용하여 해결할 수 있다. 하지만 절대경로에도 문제가있는데 운영체제별로 절대경로가 (root 경로가)달라서 협업시 문제가 있을 수 있다. 윈도우면 C:\\Windows\System32\... 이런식이고 맥이면 /User/lsw/... 이런식이다. 하지만 위와 같은 방식으로 root부터 절대경로를 사용하지 않고 @ 키워드 즉 alias(별칭)를 사용해서 운영체제의 root 부터가 아닌 특정 폴더에 바로 접근할 수 있는 방법을 알아볼 것이다. CRA(create-react-app) + Typescript에서 절대경로 설정 일단 절대경로를 사용하려면 tsconfig.json과 webpack 설정을 변경해야 한다. 하지만 CRA로 생성한 프로젝트는 기본적으로 webpack이 설정되어있어서  eject를 해서 webpack 설정을 직접 변경해줘야 하는데 권장되는 방법은 아니다. (버전 업데이트 등의 문제 발생) 그래서 CRA를 eject 하지않으면서도 webpack 설정을 바꾸어 줄 수 있는 라이브러리가 있다. 바로 Craco 1. Craco 설치 craco를 사용하면 CRA를 eject 하지 않아도 CRA에 설정되어있는 eslint, webpack, babel 등을 쉽게 커스터마이징할 수 있다. 두가지 라이브러리를 설치해야 한다. npm i @craco/craco npm i -D craco-alias 두 라이브러리를 설치하고 root 디렉토리에 craco.config.js 를 생성한다. craco.config.js const CracoAlias = require ( ' craco-alias ' ) ; module.exports = { plugins :

예전에 강의를 들을때 npm install <모듈명> -g 로 설치를 했었다. npm 을 통해서 모듈을 설치할 때 -g 옵션을 주게 되면 프로젝트마다 모듈을 설치해 줄 필요가 없이 내 컴퓨터 안에 글로벌한 공간에 모듈이 설치되어있기 때문에 프로젝트마다  같은 모듈을 공유해서 사용할 수 있다. 그러나 이는 좋은 방법이 아니다. 개발자 입장에서는 귀찮게 여러 번 설치할 필요도 없고 한 번만 설치하면 끝나는데 왜 좋은 방법이 아닐까 라고 생각할 수 있다. 하지만 좋은 방법이 아니다. 그 이유에는 아래와 같다. 모듈이 업데이트 되었는지 안되었는지 확인이 불가능 하다. 모든 프로젝트마다 모듈을 재설치 하는것이 아닌, 한 번 설치한 모듈을 그대로 사용하기 때문에 프로그래머가 매번 글로벌 모듈을 최신 버전으로 재 설치하지 않으면 확인 자체가 불가능 하다. 또한 업데이트를 진행했을 때 변동사항이 생겨 다른 프로젝트에도 영향을 끼칠 수 있다. 프로젝트를 여러개를 운영하는데 같은 모듈의 각각 다른 버전이 필요한 상황이 있을 수 있다. 이럴 때 글로벌 모듈의 버전을 사용하면 동일한 버전을 여러개의 프로젝트가 동일하게 사용하기 때문에 문제가 발생하게 된다. 특히 create-react-app 같은 보일러플레이트는 치명적인 문제가 발생할 수 있다. 리액트 프로젝트 생성 도구인 create-react-app 같은 모듈의 경우 업데이트가 잦은 모듈이다. 그렇기 때문에 매 설치 이전에 npm으로 재 설치를 하지 않는 경우에는 이전 버전을 사용하게 될 수 있다.  이러한 프로젝트 생성 모듈은 매 업데이트 마다 새로운 기능과 다양한 버그들이 고쳐진다. 그렇기 때문에 보일러플레이트 같은 모듈의 경우에는, 항상 최신 버전을 유지해 주는 것이 좋은데, 매번 설치하는 것이 꽤나 귀찮은 일이다. 이에 대한 해결책이 바로 npx 이다. npm 5.2버전부터 npx가 기본 패키지로 제공되기 시작했다. npx도 모듈의 일종이다. 이 모듈은 npm을 통해 모듈을 로컬에 설치했어야만 실행시킬 수 있