프로그래밍 공부 노트

프로젝트를 진행하다 보면 폴더 구조가 복잡해지고 깊어질 수록 파일 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 :

절대경로와 상대경로 절대경로 가장 위에서 부터 기준으로 출발하는 것이다. 절대경로의 경우 해당 파일까지 도달하기 위해서 거치게되는 폴더들의 경로를 명시적으로 나타내고 있는 것이다.  장점 은 폴더 구성을 눈으로 쉽게 볼 수 있는 반면, 단점 은 서버를 옮기거나 폴더 구성이 바뀔 경우 다시 일일히 재설정을 해줘야하는 번거로움이 있다. ex) http://naver.com/main/sub/abc.html 상대경로 지금 내 폴더를 기준으로 출발하는 것이다. 상대경로의 경우 해당 파일까지 도달하기 위해서 거치게되는 폴더들의 경로를 상대적으로 나타내고 있는 것이다. 간단히 말해서 상대경로란 현재 위치한 곳을 기준으로 해서 그곳의 위치(경로)를 말한다. /   ==>   하위폴더 지정 ./   ==>   현재폴더 지정(동일 폴더) ../   ==>   한 계층 위 폴더 지정 (추가적으로 ../../ 와 같이 작성하면 두단계 상위 디렉토리로 이동한다.) 장점 은 폴더 구성이 상대적으로 지정되어있어 서버를 옮긴다거나 폴더를 옮길때 폴더 별로 재설정이 필요없는 장점이 있는 반면, 단점 은 폴더의 구성을 눈으로 볼 수 없다는 점입니다. ex) ../../abc.html