📌 프로젝트 동기
개발 프로젝트 선정 동기
지난 프로젝트에서 JS로 변수명 실수와 타입 실수를 하여 이를 발견하고 해결하는데 많은 시간을 낭비했다.. 프로젝트는 무사히 마무리했지만 TS를 썼더라면 이런 문제를 방지할 수 있지 않았을까 하는 아쉬움이 남았다.
그래서 이번 기회에 TS를 연습하고자 간단한 프로젝트를 하기로 결심했다. 어떤 프로젝트를 할지 고민하던 중, 친한 동기에게 크롬 익스텐션 개발을 추천받았고 평소 여러 크롬 익스텐션을 사용하기에 내가 사용할 크롬 익스텐션을 개발해보기로 결정했다.
주제 선정 동기
크롬 익스텐션을 활용하면 크롬에서 DOM을 조작하여 내가 방문하는 사이트에 UI를 추가하거나 원하는 동작을 실행할 수 있다는 것을 알게 되었다. 이를 활용해보고자 평소 자주 방문하는 사이트에 대해 생각해 보니 알고리즘 공부를 위해 매일 백준 사이트를 방문했던 것이 떠올랐다.
백준에서 문제를 풀 때, 진짜 모르겠다는 생각이 들때마다 질문 게시판에 방문했지만 이 게시판에서 도움되지 않는 글들이 너무 많아 유용한 정보를 찾는 것이 불편했다.
답변은 없고 질문만 있는 글들과 반례가 있을 만한 유용한 글들의 구별이 쉽지 않다...
그래서 이번 기회에 유용한 글의 식별을 쉽게 개선할 수 있는 크롬 확장 프로그램을 만들어 보기로 했다.
🔍 프로젝트 진행 과정
1. 프로젝트 기능 결정
모르는 문제가 나왔을 때, 반복되는 구글에 문제 검색, 질문 게시판 탐색 과정을 개선하면 좋겠다는 생각이 들었다.
그래서 이번 크롬 익스텐션에는 3가지 기능을 넣기로 결정했다.
- 문제 화면에 "도움 받기" 버튼을 추가하여 빠른 문제 검색 기능
- 질문 게시판에서 유용할 가능성이 높은 글의 배경색을 변경하여 빠른 정보 탐색을 도울 수 있는 기능
- 팝업 페이지에서 문제 검색 시, 추가할 언어 설정 기능
2. 프로젝트 환경 설정 (Manifest , Webpack 설정)
크롬 익스텐션은
manifest.json파일을 직접 설정해야 했고 기본적으로 3개의 파일이 필요했다.
- popup.js : 사용자에게 보여지는 popup.html에 사용되는 js
- background.js : 백그라운드에서 실행되는 js
- content_script.js : 특정 페이지에서만 실행되는 js
이 3개의 파일을 미리 생성한 후, popup.js에서 사용할 UI를 만들어야 했는데 약간 공부 욕심이 생겨 미뤄왔던 Webpack을 사용한 React 설정을 해보고 싶어졌다.
구글링과 Webpack 공식 문서를 통해 Webpack의
entry,plugins,modules가 무엇인지 학습할 수 있었고 이를 통해 프로젝트에 필요한 설정을 마칠 수 있었다.
3. 기능 개발
3-1. DOM을 조작하여 "도움 받기" 버튼 추가
문제 화면에 "도움 받기" 버튼을 추가하기 백준 사이트를 분석해보니 문제 메뉴에서 문제 번호가 존재했다.
이 문제 번호를 DOM으로 추출해서 문제 검색 시, 사용하면 될 것이라 판단했고 이 페이지에서 실행될
problem.ts에서 새로운 버튼("도움 받기")를 만든 후, 추출한 문제 번호로 구글에 검색을 하도록 구현했다.그 결과 아래처럼 제대로 버튼이 만들어졌고 검색도 제대로 되는 것을 확인했다.
3-2. 질문 게시판 유용한 글 배경색 변경
기존 질문 게시판에서 가장 찾고 싶은 정보는 반례가 있을 만한 정보다. 반례가 유용한 경우 혹은 반례가 모아진 정보글의 경우에는 사람들에게 좋아요를 많이 받을 가능성이 높기 때문에 좋아요를 받은 글은 배경색을 노란색으로 좋아요를 받지 못했더라도 질문에 대한 답변에 유용한 정보가 존재할 가능성이 있기 때문에 답변을 하나라도 받은 글의 경우 배경을 하늘색으로 변경했다.
이를 통해 질문 게시판에서 질문만 존재하는 글은 제외하고 유용할 가능성이 높은 글들을 빠르게 찾을 수 있게 되었다.
3-3. 팝업 페이지 언어 설정
"도움 받기" 버튼으로 문제를 검색할 때, 내가 자주 사용하는 언어가 같이 검색되면 좋겠다는 생각이 들었다. 이를 위해 팝업 페이지에 자신이 사용하는 언어를 디폴트로 설정할 수 있도록 form을 구현했다.
이 인풋에 사용할 언어를 입력하면
chrome.storage.local에 작성한 언어를 기록하고 추후, 검색이나 팝업 페이지를 열 때 저장한 언어를 가져올 수 있게했다.
이를 통해 문제 검색 시, 저장한 언어가 문제 번호와 함께 검색에 사용되는 것을 확인할 수 있었다.
✨ 프로젝트 결과
프로젝트를 다 만든 후, 알고리즘을 좋아하는 동기들에게 피드백을 부탁했다. 그 결과 사용에 긍정적인 응답과 몇 가지 피드백을 받을 수 있었고 크롬 웹 스토어에 업로드 하는 것을 추천 받았다.
피드백 받은 내용들을 수정한 후, 구글 심사를 거쳐 크롬 웹 스토어에 업로드 성공했다.
크롬 웹 스토어 링크 : 스토어 링크
Github : https://github.com/alsrb0504/Baekjoon-Help-Extension
📑 프로젝트 후기
프로젝트를 통해 얻은 점
1. TS와 Webpack을 학습하고 적용한 경험
2. 내가 불편했던 것을 극복하기 위해 프로그램을 만든 경험
3. 내가 제작한 서비스에 대해 다른 사람들의 피드백을 받고 개선한 경험항상 우선순위에서 뒤로 밀어왔던 TS와 Webpack에 대해 학습하고 이번 프로젝트에 간단하게 적용해 보았다. 아직 많이 부족하지만 다음 프로젝트에서도 이번에 공부한 내용을 적용할 수 있을 것이라 생각한다.
백준을 풀면서 불편했던 반례 및 정보 찾기를 개선하기 위해 백준 헬프를 만들었다. 기능을 하나씩 완성할 때마다 불편함을 줄일 수 있었기에 이전 프로젝트들 보다 재미있게 만들 수 있었다.
처음 버전에서는 도움 받기 버튼 클릭 시, 문제 검색 뿐 아니라 질문 게시판도 같이 등장하도록 구현했고 팝업에서 언어 설정도 input으로 구현했었다. 하지만 동기들의 피드백으로 현재의
v.1.0.2로 개선할 수 있었고 나 또한 개선된 버전이 훨씬 깔끔하다고 느꼈다. 내가 생각지 못한 부분에 대해 조언을 들음으로써 더 완성도 있는 서비스를 만들 수 있었다고 생각한다.
프로젝트에서 아쉬웠던 점
1. TS를 더 활용하지 못한 점
2. 더 빨리 진행하지 못했던 점
사실 이번 프로젝트는 TS 학습이 주 목표였지만 프로젝트를 하면서 오히려 Webpack으로 React 프로젝트를 설계하는데 더 많은 시간을 사용했다. 또한 기능이 많지 않아 TS를 작성할 부분이 적어서 TS를 많이 사용하지 못한 점이 아쉬웠다.
지난 여름 백준을 풀기 시작해서 거의 반 년 동안 불편함을 느꼈었다. 현재는 백준 헬프의 기능에 정말 만족하지만 좀 더 일찍 백준 헬프를 만들었더라면 백준 풀이가 더 쾌적하지 않았을까 하는 아쉬움이 있다.
🏴 결과물
크롬 웹 스토어 링크 : 스토어 링크
Github : https://github.com/alsrb0504/Baekjoon-Help-Extension
