전체 글
useQuery의 흐름 끄적끄적
아폴로 클라이언트를 사용하면서 가장 많이 사용하는 훅은 useQuery일 것이다.선언한 graphql 규격에 맞춰, ApolloClient는 어떻게 데이터를 요청할까? 소스코드 흐름을 보며 따라가보자.useQuery.tshttps://github.com/apollographql/apollo-client/blob/v3.11.8/src/react/hooks/useQuery.ts https://github.com/apollographql/apollo-client/blob/v3.11.8/src/react/hooks/useQuery.ts#L155function _useQuery( query: DocumentNode | TypedDocumentNode, options: QueryHookOptions, NoInf..
근황
0. 시간이 어떻게 가는지 모르겠다... 눈 깜빡이면 한 달 단위로 지나는 것 같다. 1. 최근까지 진행하던 영어 과외를 그만뒀다. 졸업이라기엔 뭐하지만... 과외로 얻을 것들을 충분히 많이 얻은 것 같아 Next step으로 가보려고 한다. 2. 회사에서 오픈소스 소스코드 톺아보기 스터디를 진행중인데 재미있는 포인트가 많아서 좋았다. lodash 코어 로직이라던지 vercel/next 레포지토리 세팅 파일에서의 인사이트라던지... 3. 오픈소스는 디스코드 채널과 컨트리뷰터들의 과도한(?) 열정으로 내 몸에 부하가 걸려 잠시 쉬어가고 있다. 최근에는 스위스, 폴란드에서 기여해주시는 개발자분들과 팀 미팅도 가졌다. 영어로 진행해서 두근두근 했는데 나름 잘 해냈다...! 그리고 왠지 2k가 넘는 별을 받고 ..
개발팀 문화
많은 조직에서는 좋은 개발팀을 갖고 싶어 한다.좋은 개발팀이라는 것은 개발자들의 생산성이 높고 리텐션이 유지되며 팀 자체가 성장하고 있어 조직의 문제 해결 능력에 지속적으로 큰 기여를 할 수 있는 팀을 말한다. 이런 팀은 외부로부터의 인재 유입도 비교적 수월하며 새로운 아이디어와 혁신에도 비교적 열려있다. 좋은 개발팀을 갖고 싶은 조직은 좋은 개발 문화를 통해 현재의 팀을 좋은 개발팀으로 만들고 유지하길 원한다. Stackoverflow의 서베이나 개발자들을 대상으로 한 여러 조사에서도 나타나듯 개발팀의 문화는 개발자들이 해당 조직에 머무는 이유 중 큰 비중을 차지한다. 좋은 개발 문화란 무엇일까?모든 조직에 들어맞는 법칙은 없겠지만 일반적으로는 다음과 같은 것들이 물망에 오른다. 1. 서로에 대한 신뢰..
React에서의 Modal
리액트의 모달 컴포넌트는 다양한 방식으로 사용된다. 모달 렌더링에 대한 책임을 버튼 컴포넌트에 넘기는 방식. 모달의 열림/닫힘 상태를 버튼에서 관리하여 보일러 플레이트 코드를 줄이기 좋다. Props에 대한 타입 전달이 자연스러럽게 되는 장점도 있다.Share! 모달의 열림/닫힘 상태를 제어하면서 모달 컴포넌트를 렌더링하는 방식. 가장 일반적인 방식이고 러닝커브가 없다.const modal = useModal();//...Share! 모달을 함수 호출 시점에 렌더링하는 방식. 호출부와 렌더링 코드가 붙어있어 응집도가 높은 편이다.const { openModal } = useModal();const handleClick = () => openModal(ShareModal, { url });//...Shar..
Shout out from Medium
Star 8.5K, 3.2K 녀석들... 딱 기다려라... 내가 간다.... https://tamfocus.medium.com/my-journey-to-the-best-chrome-extension-boilerplate-8b0ae65b95c1 My journey to the best Chrome Extension boilerplateIntroductiontamfocus.medium.com
네이버 사다리와 함께 했던 워크숍 (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..