스테이폴리오, 발표 전날 라이브러리 삭제하기..

Seokho·2022년 1월 18일
0

STAYFOLIO Project

목록 보기
3/3

글을 쓰는 이유

마감 전날 밤 8시에 겪은 최악&최고의 경험을 기록한다. 무슨 일이든 항상 프랜B까지 고려해 디테일한 하루의 플래닝을 세우는데, 정말 처음으로 계획이 틀어지는 경험을 했다.
당시 처음 겪어보는 이슈로 정신적으로 매우 힘들었지만, 돌아보니 개발자로서 아주 소중한 경험이기에 열심히 기록해본다!

일단 MUI 라이브러리를 사용한 이유는 다음과 같다. 지금까지 실력향상을 위해 순수 자바스크립트로 모든 기능을 구현했다. 하지만 실무에서 언젠가 라이브러리를 사용하게 될텐데, 어떤 기준에서 라이브러리를 선택하는지, 어떻게 사용하며 커스텀하는지 등 그 사용과 접근 방법에 스스로 경험하고 고민해보고 싶었다. 그리고 확실히 디자인이 이뻤다. 못생기면 하기 싫어..

Overview

협업을 하며 MUI 라이브러리를 사용했는데, 버전의 의존성을 고려하지 않고 만들어서 merge를 하는 과정에서 문제가 생겼다. 분명 같은 repo에서 clone받아 프로젝트를 진행했음에도 리액트의 버전이 달라 충돌이 일어난 것이다. 게다가 엎친 데 덮친격으로 내가 사용했던 MUI Slider 컴포넌트가 리액트 버전 16를 지원하지 않았기 때문에, 순수 CSS를 사용하여 직접 구현하여 문제를 해결했다.

문제의 흔적

프로젝트 마감 전날 목표했던 모든 기능을 구현하고 팀원들과 merge를 하던 중 갑작스러운 충돌이 생겼다. 문제의 원인은 나의 리액트 버전과 팀원들의 리액트 버전이 달라서 충돌이 일어난것.

내 리액트 버전 17.0

팀 리액트 버전 16.14

충돌의 원인

왜 이런 일이 일어났을까? 사실.. 아직도 정확히 원인을 찾지는 못했지만, 내가 MUI 라이브러리를 설치하는 과정에서 같이 상위 버전으로 업데이트가 되어 발생하지 않을까 추측한다.

해결

사실 지금이라면 버전 다운그레이드 하거나, 전체 복붙해서 옮기거나 등 여러가지 해결방법을 쉽게 논의해볼 수 있겠지만 당시 상황은 마감 전날 저녁이었고, 처음 경험하다보니 평정심을 잃어버렸다.

해결의 과정

만약 이 상황이 나 혼자만의 문제라면 상관없었다. 하지만 가장 큰 문제는 나와 직접적으로 연결되는 페이지를 맡은 다른 팀원과 연동하면서 발생하는 충돌이 문제였다. 그 팀원은 16버전에서 라이브러리를 이용해서 캘린더를 구현했는데, 그 캘린더의 정보와 내가 구현한 가격 슬라이더가 연동이 되어야했다. 하지만 merge 후 버전 충돌이 발생하여 둘중 하나는 구현했던 기능을 포기해야될 상황에 이르렀다.
도저히 둘이서 해결할 수 없다고 판단하여 팀원들과 회의를 했고, 결론적으로 2가지의 방법이 나왔다.

첫번째. 나의 버전을 16버전으로 다운그레이드
두번째. 나와 연동된 팀원의 버전을 17버전으로 업그레이드

갈등의 심화

두가지의 방법 중 가장 좋은 방법은 선택하기 위해 멘토님들에게 피드백을 받았는데, 현직에서 이런상황에 충돌이 일어났다면 사이트에 더 많은 기능과 페이지를 구현한 사람의 버전을 유지하고 상대방의 버전을 수정하는것이 옳다는 결론이었다.

화나고 짜증났지만 당연히 어쩔수 없었다. 내가 이 충돌의 원인이었고 문제를 일으켰기 때문에 내가 해결해야하는 것이 당연한것 아닌가. 그리고 나와 연동되는 팀원은 팀의 리더로서 50% 이상의 기능을 구현했다. 하지만 며칠동안 힘들게 구현한 기능을 한번의 실수로 삭제해야 한다는 사실을 받아들이기 쉽지 않았다.

어찌됫건 내가 구현한 내용은 메모장에 전부 복사해놓고, 팀 repo를 새로 clone하여 붙여넣기를 했다. 이때까지만해도 순조롭게 해결되고 있다고 생각했다. 하지만 역시 문제는 이렇게 쉽게 해결되지 않는다..

내가 구현한 MUI Slider가 실행이 되지 않고 계속 에러가 발생했다. 원인을 찾아보니 읭?엥? 리액트 16버전에서는 Slider를 지원하지 않는다는 것이었다. 처음에 너무 당황스러웠다. 아니 버전의 차이가 그렇게 크지도 않는데 이걸 지원 안한다고? 그럴리가 없다는 생각에 다같이 16버전의 Slider내용을 구글링했지만, 어디에도 없었다..

해결 완료

이 과정에서 시간은 벌써 밤 11시가 넘어가고, 당장 다음날 최종 발표를 준비해야했다. 그래서 마지막 해결책은 MUI 라이브러리를 포기하고 CSS로 가격 슬라이더를 구현하는 방식이었다. 한번도 구현해보지 않았기에 막막하고, 이전에 MUI로 열심히 구현했던 코드를 포기해야 한다는게 너무 힘들었지만, 어떻게든 완성을 해야겠다는 마음으로 버티며 구현했다.

충돌 전 MUI Slider 구현 영상

충돌 후 CSS Slider 구현 영상

배운점

이미 지나간 일은 지나갔고! 중요한것은 이 경험을 통해서 내가 무엇을 배웠는지 파악하고, 이를 성장의 발판이 될 수 있도록 학습하면 된다!
일단 라이브러리는 언제나 신중하게 사용하자. 처음에는 다양한 라이브러리를 설치하고 직접 사용하는 것이 좋은 방법일거라 생각했지만, 예상치 못한 에러가 자주 발생했다. 다음에 라이브러리를 사용한다면, 꾸준한 업데이트와 관리가 이루어지는지, 구현해야 하는 기능을 커스텀할 수 있는지의 여부와 어떤 방식으로 활용 가능한지를 꼭 확인하고 선택할 것이다.
그리고 가장 중요한 버전관리와 package-lock.json 파일을 수시로 확인하며 초기세팅과 비교시 문제가 없는지 확인할것이다.

그때는 절망적이었지만, 차라리 지금 경험한게 아주 다행이라는 생각이 든다. 만약 회사에가서 저런 일이 발생했다고 생각해보면 끔찍하다. 이번 경험으로 배운게 많으니, 다음 프로젝트할때 아주 유용할것으로 예상된다!

profile
같이의 가치를 소중하게 생각하는, 프론트엔드 개발자 이석호 입니다.

0개의 댓글