2023.08.18 - 생활코딩 jQuery 완강 및 포트폴리오 리팩토링

생활코딩 jQuery 강좌를 완강하면서

작년에 학원에서 만들었던 jQuery 포트폴리오를 조금 손 봤다.

해당 웹사이트는 모바일 메뉴가 좌측에서 슬라이딩되어 나타나도록 jQuery show() 애니메이션을 설정해뒀는데

hide에 시간차를 주면 우에서 좌로 슬라이딩되는 것이 아니라 대각선으로 사라지기 때문에, hide에는 duration을 안 주고 즉시 실행되게 처리했었다.

그렇지만 메뉴가 나올 때는 부드럽게 나타났다가 숨길 때는 순식간에 없어지는 모습이 아무래도 영 예쁘지 않아서 프로젝트 당시에도 엄청 마음에 걸렸었다.

언젠가는 꼭 리팩토링을 하겠다고 다짐했었는데, 마침 제이쿼리를 복습했으니 오늘 마음 먹고 시도한 것이다.

 

아니, 그런데....

과거의 나 대체 코드를 왜 이렇게 짜놓은 거지?😇ㅋㅋㅋㅋㅋㅋㅋㅋㅋ

jQuery 코드 한 줄 바꾸면 될 줄 알았는데 모바일 메뉴 요소들이 서로 얽혀있어서

A를 바꾸면 B가 문제

B를 바꾸니 C가 문제

이런 식으로 연결되어 결국 관련 요소들의 클래스 CSS도 다같이 와르르 고치게 되었다!

회사 가면(ex] SI) 남이 마구 짜놓은 레거시 코드 보고 아득해진다던데 그게 이런 기분이구나 싶었다...(근데 그게 내 코드라는 점이 문제🙄 당시에는 가독성 높인답시고 주석도 열심히 써가면서 나름 노력한 건데 힝🥺)

원하던 모습을 100%까지는 아니고 95% 정도 구현하며 리팩토링을 마무리했다.

그래도 이제 원하던 대로 메뉴가 좌우로 슬라이딩 돼서 만족스럽다😊

 

생활코딩은 2011년도 강의여서 없어지거나 바뀐 기능이 많았기 때문에, 최근에 만든 jquery 유튜브 강의도 들어볼 예정.

앞으로 스케쥴이 어떻게 될지는 모르겠지만 간단한 심리테스트 페이지 만들기 강의도 듣고 Javascript 정규표현식 공부도 할 예정.

노마드 코더의 바닐라 자바스크립트2도 이어서 듣고 싶고...시간이 되면 챌린지도 해보고 싶은데, 구직 활동과 같이 하려면 다시 하루하루를 잘 쪼개야겠다.