예전에 돌아갔던 웹, 다시 창고에서 꺼내서 배포해보기(수정x) / npm update, npm outdated

현재 상황

예전에는 잘 돌아갔던 웹이다. 그런데 창고에서 꺼내서 오랜만에 돌리려고 하니 무수히 많은 에러가 발생했다. 지금 5시간째인데, 곧 6시간이 될 것 같아서 작성한다. 하루가 꼬박 걸렸다...

 

git에서 가져오기

우선 나의 개발 환경은 vscode이고, vue로 작성한 파일을 조금 수정할 것이다. git에서 파일을 가져오려면 먼저 명령어를 수행해주어야 한다.

git clone <git의 주소>

 이렇게 하면 내가 지금 켜놓은 창으로 바로 clone 해서 가져온다.

pull이든 clone이든 비슷하니, pull -> push 라는 과정을 잊으면 안된다! 만약 pull 하기 전 push를 한다면, 현재 로컬 저장소와 git의 저장소와 위치가 맞지 않아서 계속해서 commit 시 에러가 발생할 것이다. 이를 사전에 방지하기 전에 먼저 pull을 해주자!

 

오류 1(호환성 문제)

[DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.

내가 현재 맞닥뜨린 오류는 바로 이것이다. 정말 골치아프게도.. 최신 따끈따끈한 Node.js를 방금 다운받았는데, 바로 오류가 발생했다. 너 호환성 안 맞으니까 빨리 환불해와! 이 말이다.

 

npm outdated

이런 상황에서 정말 좋은 명령어는 바로 outdated다. 각각의 도구들은 모두 각자의 버전을 가지고 있다. 이 버전들을 알려주고, 패키지 중 버전 관리가 필요하면 알려주는 명령어이다. 참 좋다!

• current : 현재 패키지 버전
• wanted : package.json에 작성해놓은 버전. 사용 가능한 최신 버전
• Latest : 패키지의 최신 버전

우리가 호환성을 맞추기 위해서는 current 와 wanted가 같은지를 확인하면 된다. 만약 다르다면...업데이트가 필요하다.

이럴 때는 간편하게 명령어 한 줄으로 해결할 수 있다.

npm update 패키지

이렇게 하면 해당 패키지만 업데이트할 수 있고, 만약 패키지명을 작성하지 않으면 업데이트가 필요한 패키지라면 모두 한번에 업데이트할 수 있다.

 

오류 2(호환성 문제 - node-sass)

이번에는 node-sass가 문제다.

Syntax Error: Error: Node Sass version 9.0.0 is incompatible with ^4.0.0.

정말 호환성...골치아프다. 이게 Node.js 14버전이랑 16버전이 다르다고 한다. 14버전까지는 4.14.1로 install 해주면 되고, 16버전부터는 node-sass 6.0.0 으로 맞추면 된다.

npm install node-sass@4.14.1 #14버전까지
npm install node-sass@6.0.0 #16버전부터

 

만약 이렇게 해도 계속 오류가 뜬다면, 계속 진행하자. 

rm -rf package-lock.json

rm -rf node_modules

호환성 방해 요소들을 싹 다 지운다. 어차피 이것들은 다시 깔면 자동으로 생기는 폴더 및 파일들이라 괜찮다.

npm install

이렇게 하면 다시 생겨나니 걱정하지 않아도 된다.

 

오류 3(webpack 문제)

이번엔 또 webpack이 난리다. 진짜..프로젝트 해놓은거 다시 복구시킬 때 함부로 업데이트 하지 말자..ㅋㅋ복구하면서 생각한 건 차라리 업데이트한 김에 프로젝트 하나 만들걸 그랬다는 생각이다.

그래서 webpack을 깔았더니, 이것도 최신 버전인지 5로 깔았다고 오류가 길게 떴다...하...제발...

그래서 4로 바꿨더니, sass-loader도 바꾸랜다... 바꿨다. 긴 오류는 나를 말 잘 듣게 만든다..

진짜진짜진짜 최종 버전

그리고 나타난 새로운 오류...

Syntax Error: Error: PostCSS received undefined instead of CSS string

이렇게 떠서 찾아보니 node-sass를 하나 더 만들어주면 된다고 한다.

npm install --save node-sass

이런데도 코드도 같이 정신이 나갔는지 긴 오류를 뱉어내길래 다시 한번 더 node-sass가 당장 필요하다고 주입시켰다.

npm rebuild node-sass

이제 좀 말을 잘 알아듣더라. 역시 주입식 교육,,짜릿해!

 

THE END

마침내!!!!!!!!!하루종일 끙끙대다가 해냈다ㅜ

 npm run serve

내 포트폴리오 일부분...부끄러워서 전체 화면 캡처는 못하고..ㅎ(허접해서ㅋㅋ)

예전에 만들어놨던 화석템인데, 이걸 창고에서 꺼내는 게.. 관리하는 것보다 더 힘든 것 같다ㅜ

 

오늘의 교훈

1. 절대 절대 쉽게 Node.js 버전을 업그레이드 하지 말 것..ㅋㅋ 어차피 nvm을 불러오게 될 것이다.
2. 그럼에도 업그레이드 해버렸다면 서둘러 nvm을 사용할 것
3. 그리고 망했다면 재빠르게 up&down 게임으로 버전을 다운그레이드하면서 짝을 맞춰줄 것
4. 모든 프로젝트에 버전을 써줄 것!(GIT 등)