brunch

You can make anything
by writing

C.S.Lewis

by 유자 Dec 06. 2021

02. 프로그램 --version

최신 버전은 안 된다. 특히 초보한테는.

생활코딩 유투브 - http://www.youtube.com/user/egoing2

개발자는 굉장히 많은 것을 설치한다. 모든 개발 서적 1, 2장과 강의 1시간은 필요한 프로그램 설치와 환경변수 등 무언가를 설정하는 데 많은 시간이 걸린다. 제가 혼자 공부하면서 가장 많이 들었던 [생활코딩] 유투브 채널에서 '설치'라고 검색하면 저 만큼의 영상이 나온다. 단순히 문서 작성할 때 한글 프로그램 한 개만 있으면 모든 것이 해결되는 이전 업무와 달랐다. 코딩 언어 1개를 사용하면서 설치해야 되는 것은 1개가 아니다. 어쩌면 이걸 설치하는 과정에서 프로그래밍을 포기하는 경우도 있다. 나도 react를 윈도우에 설치하다 안 되서 노트북 한 번 초기화 하고 포기한 사람이기에 아주 잘 이해한다.  처음에는 왜 이렇게 많은 것을 설치해야되는지, 근데 이것들이 어디에 사용되는지 아무도 알려주지 않아서 의구심이 들었다. 개발이란 코드를 입력하고 실행하는 것만 되지 않는가? 하면서 한 개 설치하는 것에도 바짝 긴장했던 1개월 먼지뭉치같은 때가 있었다. 그랬었다.


버전 문제를 왜 가장 처음 이야기하냐면, 처음에 가장 많이 접하게 되고 또 가장 쉽게 해결할 수 있는 에러코드이기 때문이다. 종종 윈도우가 업데이트 되면 잘 되던 기능이 안 되거나 심각한 프로그램 오류가 발생하는 경우가 있지 않는가. 개발을 하게 되면 내가 사용하는 프로그램들이 서로 사이가 안 좋아서 다양한 오류를 뱉어내는 것을 볼 수 있다.






모든 직장인들이 회사에 출근하면 가장 먼저 해야하는 건 자신이 일을 하기 쉬운 환경을 만드는 것이다. 컴퓨터에 필요한 프로그램과 설정을 하고, 책상 위 물품을 구비하고, 각종 물품과 취향에 맞는 간식과 음료를 준비한다. 

상담 일을 할 때에는 만년필에 좋아하는 색의 잉크를 채워넣고, 빳빳한 종이로 상담일지를 만들어두고, 깔끔한 디자인의 연간 달력을 사비로 구매하여 일정 관리를 했다. 커피는 카누 블랙이나 투샷라떼를 마시고, 커피를 너무 많이 마셨다 싶으면 마리아쥬나 웨딩그린을 우려내기도 했다. 간식은 비스킷 류를 좋아하지만 역시 초콜렛이 최고다. 개발자로 일을 할 때에도 이와 비슷하면서도 조금 다른 것이 필요했다.






벨로퍼트와 함께하는 모던 리액트 - https://react.vlpt.us/


개발자가 가장 먼저 해야하는 일을 자신이 사용하는 컴퓨터에 개발(작업)환경을 설정하는 것이다. 공장 초기화된 맥북을 받으면 내가 사용할 프로그램과 관련된 것을 설치한다.

우선 맥북을 받았으니 brew 라는 것을 설치하란다. 터미널에 저 코드를 붙여넣으라는데 맥북을 처음 받아들었을 땐 터미널이 뭔지도 몰랐다. 좀 더 자세하게 설명해주면 참 좋았을텐데. 눈치껏 구글에 검색해서 터미널을 배웠다.



그리고 그 터미널이 보기도 힘들고 사용하기 불편하니 좀 더 시각적으로 편하..고 예뻐... 보이는 oh-my-zsh를 설치하라는 팁을 들었다. 전혀 편하고 예뻐보이지 않았지만 아무튼 그렇다 하니 설치를 했다. 까만 화면에 흰색, 형광녹색만 있던 화면에 좀 더 다양한 색이 생겼다. 개발자들의 미의식을 여기서 눈치챌 수 있었다.

참고로 맥북 m1에는 이 프로그램이 제대로 실행이 안 될 수 있다. 나처럼. 그냥 포기하는 것도 방법이다. 크게 필요한 것은 아니니까.


자, 굳이 이것을 말한 이유는... 이제부터 에러가 시작되기 때문이다.





개발자는 자신들이 직접 프로그램을 만들 수 있기 때문에 필요한 것은 사소한 것 하나라도 모두 코드로 만들어둔다. 그리고 자신이 만든 것을 공개하고, 다른 사람들이 많이 사용할 수록 기쁨을 느낀다. 처음에 만든 코드에서 버그가 발견되거나 다른 기능이 추가가 되면 버전을 업그레이드 한다. 

node.js 프로그램을 찾아보면 지금까지 어떤 버전이 언제 어떻게 업그레이드 되었는지 이런 식으로 표시해둔다. v12부터는 계속 유지보수해서 사용할 수 있고, 가장 최신은 v 17 이며, v18은 개발 중으로 2022년에 최초 공개할 예정이라고 한다. 내가 가장 최근에 설치했을 때는 v16이었는데 꾸준한 업데이트가 이루어지는 걸 알 수 있다. 



이렇게 꾸준히 업데이트를 하면 당연히 무언가 기능이 좋아지니까 사용성이 편리하거나 장점이 있을 것이다. 다만 문제는 프로그래밍은 다양한 프로그램와 언어와 라이브러리 등등이 함께 사용된다는 것이다. 그래서 업그레이드를 하면 생각지도 못 한 새로운 에러가 발생한다. 

node.js 버전 14에서는 멀쩡하게 되던 것이 node.js 버전 16에서는 문제가 생긴다. 이 해결방법은 그냥 node.js 버전16 을 삭제하고 14를 설치하는 것이다... 




이 버전 문제때문에 내가 가장 많이 봤던 에러 2가지를 다시 찾아왔다.

나는 할 줄 아는 것이 많이 없었기 때문에 웹 페이지를 만드는 것부터 시작했다. REACT 리액트, GATSBY 개츠비, STRAPI 스트라피로 홈페이지가 구성되어 있었고 css를 편하게 하기 위해 SASS 사스 외 다양한 라이브러리를 설치했었다. 

하지만 SASS 사스와 STRAPI 에서 문제가 발생했다. 둘다 node.js와 관련된 에러였다. 

하지만 에러를 안내하는 말과 해결방법이 달랐다. 


SASS 사스의 경우에는 노드 버전에 최적화된 사스 버전을 따로 공개해 둔 곳이 있었다. 게다가 사스는 더 이상 개발이 되지 않고 node-sass 라는 것으로 살짝 바뀌었다. 이게 바뀌면 라이브러리를 설치할 때,                                                                                                                                          

yarn add sass



yarn add node-sass


로 바뀌는 아주 큰 문제가 된다.

코딩을 이제 막 시작한 사람은 기록된 책과 영상만 들여다보고 따라하는데, 그 사이에 라이브러리 자체가 지금처럼 변경된 사실을 모른다거나 프로그램 버전이 안내된 것과 달라 생기는 이런 문제를 마주하고 코딩을 포기하게 된다. 




버전과 관련된 두 번째 문제는 큰 기능이 업데이트 되면서 문법 자체가 변경되었을 때이다.


yarn add react-router-dom


내가 사용하는 REACT 리액트는 라우터 사용을 위해 라이브러리를 따로 설치해야하는데, 이렇게 코드를 입력하게 되면 최신 버전인 react-router-dom 버전 6이 설치된다. 문제는 이 라이브러리가 6으로 업그레이가 되면서 문법이 미묘하게 살짝 바뀌었다...!


router  v5
router v6


Switch가 Routes로 바뀌고, element 라는 게 생기면서 뭔가 좀 더 짧아지게 되었다. 여기엔 없지만 exact 도 사용하지 않아도 기능이 그대로 유지된다. 기능은 오히려 발전을 했지만, 버전 5에서 사용하던 문법을 버전 6에서 사용하면 에러가 발생한다.... 나에게는 그리 달갑지 않은 업데이트였다.

 이렇게 문법 에러는 터미널을 통해서 대부분 확인 할 수 있지만, 초보일 때는 그저 빨간색 에러 글자만 봐도 당황하게 된다. 분명 책에서는, 동영상 강사와 똑같이 입력했는데 왜 에러가 발생하는 건지! 일단 버전 문제를 의심해야한다.  그래서 이전 버전을 설치하려면 


yarn add react-router-dom@5.3.8


이런 식으로 버전까지 입력해주어야 한다.




마지막으로 또 다른 버전 충돌 문제이다. 

스택오버플로우는 개발자들이 좋아하는 3대 사이트(구글, 깃헙, 스택오버플로우) 중 하나이다. 대부분의 질문은 여기 있다고 하는데 그래서 에러 코드를 검색하면 이 사이트가 상위에 등장하는 것을 자주 볼 수 있다. 나와 똑같은 에러를 발견하고 울부짖는 지구촌 사람을 감상해보자.


보통 에러 코드가 나오는 사람은 자신의 컴퓨터와 환경설정을 구구절절 이야기한다. 
이 사람의 node -v 는 15.9.0 이라고 한다.

그리고 회색 음영이 되어 있는 것을 보면

>=10.16.0 <=14.x.x. Got 15.9.0 error

영어를 못 해도 감이 오지 않는가.


내 노드 버전 15.9.0이 높아서 문제가 발생한 것이다... 노드를 10.16.0과 14.x.x 사이로 설치하면 해결되는 문제였다. 


이러한 버전 문제들은 의외로 공식 사이트나 공식 문서를 잘 살펴보거나, 실행 후 터미널만 잘 살펴봐도 알 수 있는 경우가 많다. 대다수가 영어로 되어 있어서 눈에 초점이 나가고 잘 읽혀지지 않지만 아무튼 읽어볼 필요가 있다.




개발 6개월 차. 무언가 에러가 났을 때의 대처하는 방법을 나름 찾았다.


1. 방금 입력한 코드를 되돌린다.                                              -> 그래도 안 되면

2. vs code와 터미널을 껐다 킨다.                                            -> 그래도 안 되면

3. 내가 최근 설치한 무언가를 삭제하거나 버전을 낮춘다.              -> 그래도 안 되면

4. 맥북을 껐다 킨다.                                                              -> 그래도 안 되면

5. 물을 마시고 와서 구글에 검색해 본다.                                    -> 그래도 안 되면

6. 깃헙에서 원래 있던 코드를 다시 pull 받는다.                          -> 그래도 안 되면

7. 눈치껏 사수가 한가해보일 때 도움을 요청한다.



에러가 발생했다는 건 아무튼 일단 내가 무언가 잘못했다는 걸 인정하면 된다. 

그게 가장 어려운 일이긴 하지만.


브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari