1. 백준 온라인 저지 사이트 개선하기 올해 2월부터 프론트엔드 개발자가 되기 위한 준비를 하였다. 프론트엔드 개발자가 되기 위해서 코딩테스트가 매우 중요한 관문이라는 것을 알게되었다. 코딩테스트 공부법을 검색해보면 가장 많이 나오는 것은 '백준에서 단계별로 문제풀어보기'이다. 백준에서 문제를 풀어보면서 불편한 점이 있었다. 문제와 제출의 페이지가 다르기 때문에 문제를 풀다가 틀렸을 때 페이지를 이동하는 것이 매우 불편했다. 그래서 나는 5월에 제출 페이지에서 문제 페이지를 볼 수 있도록 크롬 익스텐션을 만들었다. 이름은 백준에 부가적인 기능을 더해주기 때문에 BOJ ADDON라고 작명했다. 백준 애드온은 문제페이지의 값을 저장해서 제출 페이지로 값을 넘기는 기능이 있다. 8월부터 백준 코딩테스트로 스터디를 하면서 그 사이트에 불편한 점을 개선하여 백준 애드온에 반영하였다. - 백준 사이트에서 바로 문제를 풀 수 있게 만들었다. - 이전에 풀이를 하던 코드를 저장하고 값을 불러올 수 있게 만들었다. - 백준에서 사용하는 예시 입력값 코드를 불러올 수 있게 만들었다. 2. 아이디어 문제 풀이는 브라우저의 자바스크립트 엔진을 이용하였다. 3. 목표 - 사이트 내의 입력값과 출력값을 불러올 것 - 원하는 테스트케이스를 추가할 수 있을 것 - 입력값 예시코드를 쉽게 불러올 수 있게 만들 것 - 실행을 누르면 입력값을 이용하여 코드 결과를 html에서 볼 수 있을 것 - 코드결과와 출력값을 비교하여 풀이가 맞았는지 확인할 수 있을 것 - 크롬 웹 스토어에 등록하기 4. 문제점&해결책 자바스크립트 엔진을 이용하여 코드를 실행하기 위해서는 string을 실행하는 생성자 Function을 사용하는 방법이 있다. 문제는 이 방법을 이용하면 크롬 익스텐션 manifest v3의 규정에 위배되기 때문에 크롬 웹 스토어에 올릴 수 없다. 이 문제를 해결하기 위하여 iframe안에서 생성자 Function을 사용하였다. iframe을 사용하면 원래 사용하던 사이트와 스코프가 구분이 되기 때문에 manifest v3의 규정에 위배되지 않았다. 위의 방법을 사용하니 iframe과 백준에서의 값을 교환할 수 없었다. iframe의 element에 접근해서 값을 입력하면 console로는 변한 것 처럼 보이지만 실제로 값이 변하지 않았다. 이 문제를 해결하기 위하여 local Storage를 이용하였다. iframe과 parent는 직접 값을 전달하는 방법이 없기 때문에 local storage를 이용하여 값을 set하고 get하는 방법을 값을 전달하여 문제를 해결하였다. 문제점을 해결하고 백준 애드온을 크롬 익스텐션에 배포했다. 크롬 익스텐션을 배포하고 나서 백준 스터디원이 백준 애드온을 사용하고 개선할 점을 피드백을 줬다. 그래서 목표에는 없는 문제를 풀다가 다시 들어오면 다시 풀 수 있게 만드는 것 같은 것을 개선할 수 있었다. 5. 배포 후기 내가 만든 익스텐션을 다른 사람이 사용할 수 있도록 배포하고 난 후, 사용하는 사람이 늘어날 때 너무 기분이 좋았다. 업데이트를 하기 전에 신중하게 테스트를 하고 올려야겠다라는 생각이 들었다. 이전에 웹을 만들 때 혼자 공부용으로 만들고 이 정도면 되겠지?라고 생각하고 끝냈지만, 다른사람에게 제공할 때는 신중하게 테스트를 하고 올려야겠다는 생각도 들었다. 6. 프로젝트 후기 8월부터 커넥트 강의에서 들었던 자바스크립트 수업이 백준 애드온에 적용할 수 있어서 재미있고 너무 좋았다. 이번 프로젝트 때는 스코프와 실행컨텍스트 그리고 window 객체에 있는 메서드들에 대해 공부할 수 있어서 좋았다. 개인적으로 아쉬웠던 점은, 10월에 백준 에드온을 만들고나서 다음 프로젝트를 만들 때 느낀점이 한가지가 있었다. 프로젝트를 하면서 공부한 내용이나 알게된 것을 TIL이나 다른 곳에 정리를 하였지만, 프로젝트마다 공부했던 것에 대해 정리하지 못한 것 같아서 아쉬웠다. 그래서 다음 프로젝트 때는 doc폴더에 문제가 생길 때 한개씩 내용을 기록하는 중이다. 혹시나 프론트엔드 개발자를 준비하거나, Node.js로 코딩테스트를 준비하는 분을 위해 링크도 함께 첨부합니다.