# craco

Craco Webpack설정하기
CRA(Create-React-App)은 기본적으로 디렉터리 구조를 간결하게 하기 위해 WebPack설정이 들어있는 config와 script폴더들을 숨겨놓는다. 이를 커스텀하고 싶다면 npm run eject를 이용해서 숨겨진 config와 script폴더를 추출 할
[react] webpack 설정 (react-app-rewired)
react에선 webpack이 존재하므로craco를 이용하여 내용을 추가 할 수 있다.npm install @craco/craconpm install craco-alias
#39.TIL | 리액트 상대 경로 탈출하기(Craco)
리액트에서 페이지를 만들다 보면 여러 컴포넌트들과 recoil을 사용한다면 atom을 import해와야 한다. 그렇게 파일의 규모가 방대해지다 보면 위와 같이 수 많은 ../ 으로 이루어진 import 지옥을 경험할 수 있다. 만약, 리팩토링 등을 이유로 파일의 위치가
[React] craco를 이용한 프로젝트 절대 경로 설정
원티드 프리온보딩을 진행하면서 상대경로를 이용한 복잡한 프로젝트 구조를 개선할 방법으로 craco를 추천 받았다. ../을 반복하는 불편함을 해결할 craco에 대해 알아보고자 한다.페이지 컴포넌트 import보통 App.js나 App.ts에 각 url에 따라 이동할

1.15~16- React masterClass (Framer motion1)
Farmer motion을 사용해서 여러가지 애니메이션 동작을 공부해볼 것이다.사용법은 먼전 npm i framer-motion으로 설치해주고 import를 해준 후import { motion } from "framer-motion";모든 HTML tag들을 <d

항해99 Week_13 WIL
React는 기존의 Vanilla JS( 프레임워크를 쓰지 않은 순수 JavaScript )나 Jquery 사용시불편했던 개발자의 욕구를 충분히 충족시켜주며 성장을 계속하고 있다.하지만 인간은 편안함에 금방 익숙해지고 새로운 불편함을 또 찾고 그것을 고쳐내려 한다.오늘

CRA + Emotion 패키지 설정
Create React App(CRA) 에서 이모션 사용 시 아래와 같이 매번 jsx pragma 선언이 필요합니다. 이 코드를 제거하기 위해서는 바벨 설정이 필요합니다.하지만 기본적으로 CRA는 바벨 사용자 설정을 막아놓았습니다. 다음의 명령어를 수행하게 되면 숨겨져
Typescript React 환경 구성해보기
아래의 환경을 포함하는 React 개발환경을 구성해본다.만들어져있는 보일러플레이트를 사용해도 되지만, 한번쯤은 직접 처음부터 해보는게 의미가 있다고본다.typescriptreact-routerreduxjestcypressCRA를 이용하여 typescript를 지원하는
create-react-app에서 SVG를 ReactComponent로 사용하기
create-react-app(이하 CRA) + electron 환경에서 작업 중에 svg icon 파일을 사용해야 하는 경우가 생겼다. (state에 따라 색상 등을 다르게 주는 등의 작업을 위해..)사실 이전에도 버튼 안에 svg icon을 넣는 것을 시도해보았으나

craco 를 통해 tsconfig.json 에 path 추가하기
CRA을 통해 만든 타입스크립트 프로젝트에서 tsconfig.json 을 수정하면 yarn start시 tsconfig.json 초기화 되는 현상이 발생한다. (CRA github issues) 때문에 craco 를 통해 tsconfig.json를 커스터마이징 하는 방

리액트 다크모드 - emotion
이번에는 emotion을 활용하여 다크모드를 만들어 보겠습니다.emotion을 사용하기 위해서는 몇몇 설정 방법이 필요합니다. 자세한 코드는 깃허브에서 확인할 수 있습니다. 환경typescriptcreate-react-app환경설정 설치css prop 설정 types
React 절대경로 설정
아무생각없이 임포트를 하다보면 과 같이 뭘 가져왔는지는 알겠는데, 이게 대체 어디있는걸 가져온건지 모르겠는 난감할 때가 많다.위와같이 설정을 하고, 프로젝트가 위와같이 구성이 되어있다고 한다면, 과 같이 임포트를 할 수 있다. from뒤의 폴더경로를 모두 써줘야하는 귀