개발 로그

기술 기록

• 

  소스코드로 react hook 동작 원리 살펴보기 이 글은 react 19를 기반으로 쓰여졌습니다. 목차react hook은 어디서 구현되고 있을까?useState는 진짜 useReducer로 이루어져 있을까?훅 객체 생성하고 linked list로 연결하기circular queue를 이용해 상태 update하기느낀점 책을 읽던 중, useState는 useReducer로 구현되었다고 하기에 진짜인지 궁금해서 소스코드를 찾아보기 시작했다.react hook은 어디서 구현되고 있을까?react/packages/react/src/ReactHooks.js at main · facebook/react · GitHubReactHooks 파일 뜯어보기react hook이니 ReactHooks.js 파일에 있을 것이라 예상했고, 다음과 같은 코드를 찾을 수 있었다... 댓글 0 2025.06.15

• 

  Next.js의 fetch API로 캐싱된 데이터는 어디에 저장될까? 고민의 시작Next.js로 프로젝트를 하던 중, fetch를 사용할 것인지 axios를 사용할 것인지에 대한 고민이 있었다.fetch 함수를 사용하면 Next.js의 캐싱 기능을 활용할 수 있지만, axios의 interceptor 등 인증을 위한 편리한 기능을 사용할 수 없었다. 어차피 캐싱을 하려면 React Query나 SWR을 사용하면 되지 않나? 라는 생각을 했는데, React Query의 캐시는 클라이언트의 인메모리에 저장되기 때문에, SSR에 적합하지 않을 수 있다는 사실을 알게 됐다. (Next.js의 SSR을 활용하려면 서버에서 렌더링해야하는데, React Query는 데이터를 클라이언트에 저장하므로 SSR을 하기에 제약이 생길 것 같았다.) 그러던 중, fetch로 캐싱된 데이터는 정확.. 댓글 0 2025.04.29

• 

  개발자도구를 켰을 때만 실행되는 코드가 있다…? (batch update, 이벤트루프) 📌 상황드래그를 할 때 updatePosition()으로 컴포넌트의 위치를 업데이트하고, updateWorkTime()으로 해당 데이터의 시간을 업데이트를 하여 드래그 시 컴포넌트 내의 시간이 함께 변경되는 코드를 작성했다.그런데 개발자도구를 켜면 코드가 실행되고, 개발자도구를 끄면 코드가 실행되지 않았다. 📌 분석나의 가설updatePosition()과 updateWorkTime() 두 함수 모두 내부에서 useState로 선언한 workBlock을 기반으로 데이터를 가공한 후, setWorkBlock()을 실행한다.setState가 비동기로 실행되어 updatePosition()이 실행되기 전 updateWorkTIme이 실행되어 updateWorkTime이 실행되지 않는 것 처럼 보인다.o.. 댓글 0 2025.10.25

회고

• 

  2025 연말 회고 2025년. 내게 어땠나 묻는다면, 정말 재밌는 1년이었다고 대답할 수 있다. 2024년 하반기, 혼자 리액트 공부만 하다가 운좋게 들어간 현장실습으로 처음 협업을 하게 되었다. 인턴을 마치며 내겐 협업, 개발 경험이 많이 부족하다는 것을 느꼈고, 2025년에는 다양한 사람을 만나서 다양한 경험을 하고 싶다는 생각을 했다. 그래서 2024년 말에 세웠던 2025년의 목표는 아래와 같았다.기획자와 디자이너가 있는 환경에서 개발하기팀원들과 좋은 코드에 대한 논의(코드 리뷰)를 활발히 할 수 있는 환경에서 개발하기개발 좋아하는 친구들 많이 사귀기인턴을 하든 취업을 하든 실무 경험을 쌓기개발자랑 디자이너가 있으면 프로세스가 어떻게 달라질까? 코드 품질에 대해 엄격한 기준을 가지고 있는 사람과 함께 개발하면 어떤.. 댓글 3 2026.01.05

• 

  2025년 상반기를 마무리하며... 벌써 6월이다. 2025년 상반기를 회고해보려 한다.회고라고 하긴 민망하고 그간 무엇을 했는지 + 생각 정리에 대한 글이다. 목차 1. 데브 캠프1-1. 어떤 개발자가 되고 싶은지2. IT 연합 동아리3. 공모전4. 취미 생활 24년 12월, 인턴을 끝내고 백수가 되었다.25년 1월~3월에는 스마일게이트 데브 캠프 면접 탈락자들을 대상으로 진행한 온라인 데브 캠프에 참여했다.이후에는 휴학을 하고, 지금은 사람들을 더 많이 만나고 프로젝트를 더 해보고 싶어 it 연합 동아리에 참여하며 프로젝트를 하고 있다. 1. 데브 캠프를 통해 참 많은 충격을 받았다. (좋은 의미이다) 정말 개발이 좋고 개발자를 하고 싶으면 이렇게 밍숭맹숭한 마음으로 임해서는 안되는구나.. 하는 생각이 들었다. 개발을 정말 좋아하고,.. 댓글 0 2025.06.08

• 

  6개월 간의 프론트엔드 현장실습 인턴 회고 React도 제대로 쓸 줄 모르던 내가 사수가 없는 곳에서 6개월 간 인턴을 했다. 왜 인턴을 했는가?여러가지 이유가 있다.프론트엔드 실무 경험을 해보고 싶어서좋아하는 일로 돈을 벌고 싶어서내가 회사 생활에 적성이 맞는 사람인지 알고 싶어서3학년 2학기까지 수료하고 다리 수술을 해서+조금 쉬면서 진로를 찾고 싶어서 휴학 신청을 했다. 퇴원하고 걷는게 좀 괜찮아졌을 때는 알고리즘이랑 리액트 공부도 하고, 다리를 절면서 학원에서 아르바이트를 했는데 알바를 하는게 너무 재미가 없어서… 내가 좋아하는 일로 돈을 벌고 싶었다. 그리고 리액트를 공부하다 보니 더 깊게 실무 경험을 하고 싶은 마음이 들었다. 그래서 그 때부터 자소서도 쓰고 리액트, 자바스크립트 공부도 더 열심히 하며 인턴을 준비하기 시작했다. 운이 .. 댓글 0 2024.12.17

최신 글

• 입사 1.5개월차 기록 기록과 회고의 차이는 무엇일까? 왠지 회고라 하긴 낯부끄럽고 기록이라 하긴 얕아서 무엇이라 표현해야할 지 모르겠다. 토니가 지나는 글을 잘 쓰니 입사 초기부터 어떤 생각을 했고 어떻게 성장했는지를 연재하면 재밌을 것 같다는 이야기를 해주었어서 주기적으로 글을 써보기로 했다. 한 달에 한 번 정도 쓰고 싶었는데 한 달이 눈코 뜰 새 없이 지나가 두 달에 가까워진 지금 글을 올리게 되었다. 정규직 전환재입사를 4월 6일에 했으므로 한달 반이 지났다. (쓸 때는 한달 반이었는데 업로드를 미루다 보니 지금은 두달 가까이 되었다...) 인턴 기간이 끝나 한량처럼 백수의 삶을 살다 컬쳐핏 면접을 보고 전환이 되어 재입사를 했다. 컬쳐핏 면접은... 긴장을 너무 많이 했던 기억만 난다. 면접을 마치고 친구와 저녁을 .. 2026.06.01

• 비개발자를 위한 Claude Code 개발 환경 구성 가이드 이 문서는 개발 환경이 하나도 없는 맥북에서 시작해서, 이 프로젝트의 디자인을 Claude Code로 직접 고칠 수 있는 상태까지 만드는 걸 목표로 해요.💡 읽는 분께처음 ~9단계(Claude Code 로그인)까지는 직접 손으로 따라 해주세요. 명령어는 거의 다 복사 → 붙여넣기 → Enter예요. (귀찮으면 그냥 클로드한테 해달라고 해도 해주긴 할 듯)Claude Code가 켜진 뒤부터는, 막히는 게 생기면 이 문서를 Claude한테 그대로 보여주고 "여기 멈췄어, 도와줘" 라고 하면 돼요.한 단계 끝낼 때마다 "확인하는 법" 이 있어요. 거기서 기대한 결과가 안 나오면 다음으로 넘어가지 말고 멈춰주세요.모르겠으면 화면에 뜬 글자를 그대로 복사해서 Claude한테 물어보여주세요. 0. 설치할 도구 목.. 2026.05.31

• 

  3개월 간의 당근 인턴 회고 🥕 회고를 쓴다면 '개발자는 글이 아니라 코드로 말한다'며 github 링크 한 줄만 올리는 상상을 했는데, 역시 그러기엔 할 말이 많다. 쓰다보면 너무 길어질 것 같아서 공백 포함 만자 내외로 맞추겠다는 다짐을 하며 글을 시작해본다. 무엇을 했는가?당근에서 프론트엔드코어팀이자 Lynx tf로써 lynx 개발을 했다. Lynx란?아마 이 글을 읽는 대부분의 사람은 Lynx가 무엇인지 모를 것이다. 간단하게 말하자면, 틱톡을 만든 회사인 ByteDance가 만든 React 기반 모바일 앱 개발 프레임워크이다. (더 자세한 정보를 알고 싶다면, 이전에 업로드한 Lynx란 무엇인가? 게시글을 참고하길 바란다.) 긱뉴스 링크도 첨부https://news.hada.io/topic?id=19688 Lynx - 웹 기술.. 2026.03.29

• 

  Lynx란 무엇인가? 새로운 세상의 크로스플랫폼 프레임워크 Write once, Render anywhere. https://lynxjs.org/ LynxEmpower the web community and invite more to build cross-platform appslynxjs.org 당근에서 윈터테크 인턴으로 근무하며 3개월 간 Lynx 개발을 했다. 굉장히 즐겁게 개발했는데, 대부분의 사람은 Lynx가 무엇인지도 모를 것이다. Lynx가 무엇인지, Lynx 개발이 왜 재밌었는지 정리해봤다.Lynx란?2025년 3월, ByteDance(TikTok의 모회사)가 오랫동안 내부에서만 사용하던 크로스플랫폼 UI 프레임워크 Lynx를 오픈소스로 공개했다. Lynx는 웹 개발자가 기존의 CSS와 React 지식을 그대로 활용해 iOS, Android, H.. 2026.03.28

• 

  2025 연말 회고 2025년. 내게 어땠나 묻는다면, 정말 재밌는 1년이었다고 대답할 수 있다. 2024년 하반기, 혼자 리액트 공부만 하다가 운좋게 들어간 현장실습으로 처음 협업을 하게 되었다. 인턴을 마치며 내겐 협업, 개발 경험이 많이 부족하다는 것을 느꼈고, 2025년에는 다양한 사람을 만나서 다양한 경험을 하고 싶다는 생각을 했다. 그래서 2024년 말에 세웠던 2025년의 목표는 아래와 같았다.기획자와 디자이너가 있는 환경에서 개발하기팀원들과 좋은 코드에 대한 논의(코드 리뷰)를 활발히 할 수 있는 환경에서 개발하기개발 좋아하는 친구들 많이 사귀기인턴을 하든 취업을 하든 실무 경험을 쌓기개발자랑 디자이너가 있으면 프로세스가 어떻게 달라질까? 코드 품질에 대해 엄격한 기준을 가지고 있는 사람과 함께 개발하면 어떤.. 2026.01.05

• 

  개발자도구를 켰을 때만 실행되는 코드가 있다…? (batch update, 이벤트루프) 📌 상황드래그를 할 때 updatePosition()으로 컴포넌트의 위치를 업데이트하고, updateWorkTime()으로 해당 데이터의 시간을 업데이트를 하여 드래그 시 컴포넌트 내의 시간이 함께 변경되는 코드를 작성했다.그런데 개발자도구를 켜면 코드가 실행되고, 개발자도구를 끄면 코드가 실행되지 않았다. 📌 분석나의 가설updatePosition()과 updateWorkTime() 두 함수 모두 내부에서 useState로 선언한 workBlock을 기반으로 데이터를 가공한 후, setWorkBlock()을 실행한다.setState가 비동기로 실행되어 updatePosition()이 실행되기 전 updateWorkTIme이 실행되어 updateWorkTime이 실행되지 않는 것 처럼 보인다.o.. 2025.10.25

• 

  인생의 타임라인 자소서를 쓰다 갑자기 내 생을 되돌아보아야겠다는 생각이 들었다.누군가 내게 자소서를 쓰기 전에 인생의 타임라인을 되짚어보라는 이야기를 했었는데... 한번 적어보려 한다.19살고3. 학업 스트레스로 게임 중독자가 되다.코딩을 좋아하고 게임을 좋아했으므로 자연스럽게 게임 개발자를 꿈꾸게 되었다.그때 한창 '로보토미 코퍼레이션'이라는 게임을 좋아했는데, 그 게임이 아주대 미디어학과의 게임 동아리에서 시작되었다는 이야기를 듣고 아주대 미디어학과에 가고 싶다는 꿈을 꾸게 되었다. 대학에 가면 마음 잘맞는 팀원들과 함께 인디게임을 개발하고 창업하고 대박을 치고 싶었다. 자소서에 진정성이 담겨 있어서 그런지 전액 장학금을 받고 입학했다. (현재 8학기 다녔는데 3학년 때 한번 성적 모자랐던 적 빼면 7학기 내내 등록.. 2025.09.23

• 

  소스코드로 react hook 동작 원리 살펴보기 이 글은 react 19를 기반으로 쓰여졌습니다. 목차react hook은 어디서 구현되고 있을까?useState는 진짜 useReducer로 이루어져 있을까?훅 객체 생성하고 linked list로 연결하기circular queue를 이용해 상태 update하기느낀점 책을 읽던 중, useState는 useReducer로 구현되었다고 하기에 진짜인지 궁금해서 소스코드를 찾아보기 시작했다.react hook은 어디서 구현되고 있을까?react/packages/react/src/ReactHooks.js at main · facebook/react · GitHubReactHooks 파일 뜯어보기react hook이니 ReactHooks.js 파일에 있을 것이라 예상했고, 다음과 같은 코드를 찾을 수 있었다... 2025.06.15

• 

  2025년 상반기를 마무리하며... 벌써 6월이다. 2025년 상반기를 회고해보려 한다.회고라고 하긴 민망하고 그간 무엇을 했는지 + 생각 정리에 대한 글이다. 목차 1. 데브 캠프1-1. 어떤 개발자가 되고 싶은지2. IT 연합 동아리3. 공모전4. 취미 생활 24년 12월, 인턴을 끝내고 백수가 되었다.25년 1월~3월에는 스마일게이트 데브 캠프 면접 탈락자들을 대상으로 진행한 온라인 데브 캠프에 참여했다.이후에는 휴학을 하고, 지금은 사람들을 더 많이 만나고 프로젝트를 더 해보고 싶어 it 연합 동아리에 참여하며 프로젝트를 하고 있다. 1. 데브 캠프를 통해 참 많은 충격을 받았다. (좋은 의미이다) 정말 개발이 좋고 개발자를 하고 싶으면 이렇게 밍숭맹숭한 마음으로 임해서는 안되는구나.. 하는 생각이 들었다. 개발을 정말 좋아하고,.. 2025.06.08

• 

  변화하는 디지털 세상, 어떤 개발자가 될 것인가? - <랜덤 액세스 프로젝트 4.0>를 관람하며 진로 고민으로 심란해진 마음에 안정을 찾기 위해 백남준 아트센터에 방문했다. 관람한 전시는 랜덤 액세스 프로젝트 4.0>으로, 변화하는 디지털 세상을 주제로 미디어 아트 작품을 여럿 전시하고 있었다. 가장 인상 깊었던 작품은 얀투 작가의 진행 중인 설치>였다. 이 작품은 자동 운반 차량이 전시장을 돌아다니며 다양한 오브제를 선택, 운반, 전시, 철거하는 과정을 반복한다. 차량이 운반하는 오브제들 중에서는 예술 작품 뿐만 아니라 의자, 택배 박스 등도 포함되어 있다. 이 자동 운반 차량은 예술품과 예술품이 아닌 것을 구별하지 못한다. 이는 기계가 가치 판단에 있어 인간의 한계를 벗어났으나 동시에 인간의 한계를 넘지 못하는 모습을 보여준다. 나는 개발자를 꿈꾸고 있다. 어떤 개발자가 될 것인지, 어떤 데이터.. 2025.06.03