취미로 하는 개발
네이버 사다리와 함께 했던 워크숍 (3)
저번 편에서 사다리를 원하는 대로 그리기 위해 minified 된 js 파일을 파헤쳐봤다. https://nookpi.tistory.com/198 이번 편에서는 기존 사다리 게임 js 파일을 내가 수정한 js 파일로 교체하는 방법에 대해 알아보자. 원래는 네이버 검색으로 노출되는 사다리 게임 페이지 자체를 클론코딩(...)하려고 했으나, 동료분의 조언으로 크롬 익스텐션을 통해 주입하는 방법으로 선회했다. 이 방법이 훨씬 간단할 뿐 아니라 눈치채기도 어렵다...! 유일한 단점이라면 익스텐션이 사전에 설치되어 있어야 한다는 점인데 어차피 클론코딩으로 제공하는 페이지 역시 동일한 이슈가 있기 때문에 망설일 이유는 없었다. 내가 누구? 크롬 익스텐션 보일러 플레이트 오너 GitHub - Jonghakseo/ch..
네이버 사다리와 함께 했던 워크숍 (2)
지난 1편에 이어 계속 진행...! https://nookpi.tistory.com/197 본격적으로 사다리게임 핵심 로직이 들어있는 js 파일을 분석해 보자. https://ssl.pstatic.net/sstatic/fe/sfe/ladder-game/ladders_230912.js 내가 개인적으로 minify 로직을 통해 난독화된 코드를 볼 때 염두에 두는 부분은 다음과 같다. 난독화 된 코드는 기본적으로 읽고 해석하기 어렵기 때문에, 상수와 같이 바꿀 수 없는 지점을 찾는 게 우선이다. IDE의 도움을 받아 코드의 형태를 정리하는 것은 큰 도움이 된다. 어떤 역할을 하는 변수/함수인지 유추되었다면, 이름을 바꿔두는 것이 좋다. class 혹은 prototype 메서드의 이름은 난독화 대상에서 빠지는 ..
네이버 사다리와 함께 했던 워크숍 (1)
얼마 전 1박 2일로 회사 워크숍을 다녀왔다. 워크숍 운영진으로서 재미있는 워크숍을 위해서는 뭐가 필요할지 고민했는데, 네이버 사다리 타기 결과를 조작해서 친애하는 부대표님에게 설거지와 노래 부르기(ㅋㅋ)를 몰아주면 재미있을 것 같았다. 그래서 네이버 사다리 결과를 원하는 대로 만들기 위한 작업에 착수했다. ('네이버 사다리'는 네이버 PC에서 '사다리 타기 게임' 등의 키워드를 통해 검색해서 즐길 수 있는 사다리 게임을 말한다.) 구현 요구사항은 아주 심플하다. 타깃의 이름과 목표로 하는 키워드(당첨)가 일치하게 출력되는 것 기술적으로 가능한지를 먼저 검토하기 위해 네이버 사다리 구현을 살펴보자. 사다리 게임은 캔버스를 통해 렌더링이 되고 있다. 캔버스를 그리는 로직이 있길 바라면서 dom을 살펴보니..
HMR의 작은 비밀
개발자의 생산성은 무엇에 달려있을까? 바로 input과 output 간의 이어지는 사이클을 극단적으로 줄여 빠른 피드백을 반복적으로 얻을 수 있는 환경이다. 빌드에 2분이 걸리는 프로젝트가 있고, 코드 변경의 결과물을 확인하기 위해서는 꼭 다시 빌드를 해야 한다고 생각해 보자. 내 코드의 변경사항이 어떤 결과로 나타내는지를 알기 위해서는 2분이라는 시간이 필요하다. 만약 실수했다면? 다시 수정 후 빌드를 하는 2분을 기다려야 한다. 이 시간들은 당신을 좀 더 여유롭게 살 수 있게 해 줄 수 있을지도 모르지만, 적어도 생산적인 사람으로 만들진 못할 것이다. 모든 개발 환경은 이러한 잉여 시간을 줄이고 빠른 피드백을 주기 위해 발전해 왔다. 테스트 코드, HMR(Hot Moudle Replacement), ..
오픈소스 1K Stars 를 달성하며 느낀 것들
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 + Stream
DragGPT 익스텐션이 기본적으로 non-stream으로 동작하다 보니, 응답을 다 받기까지의 로딩 속도가 매우 답답하게 느껴지는 부분이 있었다. 고쳐야지... 하고 매번 생각만 하며 게으름을 피우다 보니 이제야 작업을 하게 되었다. 기존에 DragGPT를 만들며 재미있게 개발했던 포인트 중 하나는 XState였는데, 사실 이번에 코드를 오랜만에 보는 만큼 XState가 낯설게 느껴지지 않을까 하는 걱정이 있었다. 그러나 실제 개발 단계에서는 걱정을 무색하게 만들 정도로 편하게 작업할 수 있었다. 기존 채팅 상태머신에 receiving 상태를 하나 추가해서 작업하는 것만으로도 관심사를 많이 좁혀서 작업할 수 있었는데, state 패턴의 장점을 극한까지 느낀 것 같았다. 작업을 하면서 알게 된 사실인데,..
DragGPT chrome extension 개발기
배경 최근 ChatGPT 열풍이 거세다. 연구 영역에 있던 생성 AI의 위치를 대중에 가깝게 옮기면서 대중들로 하여금 급격한 기술 발달이 이뤄지고 특이점이 왔다(?)는 생각을 하게 만드는 것 같다. 기존에 ChatGPT에게 회사 면접 질문을 몇 개 해봤다는 글도 올린 적이 있는데, ChatGPT의 이슈몰이와 함께 조회수가 꾸준히 올라가고 있다. https://nookpi.tistory.com/156 ChatGPT에게 회사의 면접 질문 몇 개를 던져보았다 질문과 답변을 번역기로 돌려서 어색한 부분이 다소 존재합니다 Q: 유지보수 가능한 코드란? A: 유지 관리 가능한 코드는 이해하고 수정하기 쉬운 코드입니다. 여기에는 일반적으로 깨끗하고 잘 nookpi.tistory.com 개인적으로는 ChatGPT를 위..
[이슈] 크롬 익스텐션 보일러 플레이트 - content script react
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 한 번 만들어 보고 싶어서 만든 보일러 플레이트의 stars가 70을 넘었다. fork는 10개가 되었다. 다른 오픈소스 프로젝트에 비하면 초라한 개..
프론트엔드 주니어의 오픈소스 기웃대기
들어가기 전에... 이 글은 경력 2년도 채 되지 않은 주니어 프론트엔드 개발자가 오픈소스를 기웃거린 경험을 다루고 있습니다. 오픈소스에 기여에 대한 의욕만을 가지고 후안무치(厚顔無恥)의 태도로 이런저런 시도를 해 본 후기입니다. 1. 왜 개발 공부를 시작하자마자 저는 '개발 커뮤니티의 아낌없는 나눔' 그 자체가 굉장히 매력적이라고 생각했습니다. 가치 있는 기술과 노하우에 대해 끊임없는 교류를 하고, 이를 통해 더 나은 무언가를 만들어 내기 위한 공동체의 합의가 암묵적으로 존재한다니... 더군다나 그런 문화가 특정 지역에 국한되지 않고 전 지구적으로(아마도) 존재한다는 사실이 너무나 신기하고 멋져 보였습니다. 그리고 자연스럽게 저도 그 생태계에 작은 사잇돌이나마 괼 수 있으면 좋겠다는 생각이 들었습니다...
내가 쓰려고 만든 MD editor - Note-for.me
Markdown Editor 기존에 Markdown 편집을 위해 사용하고 있던 md Editor Typora가 12월부터 정식 출시가 되면서 유료화가 되었다. 정말 좋은 에디터이지만, 사용빈도도 적고 에디터의 기능 대부분을 사용하지 않는 나는 굳이 결제까지 해야 하나... 하는 생각이 들었다. 겸사겸사 이번 기회에 온라인에 오픈소스로 풀린 MD editor 들을 활용해서 내가 쓰기 편한 에디터를 하나 만들어야겠다 생각했다. editor는 Toast UI editor를 사용해서 날로 먹을 수 있었다. 관계자분들께 감사를... TOAST UI :: Make Your Web Delicious! The TOAST UI Is Free Open-source JavaScript UI Libraries Maintain..