지금 나는 노마드코더의 리액트 강의를 다 듣고 '리액트를 다루는 기술' 책을 열심히 공부하고 있다!
중간중간 버전 에러도 다 메모해가며 나름 뿌듯할 정도로 공부하고 있는데, 오늘은 번번히 내 발목을 붙잡는,,^^ 자주 만나서 반가울 정도의 에러 해결법을 메모하고자 급하게 블로그를 켰다!
(빨리 챕터20 끝내고 자고싶은 이 와중에,,,)
내가 만난 에러는 바로 이것!
항상 yarn eject 만 해주면 이 꼴이 나면서 모든 파일의 import 에 빨간 줄이 죽죽 그어진다,,,후
여기저기 구글링했지만 그닥 소득이 없어서, (package.json 파일의 script 부분 수정하는 방법, start 명령어 작성할 때 NODE_ENV = development 쓰기,,,등)
에러 메세지를 그대로 읽고 수정해보기로 했다! 에러 메세지 내용이 대충
"bebel-preset-react-app 은 NODE_ENV 나 BABEL_ENV 가 development, production, test 등 특정한 값으로 필요한데, 지금 undefined 로 뜨니까 지금 프로세싱중인 이 파일을 참고해보렴!"
라고 하니, 일단 저 bebel-preset-react-app 의 index 파일을 확인해봤어요!
// .. 주석
const create = require('./create');
module.export = function(apt, opts) {
// .. 주석
const env = process.env.BABEL_ENV || process.env.NODE_ENV;
return create(apt, opts, env)
}
이렇게 작성되어있었는데, 제가 시도한 방법을 한 번 줄줄 외워보겠습니다... 혹시 이 글을 보고 계시는 분이 있다면,, 한개씩 따라해보심이 어떠신지,,?
1. dotenv 라이브러리 설치 후 .env 파일 작성해주기
일단 저 _ENV 가 undefined로 뜬다고 하니, App 컴포넌트에서 콘솔로 찍어봤는데 역시나 언디로 뜨더라..그래서 직접 작성해주려고 .env 파일을 프로젝트 폴더에 작성해줬다!
2. bebel-preset-react-app 의 index 파일에 적용해주기
3. BABEL_ENV 파일 앞에 REACT_APP 붙여주기
작성한 파일을 해당 Index 파일에 적용해주기 위해, 라이브러리를 불러오고 컨피그까지 해주었당. 그리고 구글링하다가 BEBEL_ENV 앞에 REACT_APP 을 붙여줘야한다길래 붙여줬다... 실제로 콘솔로 찍어봤을때 노드만 뜨긴 하던데 왜지!!
작성한 파일은 다음과 같당!
이렇게 작성하고 나서도 에러가 사라질 기미가 없길래 포기할 뻔..했지만!
vs code 까지 껐다 다시 켜봤더니 멀쩡해졌다! 야호,,
그럼 여기까지...다음에 다시 이 에러가 떴을 떄 내가 또 시간을 버릴까봐 메모해놓는,, 에러 극복기 끄읏!
+) 추가! 현재 서버 사이드 렌더링을 공부중인데, 뒤에 나오는 파일 작성 중 이렇게 바로 작성하는 방법도 나왔다! 꼭 .env 파일을 생성하지는 않아도 되는 듯!
process.env.BABEL_ENV = "production"
process.env.NODE_ENV = "production"
'Dev > react' 카테고리의 다른 글
webRTC 찍먹해보기 / 1:1 영상채팅 실습 / 전세계를 떠도는 개발미아 (0) | 2022.08.14 |
---|---|
antd 문제는 해결되었는가? 그렇다 / antd description 과 form 사이 / 여담으로 react-to-print 까지 (0) | 2022.07.19 |
React 로 포트폴리오 페이지 만들기 / 3일만에 만든 포폴의 퀄은,,? / slick-carousel 사용법 (0) | 2022.03.14 |
firebase 사용기와 resizing extension 실패기 / build 후 api key 보안 이슈까지! (0) | 2022.03.06 |
리액트를 다루는 기술을 끝내며 / 내가 까먹을까봐 정리하는 react-router-dom@6 버전 수정사항 (0) | 2022.01.28 |