전체 글
네이버 사다리와 함께 했던 워크숍 (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을 살펴보니..
useInjectedProps
컴포넌트의 Props를 일부 오버라이드하면서 인터페이스를 바꾸고, 컴포넌트가 동일한 ref를 갖게(re-render 가능하게) 해주는 훅을 만들어보자. Implementation export default function useInjectedProps(_Component: C, injectedProps: I) { // 훅의 인자로 받은 컴포넌트를 저장합니다. const Component = useRef(_Component); // 상태 변경이 일어나면서 컴포넌트 호출이 일어날 경우 injectedProps가 컴포넌트로 자연스럽게 주입 될 수 있게 합니다. Component.current = (props: Omit) => { ret..
세상은 이야기로 만들어졌다
https://product.kyobobook.co.kr/detail/S000209670832 세상은 이야기로 만들어졌다 | 자미라 엘 우아실 - 교보문고 세상은 이야기로 만들어졌다 | 원시 시대 동굴 속에서 나누던 이야기에서부터 디즈니의 애니메이션까지, 『일리아드』와 같은 고전에서부터 정치인 트럼프의 거짓말까지. 강력한 이야기는 삶 product.kyobobook.co.kr 이야기에 대한 구조적인 분석은 해 본 적이 없는데 이 책을 읽으면서 자연스럽게 인기 있는(소위 잘 팔리는) 이야기의 공통적인 구조에 대해 알 수 있었다. 책은 인기 있는 이야기의 구조적인 공통점에서 시작해서, 시대의 변화에 따라 이야기가 나아가는 방향을 충분히 살핀 다음, 빈부 격차와 기후 위기 등 인류의 위기에 필요한 새로운 이야..
Nextjs 12.3.4 -> 13.5.6 버전업 후 정적파일 CORS 에러
금일 정기배포 이후 www.creatrip~ 에서 요청하는 js chunk 파일에 대한 CORS 에러가 발생했다. 이 얼마 만에 보는 CORS 에러란 말인가...! 우리 회사에서는 nextjs 빌드 후 생성된 정적 파일은 s3 - cloudfront를 통해서 캐싱 후 제공하고 있는데, 배포 전 후로 설정을 바꾼 부분은 없는 상황이었다. 일단 cdn에서 제공하는 정적 파일에 대한 응답 헤더에 정책을 생성하고, 해당 정책에서 www가 붙은 도메인, 붙지 않은 도메인에 대해 모두 오리진을 추가해서 대응해 주었다. 빠르게 대응은 했는데, 대체 왜 갑자기 문제가 생긴 것인지 파악을 하기가 여간 쉽지 않았다. 처음에는 해당 이슈가 배포 직후에 발생한 문제인지에 대한 확신도 서지 않았고, SSG 등으로 생성된 정적..
React 근황
https://react.dev/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024 React Labs: What We've Been Working On – February 2024 – React The library for web and native user interfaces react.dev RSC에서 실험적으로 테스트중인 cache https://react.dev/reference/react/cache cache – React The library for web and native user interfaces react.dev https://youtu.be/LL4V8CcEhIo - 메타 친구들은 자사 서비스에서 테스트 후 s..
4년차 프론트엔드 개발자의 2023년 회고
2023년. 작년 한 해도 쏜살같이 지나갔고, 정말 많고 많은 일이 있었다. 2022년의 내가 새로운 환경에서 크게 성장했다면 2023년의 나는 내면의 갈등과 안정, 그리고 내가 무엇을 추구하는지 스스로를 들여다보는 일에 많은 시간을 쏟았던 것 같다. 상반기 새로운 시도와 열정, 동시에 좌절과 고민이 많았던 상반기였다. 숙소... 애증의 숙소 2022년 말부터 신규 사업인 숙소 도메인 개발을 위해 숙소 스쿼드에 합류하여 개발을 진행했다. 스쿼드 내에 자리 잡은 무기력함(?)을 타파하기 위해 내 나름대로의 encouraging에 열과 성을 다했다. 스쿼드 체제 내부에서 구성원들의 자율성과 독립성, 추진력을 바탕으로 더 나은 결과를 만들 수 있을 거라는 믿음이 있었고, 애자일 관련 도서들을 읽으면서 여러 시..
근황
0. 작년 말 즈음부터 프론트엔드 파트 리드를 맡게 되었다. 정신없고 바빠졌지만 그래도 생각했던 범위 안쪽이라 잘 적응해 나가고 있다. 1. 2023 회고를 써야 하는데 자꾸 미루고 있다. 너무 많은 일들이 있어서인지 엄두가 안 나는 것 같기도 하고...? '부담을 내려놓고 편하게 써야지'라고 50번째 생각만 하는 중. 2. 오랜만에 React 소스코드 톺아보기 스터디를 진행하고 있는데 역시 재미있다. 처음 React 소스코드를 보면서 배우는 점이 참 많고 재밌었는데 그 기분을 동료들과 다시 나누니 더 즐거운 것 같다. 3. React 소스코드 스터디를 하기 전에 'React 소스코드의 동작을 이해하면 이런 것들도 할 수 있어요!'와 같은 동기부여 용도로 익스텐션 POC를 하나 만들었다. 개발 환경에서 ..