# craco

16개의 포스트
post-thumbnail

React : craco

☃️ React : ../../../

2022년 4월 13일
·
0개의 댓글

#16.TIL | 리액트 상대 경로 탈출하기(Craco)

리액트에서 페이지를 만들다 보면 여러 컴포넌트들과 recoil을 사용한다면 atom을 import해와야 한다. 그렇게 파일의 규모가 방대해지다 보면 위와 같이 수 많은 ../ 으로 이루어진 import 지옥을 경험할 수 있다. 만약, 리팩토링 등을 이유로 파일의 위치가

2022년 2월 24일
·
0개의 댓글
post-thumbnail

[React] craco를 이용한 프로젝트 절대 경로 설정

원티드 프리온보딩을 진행하면서 상대경로를 이용한 복잡한 프로젝트 구조를 개선할 방법으로 craco를 추천 받았다. ../을 반복하는 불편함을 해결할 craco에 대해 알아보고자 한다.페이지 컴포넌트 import보통 App.js나 App.ts에 각 url에 따라 이동할

2022년 1월 27일
·
0개의 댓글
post-thumbnail

1.15~16- React masterClass (Framer motion1)

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

2022년 1월 16일
·
0개의 댓글
post-thumbnail

항해99 Week_13 WIL

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

2021년 12월 12일
·
0개의 댓글
post-thumbnail

React 앱에서 Craco 사용

craco로 create-react-app Version 4 에서 framer-motion 사용하기

2021년 12월 8일
·
0개의 댓글
post-thumbnail

CRA + Emotion 패키지 설정

Create React App(CRA) 에서 이모션 사용 시 아래와 같이 매번 jsx pragma 선언이 필요합니다. 이 코드를 제거하기 위해서는 바벨 설정이 필요합니다.하지만 기본적으로 CRA는 바벨 사용자 설정을 막아놓았습니다. 다음의 명령어를 수행하게 되면 숨겨져

2021년 11월 16일
·
0개의 댓글

Typescript React 환경 구성해보기

아래의 환경을 포함하는 React 개발환경을 구성해본다.만들어져있는 보일러플레이트를 사용해도 되지만, 한번쯤은 직접 처음부터 해보는게 의미가 있다고본다.typescriptreact-routerreduxjestcypressCRA를 이용하여 typescript를 지원하는

2021년 10월 15일
·
0개의 댓글
post-thumbnail

Style

css를 따로 스타일시트로 분리하지 않고 자동적으로 컴포넌트 내부에서 쓸수 있게 해주는 라이브러리 react 내부에서 동작하도록 만들어주는 라이브러리로 위에 코드 처럼 css를 각 컴포넌트마다 관리할수 있도록 스타일을 제공해준다. Vue에서 template 태그, sc

2021년 10월 8일
·
0개의 댓글

craco를 사용하여 tsconfig 파일 옵션 설정

craco를 사용하여 tsconfig 파일 옵션 설정

2021년 9월 9일
·
0개의 댓글

create-react-app에서 SVG를 ReactComponent로 사용하기

create-react-app(이하 CRA) + electron 환경에서 작업 중에 svg icon 파일을 사용해야 하는 경우가 생겼다. (state에 따라 색상 등을 다르게 주는 등의 작업을 위해..)사실 이전에도 버튼 안에 svg icon을 넣는 것을 시도해보았으나

2021년 7월 12일
·
0개의 댓글
post-thumbnail

craco 를 통해 tsconfig.json 에 path 추가하기

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

2021년 7월 9일
·
0개의 댓글
post-thumbnail

CRA(create-react-app) webpack config 수정

CRA(create-react-app)에서 웹팩 수정하는 방법

2021년 7월 2일
·
0개의 댓글
post-thumbnail

[TIL 53] Typescript | 절대경로 설정

[TIL 53] Typescript | 절대경로 설정

2021년 6월 9일
·
0개의 댓글
post-thumbnail

리액트 다크모드 - emotion

이번에는 emotion을 활용하여 다크모드를 만들어 보겠습니다.emotion을 사용하기 위해서는 몇몇 설정 방법이 필요합니다. 자세한 코드는 깃허브에서 확인할 수 있습니다. 환경typescriptcreate-react-app환경설정 설치css prop 설정 types

2021년 5월 20일
·
0개의 댓글

React 절대경로 설정

아무생각없이 임포트를 하다보면 과 같이 뭘 가져왔는지는 알겠는데, 이게 대체 어디있는걸 가져온건지 모르겠는 난감할 때가 많다.위와같이 설정을 하고, 프로젝트가 위와같이 구성이 되어있다고 한다면, 과 같이 임포트를 할 수 있다. from뒤의 폴더경로를 모두 써줘야하는 귀

2021년 5월 20일
·
0개의 댓글