토피넛라떼조아

프로젝트를 진행하면서 import 구문이 불필요하게 길어지는 것 같아서 자주 불리는 디렉터리 주소를 alias로 설정해서 사용하기로 결정했다.  코드가 조금 더 깔끔해지길 바라면서 RN 프로젝트에서 path alias 설정하는 방법에 대해서 알아보았다.일단 필요한 라이브러리를 받아준다.npm install -D babel-plugin-module-resolver 내 프로젝트 구조는 아래와 같다....src ㅏcomonents ㅏscreens ㅏhooks ㅏ... ㄴutils ㄴ styles.tsApp.tsx.eslint.ts.gitignore.yarnrc.yml.prettierrc.js babel.config.jspackage.jsonpackage-lock.jsonREADME.mdtsconfig.j..

리액트를 활용하여 프로젝트 빌드를 하고나면 웹팩과 바벨이 자동으로 설정됩니다. 이전 포스팅을 통해 웹팩에 대해 살펴보았으므로 이번에는 바벨에 대해 알아보겠습니다. 대충 자바스크립트 컴파일러로 이해하고 넘어갔었는데 왜 필요한 지, 어떻게 사용하는지 등에 대해 작성하겠습니다. 바벨 바벨은 자바스크립트 컴파일러입니다. ES6+ 문법이 등장한 시점에 브라우저는 이 문법을 이해하지 못했습니다. 따라서 이런 크로스 브라우징 문제를 해결하기 위해 생겨난 도구로써 ES6+버전의 자바스크립트, 타입스크립트, JSX 등 다양한 언어를 모든 브라우저에서 호환될 수 있도록 도와줍니다. 바벨의 동작 원리 파싱(Parsing) 바벨은 소스 코드를 분석하여 추상구문트리/AST(Abstract Syntax Tree)로 변환합니다. ..