[프로젝트 리팩토링] nowmusic에 리액트 도입

면접 회고에도 적었듯이, 나우뮤직을 리팩토링 해보고자 3년간 묵혀두었던 코드를 꺼내보게 되었다.

리팩토링 목표

☑️(기존) jquery를 이용한 절차지향적이고 작성도, 수정도, 보기에도 불편한 코드
-> (목표) 조금 더 보기 좋은 코드로 형태를 변경

☑️(기존) 같은 선택지에서 같은 결과를 도출
-> (목표) 결과를 비슷한 카테고리 내에서 랜덤하게 보여주도록 수정

리팩토링 시작

코드를 뜯어보니 코딩을 전혀 모르던 시절에 박치기 하면서 만들었다보니 형편 없었다. 

엄청난 하드코딩

함수도 제대로 만들 줄 몰라서 만들었던 것 같다. 프로그램 자체는 굉장히 단순한 로직인데 모든 컴포넌트를 하드코딩하여 리팩토링이 아니라 거의 새로 만들어야 했다. 나의 최종 목표는 "다양한 값을 보여줄 수 있게 변경하는 것"이었기 때문에, 데이터를 모아서 사용할 수 있도록 정리하는 것이 필요했다. 

문제 찾기

페이지를 hashchange를 이용하여 이동하는 방식으로 구현되었다. 아마 페이지가 reload되지 않고 hash값이 변경되면 hashchange 이벤트가 발생하여 필요한 부분만 재로드하는 방식이라 그렇게 구현했던 것 같다.

기존엔 #good 을 path로 넘겨 그에 따른 코드를 넘겨주는 방식이었다. 그러면 해당 path에 따라 함수를 실행시키는 것이었는데...

그래도 과제로 제출하겠다고 열심히 타이핑 했던 걸 생각하면 눈물난다

이 방식은 데이터가 동적으로 변경될 수 있는 함수지만 데이터를 변경할 수 없고, 해당 컴포넌트를 랜더링하고 싶으면 일일이 타이핑해서 화면에 삽입하는 방식으로 세상에서 제일 비효율적인 코딩을 해야 한다. 심지어 저 값은 함수일 필요도 없는 문자열이다. 기초적인 언어 지식도 없는 상태에서 진행되었음을 알 수 있다.

리액트 도입

페이지 전환 시 react-router-dom을 이용하여 더 직관적이고 관리하기 좋은 SPA로 만들었다.

path를 전달하고, 그것에 따라 동적으로 컴포넌트를 생성할 수 있도록 컴포넌트를 분리하였다.

 

반복되는 iframe 태그를 감싸주었다.

필요한 형태로 Link를 감싸 사용하였다.

 

기분을 질문하는 코드가 보기 좋게 정리되었다.

 

JSON으로 데이터 정리

기존의 코드는 관련 데이터가 분산되어 있어 전혀 연관성이 보이지 않는다. 하나를 수정하면 찾아가서 그에 따라 왔다갔다 하며 수정해줘야 했다. json으로 관련 데이터를 묶어 배열로 사용할 수 있도록 수정하였다.

최선이라는 것은 아니다. 급한대로 했다.

 

json으로 데이터를 묶어주니 기분에 따른 감정 옵션을 보여주는 코드와 플레이리스트를 보여주는 코드를 가독성과 활용성 좋게 변경할 수 있었다.

휴

gh-pages로 깃헙 페이지에 올리기

요즘에 gh-pages라는 아주 좋은 라이브러리가 나와있길래 냉큼 사용했다.

https://velog.io/@leehy0782/GitHub-Pages-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0-with-React

GitHub Pages 배포하기 with React

 

이분이 정리해두신 걸 엄청 유용하게 보았다.

이것만 보고 다했다.

감사합니당...(꾸벅꾸벅..)

 

 

이 리팩토링을 시작한 이유는 랜덤한 결과값을 내도록 변경하는 것이기 때문에 어떤 방식으로 진행하면 좋을지 고민해봐야겠다. 아무래도, url을 일일이 다 저장해서 랜덤값을 돌리는 것은 구현이 단순하고 잠시동안 속은 편할 수 있을지 몰라도, 멀리보면 전혀 유용하지 않을 것 같아 다른 방법을 고민중이다. 구현 후에 또 올려야겠다.