[삽질] - CRA의 eject

별안간 개고생을 했더랬다.

 

1. 사건의 발단

최근에 자바스크립트 기본을 다시 공부하기 시작하면서

기존에 CRA로 만들고 있던 쇼핑몰 프로젝트를 2개월 정도 만에 들어갔는데,

이게 웬걸..?  

'ERR_OSSL_EVP_UNSUPPORTED' 라는 에러와 함께 로컬에서 실행이 안됐다.

찾아보니 node.js 17 이후의 버전에 적용되는 Open SSL3.0의 기준에 나의 어떤 모듈들이 입구컷 당한 모양이었다.

이후 package.json의 scripts를 다음과 같이 바꿔서 실행하세요~ 라는 해답을 찾아 package.json을 열어보았다.

replace "start": "react-scripts start" by "start": "react-scripts --openssl-legacy-provider start"
replace "build": "react-scripts build" by "build": "react-scripts --openssl-legacy-provider build"

하지만 내 scripts 에는 "react-scripts start" 대신 "node scripts/start.js" 이라고 되어있는것이 아닌가...

아무 영문도 모른채 구글을 막 뒤지기 시작했다.

 

 

2. 문제의 원인

그렇게 속절없는 시간이 흐르고 나서야 모든 원인이 eject 명령어 때문이란 것을 알게되었다.

때는 바야흐로 인강을 통해 처음 react를 배우며 하라는대로 이런거 저런거 막 따라하던 시기.

CRA로 프로젝트를 생성했었다. 인강에서는 'react를 쉽게 시작하게 해주는 고마운 친구입니다.' 라고 설명해 주었다.

그리고 프로젝트 생생 후 바로 다음날.

나는 어떤 키워드로 구글 검색을 한 뒤 아무 생각없이 npm run eject를 실행했다.

뭔가가 되지 않아서 검색해보니 나왔던 결과였던 것으로 기억한다.

그때 당시에는 eject가 어떤 변화를 주는지 아무것도 몰랐다.

단지 '이걸 입력하고 실행하면 안되던게 될거에요!' 하길래 했었다.

package.json이 무엇인지, 그 안에 적혀 있는 Dependencies가 무엇인지, 바벨이 무엇인지, 웹팩이 무엇인지

아무것도 알지 못했다.

 

3. 원인에 대한 공부

반성하며 eject 까지의 과정 中 몰랐던 것을 전부 공부했다.

 

CRA

CRA는 react를 통한 프로젝트 첫 단계에서 필요한

여러 라이브러리, webpack, eslint 설정 등 귀찮고 까다롭지만 반드시 해야하는 필수적인 설정이

이미 다 셋팅 되어있는 보일러 플레이트이다.

또한 CSS에 -webkit 과 같은 접두사를 자동으로 적용 시킨다. 

우리가 해야할 일이 이미 다 되어있기 때문에 사용하는 것만으로 프로젝트마다 시간을 절약할 수 있다.

CRA는 'react를 쉽게 시작하게 해주는 고마운 친구입니다.' 라는 말이 찰떡이더라.

 

eject

CRA로 프로젝트를 생성해 보면 대신 해주었다던 설정파일이나 종속성 같은 것이 하나도 보이지 않는다.

CRA가 자체적으로 숨겨놓았기 때문이다.

이 때 숨김처리된 파일,폴더들을 전부 꺼내 볼 수 있게 하는 명령어가 npm run eject이다!

뭔가 엄청난 일을 벌이는 것이기에

'한 번 실행시 다시는 되돌릴 수 없다' 는 경고 문구와 함께 정말 실행하겠냐고 질문도 한다.

 

eject 명령어를 실행하면

config, scripts폴더가 나타나고

package.json에 모든 Dependencies, babel, jest 등 오만가지 전부 등장한다.

 

eject를 사용하는 이유

프로젝트 진행시 상대경로의 지옥에서 벗어나기 위해 절대경로를 사용하고 싶다거나 뭐 등등 이런 저런 요행을 바랄때!
webpack의 설정 관련 파일을 수정해야 하는데

이런 상황에 숨겨져있던 모든 설정파일들을 끄집어 내기 위해 사용한다고 이해하면 된다.

이 외에도 C.R.A가 숨겨놓은 파일들 중에 커스터마이징을 해서 사용하고 싶을 때 사용한다.

 

 

eject의 단점

eject를 사용함으로써

CRA가 자동으로 해줬던 webpack, babel 등의 설정들을 사용자가 유지보수 해야한다!

또한 라이브러리 간의 의존성도 사용자가 신경써야한다.

예를 들어 프로젝트 진행중 새로운 패키지가 필요해서 설치하거나 할때 다른 패키지와의 의존성을 체크해야한다.

 

 

 

4. 문제의 해결

위와 같은 특성도 공부하지 않고 아무고토 모르고 사용했음에 반성하고 해결법을 찾기 시작했다.

코린이인 내가 eject 이후의 알지도 못하는 webpack, babel 등의 셋팅을 할수 있을리가 전무했기 때문이다.

 

다행하게도 한번 다시는 되돌릴 수 없다는 말과는 다르게 돌릴 방법은 존재했다.

방법은 다음과 같다.

 

1. config, scripts, node_modules 3개 폴더 전부 삭제

2. react-scripts 패키지 재설치

3. package.json 파일 내 scripts 내용 수정

원래대로 되돌린다.

 

위와 같은 방법으로 프로젝트를 되살릴 수 있었다.

 

 

 

 

하지만 뭔가 기존과 다르게 로컬 개발환경을 띄우는 시간도 오래 걸리는 것 같고 여러모로 찜찜했다.

결국 새로운 repository를 만들어 프로젝트를 이사했다.

parcel 이라는 새로운 모듈 번들러를 적용하여 react와 조합시켰다. 

 

하지만 ... 또 한번 문제가 발생한다.

 

 

 

 

다음 -삽질- 에 계속....