토이 프로젝트 리팩토링 ①

soonrok·2022년 2월 1일
0

리팩토링

목록 보기
1/1
post-thumbnail

시작하면서..

작년에 랩실에서 지도교수님의 제안을 받아 학부논문을 쓰면서 구현한 웹페이지에 대해 리팩토링을 진행하려고 한다. 먼저 내가 만들고자 하는 웹페이지의 기능은 다음과 같았다.

  1. 가상화폐에 대한 가격을 실시간으로 확인할 수 있다.
  2. 사용자가 원하는 종목을 즐겨찾기 등록할 수 있다.
  3. 즐겨찾기 한 종목에 대해서는 알림을 등록할 수 있다.
    1. 지정가 알림 - 원하는 가격이 왔을 때 알림
    2. 급등락 알림 - 지정한 %에 해당하는 급등락을 했을 때 알림

기능 자체는 모두 구현해서 기한내에 학부논문을 작성했고 잘 제출했지만 아무래도 공부기간과 지식의 양이 늘어나면 날수록 한없이 부족한 웹페이지라는 것을 실감할 수 있었기에 나름 유지보수를 하려고 한다!

로그인 페이지

먼저 내가 구현한 웹페이지는 프레임워크를 사용하지 않고 순수 자바스크립트만 이용한 바닐라 자바스크립트 프로젝트였고, 따라서 SPA는 아니였다. (후에 찾아보니까 바닐라 자바스크립트에서도 API를 적절하게 사용하면 SPA를 구현할 수 있다고 한다) 그래서 해당 페이지에 들어가게 되면 로그인을 하게 되는데 이 페이지 코드를 먼저 고쳐줬다.
이 두 코드가 시작화면에 들어가면 나오는 세 개의 버튼을 각각 눌렀을 때의 동작을 나타내는 코드인데 지금 생각해보면 왜 이렇게 짰는지 싶다...

그래서 먼저 index함수같은 경우는 웹페이지가 로드되면 바로 실행되는 함수이기 때문에 즉시 실행함수로 바꿔줬고, menuClickEventHandler함수는 해당 파일에서 하나만 export되기 때문에 export default로 바꾸고 import할 때 중괄호도 생략해줬다. 그리고 menuClickEventHandler함수를 보면 invisibleMenu함수가 중복되서 사용되고 있는데 이를 밖으로 빼서 if문안에 코드 한 줄만 남겼고 이 연장선으로 중괄호를 생략해서 코드를 줄였다.

로그인, 회원가입, 도움말

로그인 페이지를 보면 세 개의 버튼이 있는데 각각은 로그인, 회원가입, 도움말을 가리킨다. 각 버튼을 누르면 메뉴 버튼들이 아래로 사라지게 되고 각 메뉴에 해당하는 모달창이 생성되어 위에서 아래로 내려오게 되는데 각 부분에 대해서 고친 모든 부분을 가져오면 비슷한 부분도 많고, 글이 사진으로 도배가 될 것 같아서 가장 고친 점이 많은 도움말 부분을 가져와봤다.
코드를 보면 알겠지만 버튼이 눌리면 그때 모달창에 대한 레이아웃을 자바스크립트에서 만들어 보여주는 형식이다.

하지만 각 부분을 만드는 코드가 중구난방으로 흩어져있어 뭘 만든지 모르겠고, inngerHTML프로퍼티를 사용해서 크로스 사이트 스크립팅 공격에 취약하기 때문에 DOM 요소에 들어갈 텍스트도 텍스트 노드를 사용해서 만들고 자식 요소로 추가해주는 작업을 했다.

그리고 내가 가장 바보스럽다고 생각하는 부분은 코드 112번줄에서부터 123줄까지의 반복적으로 나오는 코드들이다. 진짜 왜이렇게 짰지...?🤨 이부분은 당연히 반복문을 통해서 바꿔줬고 텍스트같은 부분들은 배열에 담아서 반복문을 돌 때 인덱스를 통해 접근할 수 있도록 바꿔줬다.

마지막으로 각 부분들이 어떤 부분들을 만드는지를 구분하기 위해 원래는 모든 DOM 요소 생성 -> 모든 DOM 요소에 대한 클래스나 속성 셋팅 -> 상위와 하위 DOM 연결 순서로 되어 있던 것을 부분에 대한 DOM 요소 생성 -> 해당 DOM 요소에 대한 셋팅 -> 해당 DOM 요소와 같은 DOM들을 먼저 그룹화 의 순서로 바꿔 반복작업해줬다. 그래서 바뀐 코드는 다음과 같다. 어떻게 보면 코드의 줄 자체는 늘어나서 리팩토링의 의미가 있나 싶을 수도 있지만 내가 생각하는 리팩토링은 무조건 짧게 만드는게 아니라 더 간결하되 더 의미있는 코드를 만드는 것이기 때문에 만족한다!😎

다음은...?

여기까지 한게 끝은 아니지만 다음 부분을 진행하다가 아직 그 부분에 대해서 수정을 마치지 못해서 포스팅 자체는 여기서 마무리해야 될 것 같다..🥲

하고 있던 부분은 회원가입 탭에서 정보를 입력받아 firebase의 데이터베이스에 등록하고 알림을 위해서 FCM에서 사용할 토큰을 발급해서 저장하는 내용인데 기존의 데이터베이스 구조가 너무 맘에 안들어서 진짜 너무 맘에 안들어서 데이터베이스 구조 자체를 새로 짜서 적용하고 있는데 아직 적용이 덜 됐다.

그래서 일단 이 부분 완료하고, 데이터베이스 구조가 수정됨에 따라 수정되는 로그인하는 부분까지 고쳐서 메인 페이지에 들어가는 부분까지가 다음 리팩토링이 될 거 같다!

더 나은 코드를 위해 여러분들이 생각하는 코드나 조언을 편하게 댓글달아주세요 :)

profile
I Will be Relaxed Person

0개의 댓글