저번 편에서 사다리를 원하는 대로 그리기 위해 minified 된 js 파일을 파헤쳐봤다. https://nookpi.tistory.com/198 이번 편에서는 기존 사다리 게임 js 파일을 내가 수정한 js 파일로 교체하는 방법에 대해 알아보자. 원래는 네이버 검색으로 노출되는 사다리 게임 페이지 자체를 클론코딩(...)하려고 했으나, 동료분의 조언으로 크롬 익스텐션을 통해 주입하는 방법으로 선회했다. 이 방법이 훨씬 간단할 뿐 아니라 눈치채기도 어렵다...! 유일한 단점이라면 익스텐션이 사전에 설치되어 있어야 한다는 점인데 어차피 클론코딩으로 제공하는 페이지 역시 동일한 이슈가 있기 때문에 망설일 이유는 없었다. 내가 누구? 크롬 익스텐션 보일러 플레이트 오너 GitHub - Jonghakseo/ch..

지난 1편에 이어 계속 진행...! https://nookpi.tistory.com/197 본격적으로 사다리게임 핵심 로직이 들어있는 js 파일을 분석해 보자. https://ssl.pstatic.net/sstatic/fe/sfe/ladder-game/ladders_230912.js 내가 개인적으로 minify 로직을 통해 난독화된 코드를 볼 때 염두에 두는 부분은 다음과 같다. 난독화 된 코드는 기본적으로 읽고 해석하기 어렵기 때문에, 상수와 같이 바꿀 수 없는 지점을 찾는 게 우선이다. IDE의 도움을 받아 코드의 형태를 정리하는 것은 큰 도움이 된다. 어떤 역할을 하는 변수/함수인지 유추되었다면, 이름을 바꿔두는 것이 좋다. class 혹은 prototype 메서드의 이름은 난독화 대상에서 빠지는 ..

얼마 전 1박 2일로 회사 워크숍을 다녀왔다. 워크숍 운영진으로서 재미있는 워크숍을 위해서는 뭐가 필요할지 고민했는데, 네이버 사다리 타기 결과를 조작해서 친애하는 부대표님에게 설거지와 노래 부르기(ㅋㅋ)를 몰아주면 재미있을 것 같았다. 그래서 네이버 사다리 결과를 원하는 대로 만들기 위한 작업에 착수했다. ('네이버 사다리'는 네이버 PC에서 '사다리 타기 게임' 등의 키워드를 통해 검색해서 즐길 수 있는 사다리 게임을 말한다.) 구현 요구사항은 아주 심플하다. 타깃의 이름과 목표로 하는 키워드(당첨)가 일치하게 출력되는 것 기술적으로 가능한지를 먼저 검토하기 위해 네이버 사다리 구현을 살펴보자. 사다리 게임은 캔버스를 통해 렌더링이 되고 있다. 캔버스를 그리는 로직이 있길 바라면서 dom을 살펴보니..

개발자의 생산성은 무엇에 달려있을까? 바로 input과 output 간의 이어지는 사이클을 극단적으로 줄여 빠른 피드백을 반복적으로 얻을 수 있는 환경이다. 빌드에 2분이 걸리는 프로젝트가 있고, 코드 변경의 결과물을 확인하기 위해서는 꼭 다시 빌드를 해야 한다고 생각해 보자. 내 코드의 변경사항이 어떤 결과로 나타내는지를 알기 위해서는 2분이라는 시간이 필요하다. 만약 실수했다면? 다시 수정 후 빌드를 하는 2분을 기다려야 한다. 이 시간들은 당신을 좀 더 여유롭게 살 수 있게 해 줄 수 있을지도 모르지만, 적어도 생산적인 사람으로 만들진 못할 것이다. 모든 개발 환경은 이러한 잉여 시간을 줄이고 빠른 피드백을 주기 위해 발전해 왔다. 테스트 코드, HMR(Hot Moudle Replacement), ..

vite를 사용해보고자 했던 단순한 마음으로 시작했던 오픈소스가 어느덧 1K Stars를 돌파했다. GitHub - Jonghakseo/chrome-extension-boilerplate-react-vite: Chrome Extension Boilerplate with React + Vite + Typescript Chrome Extension Boilerplate with React + Vite + Typescript - GitHub - Jonghakseo/chrome-extension-boilerplate-react-vite: Chrome Extension Boilerplate with React + Vite + Typescript github.com 누군가에게는 사소한 1K일 수 있지만, 1000명..

DragGPT 익스텐션이 기본적으로 non-stream으로 동작하다 보니, 응답을 다 받기까지의 로딩 속도가 매우 답답하게 느껴지는 부분이 있었다. 고쳐야지... 하고 매번 생각만 하며 게으름을 피우다 보니 이제야 작업을 하게 되었다. 기존에 DragGPT를 만들며 재미있게 개발했던 포인트 중 하나는 XState였는데, 사실 이번에 코드를 오랜만에 보는 만큼 XState가 낯설게 느껴지지 않을까 하는 걱정이 있었다. 그러나 실제 개발 단계에서는 걱정을 무색하게 만들 정도로 편하게 작업할 수 있었다. 기존 채팅 상태머신에 receiving 상태를 하나 추가해서 작업하는 것만으로도 관심사를 많이 좁혀서 작업할 수 있었는데, state 패턴의 장점을 극한까지 느낀 것 같았다. 작업을 하면서 알게 된 사실인데,..