맛집검색기 리팩터링

기존 코드

웹 개발 시작한 지 1달도 되지 않았을 때 만든 사이트이다 보니, 각 HTML 파일마다 JS 파일 하나씩 만들어 연결하여 사용하는 구조로 코드를 작성하였었다. 하지만 함수 속 해시태그 내용만 바뀔 뿐 모든 코드가 중복되어, 새로운 그룹 페이지를 추가할 때마다 기존의 JS 파일을 복사 붙여넣기 하여 해시태그 내용만 수정하는 방식으로 서비스를 운영하고 있었다. 그룹 수가 늘어남에 따라 JS 파일도 같이 늘어났고, 코드를 수정할 때 파일을 찾는 것이 번거로워지기 시작했다. 

 

 

개선한 코드

하나의 JS 파일에 모든 그룹의 해시태그를 담았다. 함수로 구분하여 querySelector가 그 페이지의 그룹 명을 가져오면, 조건문을 사용하여 그 그룹의 해시태그를 모은 링크를 열어주도록 수정하였다. 그 결과 30여개의 JS 파일을 하나로 줄일 수 있었고, 코드 수정 시에도 한 파일 내에서만 작업하면 되어서 편리해졌다.

https://github.com/innerstella/FME 

GitHub - innerstella/FME: 트위터 해시태그 기반 맛집 검색기