지난 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을 살펴보니..

컴포넌트의 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 이야기에 대한 구조적인 분석은 해 본 적이 없는데 이 책을 읽으면서 자연스럽게 인기 있는(소위 잘 팔리는) 이야기의 공통적인 구조에 대해 알 수 있었다. 책은 인기 있는 이야기의 구조적인 공통점에서 시작해서, 시대의 변화에 따라 이야기가 나아가는 방향을 충분히 살핀 다음, 빈부 격차와 기후 위기 등 인류의 위기에 필요한 새로운 이야..

금일 정기배포 이후 www.creatrip~ 에서 요청하는 js chunk 파일에 대한 CORS 에러가 발생했다. 이 얼마 만에 보는 CORS 에러란 말인가...! 우리 회사에서는 nextjs 빌드 후 생성된 정적 파일은 s3 - cloudfront를 통해서 캐싱 후 제공하고 있는데, 배포 전 후로 설정을 바꾼 부분은 없는 상황이었다. 일단 cdn에서 제공하는 정적 파일에 대한 응답 헤더에 정책을 생성하고, 해당 정책에서 www가 붙은 도메인, 붙지 않은 도메인에 대해 모두 오리진을 추가해서 대응해 주었다. 빠르게 대응은 했는데, 대체 왜 갑자기 문제가 생긴 것인지 파악을 하기가 여간 쉽지 않았다. 처음에는 해당 이슈가 배포 직후에 발생한 문제인지에 대한 확신도 서지 않았고, SSG 등으로 생성된 정적..

2023.12.23 개발팀 세미나 https://jonghakseo.github.io/posts/signals/ Signals 시그널은 무엇이고 프론트엔드 생태계에서 주목을 받는 이유는 무엇일까? jonghakseo.github.io