Age of Discovery

https://jurgen-94.tistory.com/119 Craco로 emotion css prop 및 절대경로 config 세팅 (1) 직전 포스팅에 이어서.. 이미 만들어진 CRA프로젝트의 세팅을 입맛에 맞게 변경할 일이 생겼다. 최근에 익숙하게 사용하고 있는 emotion.js의 css prop이랑 다른 모듈을 import 해올 때 누가봐도 간편해 jurgen-94.tistory.com 바로 직전 글에서는 Craco를 왜 사용하고 emotion css prop을 왜 설정하려고 고군분투했는지 알아보았다. 이번엔 컴포넌트나 모듈을 import할 때 상대경로대신 절대경로를 사용해보자. npm install @craco/craco npm install --dev craco-alias Craco를 설치 ..

직전 포스팅에 이어서.. 이미 만들어진 CRA프로젝트의 세팅을 입맛에 맞게 변경할 일이 생겼다. 최근에 익숙하게 사용하고 있는 emotion.js의 css prop이랑 다른 모듈을 import 해올 때 누가봐도 간편해보이는 이렇게 생긴 절대경로를 세팅하고자 마음먹었고 반나절 이상을 소요했다. 뿌듯해서 글을 남겨보고자 한다. 우선 이 세팅을 하는데 craco가 필요하다. craco란? Create-React-App Configuration Override 의 약어이다. CRA는 기본적으로 웹팩이나 script 설정을 숨겨놓기 때문에 npm run eject 명령어로 추출해서 config를 변경해야하지만 한번 변경할 경우 이전상태로 돌아갈 수 없다. Craco는 이러한 단점을 커버하기 위해 탄생한 커스터마이..

서버를 따로 구현하지 않고 S3 스토리지로 배포되어있는 데이터를 그대로 받아와야했다. 웹팩에서 환경변수를 주입해 axios get요청으로 데이터를 받아와보자! npm install dotenv npm install webpack-env 우선 dotenv와 webpack-env 패키지를 설치한다. 그리고 .env 파일을 생성 후 gitignore에 넣어주자 (깃헙에 올리지 않기 위함) env파일엔 외부에 알려지지 않아야하는 클라이언트 아이디 or 시크릿키 or api주소 등이 있다. API_ENDPOINT=http://localhost:3000/ 위와 같은 형식으로 좌항은 대문자로 입력해야한다. 또한 문자열이라고 따옴표를 넣어주면 안된다. 웹팩으로 파일이 프로젝트가 세팅되어있으면 webpack.common..

사용자가 쉽게 커스텀하고 이용이 가능한 input 라이브러리를 만들어보려고 한다. input하나만드는데 보일러 플레이트가 많은 CRA는 설치하기 싫었고 CRA없이 초기세팅을 웹팩으로 빌드했다. css는 emotionJS를 사용하기로 결정했다 css in js를 구현할 때 jsx문법 내에서 style={{}}로 하는것 보단 css={{}}로 작성하는게 더 익숙했기 때문이다. (현재 진행중인 링크게더 프로젝트에서 쓰고 있다.) 딱히 성능상의 유의미한 차이는 없다ㅋㅋ... 웹팩세팅 관련 글은 다음에 다뤄보도록 하겠다. (길어질거 같음..) npm i -D @emotion/react @emotion/styled emotion 패키지를 설치해주고 typescript를 사용하는 경우 tsconfig.json의 컴파..

최근 프로젝트에서 lint와 prettier 설정할 일이 꽤 있었는데 하나로 통일시키면 좋겠다고 생각해서 기록으로 남기려한다. npm install -D --dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-simple-import-sort .eslintrc.js module.exports = { root: true, env: { browser: true, amd: true, node: ..