글

2025 회고 & Toss Frontend Accelerator 후기

1년에 세 개의 회사를 다닌 사람이 있다? 그게 나다. 사주를 믿는 편은 아니지만 내 사주상 2025년이 들삼재라더니 정말 사건 사고가 많던 해였다. 코로나때는 3년이 1년같더니 작년 한 해는 반대로 1년이 10년같이 느껴졌었다. 정말 사건과 선택, 고민과 흔들림이 쉼 없이 이어졌던 해였다. 어디서부터 이야기를 시작해야할지 고민하다가 2026년이 되어버렸지

2025.10 엔지니어링과 예술

2025.03 프리랜서 예술가 백수는 왜 엔지니어가 됐나? 에서 이어지는 나와 엔지니어링과 예술에 관한 이야기.. --- 원래 나는 비전공자이며 미술을 했었다고 소개하면, 디자인도 직접하고 프론트엔드 개발을 잘 하겠네요. 저는 미적 감각이 없어서 프론트엔드가 어려워요.. 하는 사람들을 종종 만났다. 그러면 아 저는 디자인은 못하고, 순수예술 쪽이어서요..

2025.03 프리랜서 예술가 백수는 왜 엔지니어가 됐나?

2021년 가을 엔지니어로 인생 첫 정규직 직장인이 되었다. 2018년 겨울 그 추운 성북구에서 날 밤 까며 투바이에 실리콘칠하며 전시장 가벽을 세우고 손 곱아 가며 퍼포먼스 리허설을 하던 내가 갑자기 맥북 하나 펼치고 키보드 두드리는 엔지니어가 됐다. 2018년 겨울 그 음산하던 예술학교의 추운 언덕에서 아빠는 내가 4년제 국립대학 졸업할 때까지 취업할

네이티브 키보드에 콘텐츠가 가려지지 않게 하기 (iOS·Android)

모바일 웹에서 화면 하단에 입력창을 고정해 두는 UI는 흔하다. 채팅, 검색, 댓글, AI 챗봇 모두 화면 맨 아래에 입력창을 붙여 둔다. 사용자가 그 입력창을 탭하면 소프트웨어 키보드가 올라오는데, 이때 입력창이나 하단에 고정해 둔 다른 요소가 키보드에 가려지는 일이 생긴다. 이 글은 그 원인과, iOS와 Android에서 실제로 통하는 대응 방법을 각

Git https vs ssh

GitHub에서 레포를 클론할 때 두 가지 길이 있다. 같은 레포가 같은 모양으로 받아진다. 그래서 “둘 중 뭐가 다르지?” 싶다. 그런데 이 두 줄 안에서 일어나는 일은 완전히 다르다. 자세히 알아보자. ----- 목차 1. 처음 클론하기 2. 일상적 push/pull 3. 자동화 스크립트와 CI : 토큰 vs 키 4. 여러 계정 쓰기 : 회사와 개인을

HTML-in-canvas API 가 푸는 문제

목차 1. 문제: HTML과 Canvas의 단절 2. 이전: 개발자들의 3가지 우회로 3. HTML in Canvas API 해부 4. 이후: 무엇이 달라지는가 5. 실제 코드로 보는 Before / After 6. 현재 한계와 주의사항 7. 전망: 웹의 다음 단계 ----- 1. 문제: HTML과 Canvas의 단절 웹에는 오래된 모순이 있다. 텍스트,

React를 벗어나보자, 그리고 렌더링을 다시 보자 feat. jsp jquery Next..

렌더링의 출발점 JSP와 전자정부프레임워크 기반의 전통적인 방식은 렌더링의 출발점이 서버다. 요청이 들어오면 서버는 데이터를 조회하고 템플릿을 실행해서 HTML을 완성한 뒤 브라우저로 내려보낸다. 이 HTML은 단순한 골격이 아니라 이미 의미를 모두 가진 결과물이고, 브라우저는 그것을 실행하는 게 아니라 그대로 그린다. 렌더링이라는 행위가 서버에서 끝난다.

PDF exporter 크롬 익스텐션 개발기

화면에 있는 컴포넌트를 이미지로 추출하고 PDF로 합쳐주는 익스텐션을 개발하면서 배운 내용을 정리한다. 실제 크롬 익스텐션을 직접 개발해 본 것은 처음이었는데, 역시 꼭 필요한 순간에 기술을 활용하고, 어떻게든 그것이 가능하도록 하면서 알게되고 배우는 것들이 있다. Wishful thinking으로 원하는 그림을 집요하게 추구하다보면 그것을 구현하는 방법과

커스텀 가상키보드 입력을 React에서 감지하는 방법-이벤트 버블링의 한계와 Property Descriptor

프론트엔드 개발에서 사용자 인터랙션을 감지하고 상태를 동기화하는 것은 핵심 과제이다. 대부분의 경우 브라우저가 제공하는 네이티브 이벤트(, , 등)에 의존하면 되지만, 이 전제가 깨지는 순간이 있다. 바로 외부 시스템이 DOM을 직접 조작하는 경우이다. 대표적인 예가 보안키패드이다. 보안키패드는 키로깅 공격을 방지하기 위해 사용되는 가상 키보드로, 주로 금

서버 설정 없는 환경에서 SPA 라우팅 확장하기

tldr; fallback이 없는 path를 빌드 타임에 정적 엔트리로 승격시키는 방법 --- SPA에서 라우팅 문제는 대체로 서버 설정에서 시작된다. BrowserRouter를 쓰는 순간, URL은 더 이상 프론트엔드만의 것이 아니게 된다. 브라우저는 새로고침 시 해당 경로를 서버에 그대로 요청하고, 서버가 그 경로를 이해하지 못하면 404를 반환한다.

React Router 와 상태관리

라우트는 흔히 “페이지 이동”으로 설명된다. /login에서 /dashboard로 이동하는 것, 주소가 바뀌고 화면이 바뀌는 것. 이 설명이 틀리지는 않지만, React Router를 깊이 쓰기 시작하면 어딘가 부족하다는 감각이 생긴다. 라우트를 페이지로만 이해하는 순간, 레이아웃은 중복되고, 상태는 흩어지고, UI는 조건문으로 얽힌다. 반대로 라우트를 s

2025 회고 & Toss Frontend Accelerator 후기

1년에 세 개의 회사를 다닌 사람이 있다? 그게 나다. 사주를 믿는 편은 아니지만 내 사주상 2025년이 들삼재라더니 정말 사건 사고가 많던 해였다. 코로나때는 3년이 1년같더니 작년 한 해는 반대로 1년이 10년같이 느껴졌었다. 정말 사건과 선택, 고민과 흔들림이 쉼 없이 이어졌던 해였다. 어디서부터 이야기를 시작해야할지 고민하다가 2026년이 되어버렸지

Uncomputable 3,4장 리뷰

계산할 수 없는 3장 발췌 (Gemini 번역 바탕으로 의역) 디지털이란 무엇인가? 바퀴의 자기 와이어에서 디지털은 단순히 위 또는 아래의 차이를 나타냈습니다. 디지털은 그 이상도 이하도 아니었습니다. 위 또는 아래로 깜박이는 것은 0 또는 1과 같은 숫자에 해당했습니다. 그러나 이 0과 1 자체는 그렇게 중요하지 않았습니다. 중요한 것은 두 개가 있다는

Uncomputable Introduction 북리뷰

<Uncomputable 계산할 수 없는> 서문 발췌 (Gemini 번역) 이 책은 계산 가능한 것과 계산 불가능한 것에 관한 것입니다. 일반적인 이론 대신 일련의 역사적 에피소드를 이야기합니다. 이 이야기들은 광범위하게 생각되는 계산 및 디지털 미디어 아카이브에서 가져온 것입니다. 목표는 계산이 어떻게 나타나거나 나타나지 않는지 , 디지털이 어떻게 번성하

Uncomputable workshop 첫 모임 회고

최근 <계산할 수 없음 Uncomputable> 워크숍에 참여하고 있다. 워크숍은 서울대학교 제23회 디자인문화국제학술대회 와 포에버 갤러리(Forever Gallery)의 협력으로 진행되는 워크숍이고, engineering & other books 워크숍과 동명의 책 알렉산더 갤러웨이의 Uncomputable을 메인 텍스트로 여러가지 이야기와 글을 나눈다

Typescript Generic (1)

Typescript 제네릭, infer 에서도 Genrice 타입과 infer 키워드 개념과 활용을 다루었었다. 그런데 아직도 문법 자체에 익숙해지지가 않아서 연습해볼겸 셀프 연습문제를 만들고, 오래 기억하기 위한 접근방법을 기록해보기로 한다. 보다 제너럴한 컴포넌트 및 훅, 함수 등을 설계할 때 컴파일 타임에 타입을 고정시키지 않고 여러 가지 '가능한'

HTML id 속성과 CSS “identifier”의 스펙이 다른 이유 - feat. W3C Selector API 문서

Uncaught SyntaxError - Failed to execute 'querySelector' 글에서 이어지는 DOM API, CSS Selector, 그리고 HTML Attribute의 역사적 층위 차이 에 대해 공부해본 내용 기록. 디버깅을 하면서 위 글을 쓸 때 “는 HTML의 id 속성을 대상으로 하지만, CSS Selector 문법을 따르기

2025.10 엔지니어링과 예술

2025.03 프리랜서 예술가 백수는 왜 엔지니어가 됐나? 에서 이어지는 나와 엔지니어링과 예술에 관한 이야기.. --- 원래 나는 비전공자이며 미술을 했었다고 소개하면, 디자인도 직접하고 프론트엔드 개발을 잘 하겠네요. 저는 미적 감각이 없어서 프론트엔드가 어려워요.. 하는 사람들을 종종 만났다. 그러면 아 저는 디자인은 못하고, 순수예술 쪽이어서요..

Zod 로 type-safe한 form validation 구현하기

프론트엔드 개발에서 아주 많이 다루는 from과 유효성 검사. Zod 와 react-hook-form을 대부분 활용한다. 다른 form 라이브러리도 있는데 가장 익숙한 것은 아무래도 react-hook-form이다. 최근에 Zod와 react-hook-form의 resolver를 활용해서 보다 선언적이고, 유효성 검증이라는 하나의 관심사를 분리해 구현하는

쓰면서 익히는 알고리즘과 자료구조 - Stack

스택을 활용하는 기초 문제 valid parentheses 풀어보기 https://leetcode.com/problems/valid-parentheses/

쓰면서 익히는 알고리즘과 자료구조 - 배열 & LinkedList 두 수 더하기

LinkedList 구현인 ListNode가 아닌, 배열 리터럴로 주어졌을 때 구현해보기. 만약 배열 길이가 다른 케이스가 있다면, 단순 자리별 합으로 처리하도록 해보자.

쓰면서 익히는 알고리즘과 자료구조 - JS 배열로 LinkedList 만들기

배열 뒤집기 문제를 풀면서 새로 알게된 js 메소드 reduceRight 이라는게 있어서 기록해보는 배열로 연결리스트 만들고 뒤집기..! arrayToList 함수로 배열을 js 객체 형태로 바꿀 수 있다. value와 next를 key로 하는 중첩 객체를 만들고 이를 연결리스트로써 활용할 수 있게 하는 셈. https://developer.mozilla.

쓰면서 익히는 알고리즘과 자료구조 - Linked List & Array

쓰면서 익히는 알고리즘과 자료구조 를 읽고 정리해보는 기초 자료구조 이해.. 챕터3의 연결리스트(Linked List) 부분정리! 연결 리스트(Linked List) 노드(Node) 단위로 데이터를 저장한다. 각 노드는 데이터 + 다음 노드의 포인터로 구성된다. 메모리 공간이 흩어져 있어도 상관없다. 배열(Array) 연속된 메모리 공간에 데이터를 저장한다

Next.js prerender error

Next 앱 빌드 시점에 안나던 에러가 발생했다. 메세지 상으로는 분명 document나 window 객체 참조 에러였다. 그런데 전체 검색을 해보아도 직접 document를 참조하는 코드가 없었고, 혹시 몰라 의심이 가는 컴포넌트들의 최상단에 'use client'로 클라이언트 사이드 렌더를 하도록해보았으나, 실패. 결국엔 해결했는데, 그 이유와 왜 'u

Corepack 과 packageManager

참여하고 있는 프로젝트 B-Peach LAB 프론트엔드 프로젝트 유지보수와 고도화를 위해 Storybook과 디자인 시스템을 도입하기로 하면서 겪은 문제를 해결하고, 배운 점을 기록한다. 기존에 인수인계 받은 프로젝트에는 Storybook이 없어서 컴포넌트 유지보수, 유닛테스트가 용이하지 않은 구조였다. 그래서 올해 6월 새로운 버전9가 출시되기도 했고,

선언적으로 이벤트 로그 관리하기 feat.amplitude

회사에서는 amplitude를 이용해 이벤트를 로깅하고 있다. 이를 바탕으로 클릭률, 전환율 등의 사용자 이벤트를 트랙킹해보고 UX를 개선하는 지표로 활용하거나, 새로운 기능 출시나 개선 과제에 아이디어를 얻는다. 이전 회사에서는 이벤트 기반으로 의사결정할 기회가 많지 않았는데, 지금 회사에서는 퍼블릭하게 오픈된 B2C 플랫폼 서비스이다보니 (심지어 유저가

Python의 Call by Assignment

Python을 자료구조, 알고리즘 기초 지식과 함께 배워보고 있다. Javascript, Typescript 외에 처음 배워보는 언어라서 작성 방식도 낯설고, 개념도 조금씩 다르다. 익숙해져보기를 목표로 배워보고 있다. Call by Value (값에 의한 호출) 함수에 인자를 넘길 때, 값 자체를 복사해서 전달 함수 안에서 인자를 바꿔도 원본 변수에는 영

조합형 문자 입력과 IME(Input Method Editor) 이벤트 처리

IME(Input Method Editor)란? IME(Input Method Editor)는 한글, 일본어, 중국어처럼 조합형 문자를 입력할 때 사용하는 입력기다. 영어처럼 한 글자씩 완성되는 언어와 달리, 조합형 문자는 자음·모음 또는 여러 글자 요소를 조합해 하나의 완성형 글자를 만든다. 즉, 한 글자를 완성하기 위해 여러 번의 키 입력이 발생한다.

Zustand Selector 패턴 helper 직접 만들기 - 특정 state의 변경만 감지해 컴포넌트 re-render 방지하기

에서는 기본적으로 훅이 선택자(selector) 없이 사용될 경우, 스토어의 전체 상태 객체를 반환하기 때문에, 내부의 어떤 state가 바뀌든 리렌더링이 발생 한다. 예를 들어, 이렇게 사용하는 경우 , 등이 업데이트되어도 이 컴포넌트는 를 통해 전체 store에 대해 구독 중이므로, 불필요하게 리렌더링 된다. 그래서 이렇게 Selector 패턴으로 필요

작은 스타트업에 대한 요모조모 고민(retrospective)

최근 30명 정도의 개발팀 조직에서 10명 내외의 개발팀 조직으로, 그리고 투자단계도 극초기인 작은 스타트업으로 이직하면서 드는 생각 요모조모. 큰 조직 경험이 없는 나로서는 어떤 조직 문화와 체계, 업무방식이 자리잡혀있어야 좋은 것인지 잘 모르지만. 그간 배우고 까이고 아쉬웠던 그리고 좋았던 경험들을 작은 조직에 적응하며 잘 녹여보려고 노력중이다. 최근

Tiptap에서 contenteditable과 Prosemirror JSON 스키마 모델의 차이

Tiptap은 ProseMirror API를 기반으로 한 리치 텍스트 에디터 라이브러리다. 이를 이해하려면 먼저 기반의 편집 방식과 ProseMirror의 JSON 스키마 기반 모델 간의 차이를 이해해야 한다. 은 자유롭지만, 구조화되어 있지 않다 은 브라우저가 제공하는 기본 편집 기능으로, HTML 요소에 속성을 부여하면 그 영역이 직접 편집 가능해진다.

Next.js Link vs window.location.href

Next.js에서 페이지를 이동할 때 컴포넌트를 쓸지, 를 사용할지 고민한 적이 있다면, 둘의 차이를 단순히 “부드러운 이동 vs 전체 새로고침” 혹은 “내부앱 이동 vs 외부링크이동” 정도로만 이해하고 있을 수 있다. (그게 나였다..) 하지만 실제로는 Next.js의 렌더링 전략과 맞물린 중요한 차이가 있다. 는 클라이언트 사이드 라우팅 Next.js의

type-safe한 routes를 사용하기 feat.nuqs,zod

Nextjs 14, app router를 사용하는 회사 프로젝트에서 url routes를 활용해 UI를 변경해주거나 페이지 전환을 해주는 케이스를 발견했다. pathname과 querystring을 조합해 경로를 만들거나 조건에 따라 다른 경로로 이동시켜주는 로직이었다. 이참에 좀더 라우트를 type-safe하게 관리하는 방법들을 공부해보기로 했다. 음악

아무도 주지 않은 셀프 리프레시 휴가 feat.퇴사와 이직

3년 8개월간 다닌 첫 회사를 퇴사하고 남은 휴가를 써서 한 달이 조금 넘는 시간동안 쉬었다. 사실 이직을 하고 싶다는 생각을 1월 말 부터 하고 있었고, 중간 중간 쉬어가며 일해가며 페이스를 잃지 않으려 애쓰며 이직 준비를 했다. 이직처를 정하기까지는 대략 4개월 정도 걸렸다. 여러 회사에 면접을 봐보니 합격한 곳에 내가 면접을 잘 봤다기보다 그냥 핏이

Tanstack Query를 직접 만들어보자(1)

미니버전의 Tanstack Query를 직접 만들어보자. 1차 구현 기본적으로 querykey, queryFn을 넘겨 네트워크요청을 할 수 있도록 커스텀 React 훅을 만드는 것부터 해보자. 로딩, 데이터, 에러 상태를 리턴하도록 했다. 문제 상황 1 에서 dependencies array에 을 넣으면 무한루프에 빠지는데 그 이유는 훅을 호출하는 컴포넌트

jQuery와 React는 무엇이 다를까?

아주 오래전에 웹디자이너가 되고 싶었던 적이 있다. 그 때 동적인 인터랙션을 구현하기 위해 jQuery를 짧게 다뤄본 적이 있는데, 최근에 웹빌더를 기반으로 웹사이트를 만들어달라는 부탁을 받아 jQuery 기반의 코드를 커스텀해볼 일이 있었다. 사실상 바닐라 자바스크립트로 DOM을 조작하거나, React를 사용하는게 가장 익숙한 나로서는 jQuery 코드를

Next.js Parallel Routes 톺아보기

이전 회사에서는 Next.js 14버전을 쓰고 있긴 했지만 여러 기능들과 개념을 적극적으로 활용하지는 않았더랬다. (결과론적인 생각임..) 최근에 개인적으로 Next.js Routes를 활용한 프로젝트도 접해보고, 곧 합류하게 될 회사에서 Next.js 14버전 App Router를 적극 활용하고 있다고 미리 알려주셔서 짬내서 공식문서를 들여다보고 있다.

Typescript 제네릭, infer

TypeScript는 정적 타입 언어로서 코드의 안정성과 예측 가능성을 높이는 데 큰 장점이 있다. 그중에서도 제네릭(Generic)과 조건부 타입, 그리고 키워드는 타입 시스템을 훨씬 더 강력하게 만들어주는 도구다. 이번 글에서는 제네릭의 기본 개념부터 시작해, 키워드가 어떤 맥락에서 등장하고, 어떻게 활용되는지를 예제 중심으로 정리해본다. 제네릭과 in

커스텀 form hook을 직접 만들어보자 feat.Typescript

최근에 우연히 form hook을 직접 만들어볼 일이 있었다. 평소에는 주로 react-hook-form 라이브러리를 사용했었는데, 라이브러리의 도움없이 form 데이터와 상태를 다룰 수 있는 추상화된 React 커스텀 훅을 직접 구현해보았다. 사실 react-hook-form 에도 버그가 있고, form 기능 자체도 다루기 까다로운 편이라고 생각해왔어서,

Nextjs Script 활용해 정적 에셋 불러오기 (묵혀뒀던 디버깅 로그)

1년 정도 묵혀뒀던 디버깅 로그를 작성해본다. 너무 정신 없기도 했고, 당시에 어찌저찌 디버깅에 성공해 문제를 해결했었는데, 사실 정확히 이해가 안되고 일단 해결이면 오케입니다 상황이기도 해서 나중에 더 깊게 이해해야지 하다보니 로그 작성이 늦어졌다. 근데 그게 1년이나 걸리다니... 실제로 디버깅 날짜를 짚어보니 한 8개월 정도 됐다. 휴~ 배경 화이트보

3.5년차 직장인의 고민

만 3년 6개월 직장인으로 살고 있는 나는 요즘 고민이 많다. 만 서른이 된 생활인으로서의 나도 고민이 많다. 나는 그냥 늘 고민이 많다. 근데 요즘은 더 많다. 올해 목표 중에 '빨리 실행하기'가 있었는데 아니나 다를까 그 어느때보다 더 신중하고, 그에 더해 생각의 늪에 빠져있다고 느낄 정도의 폭풍같은 상반기를 보내고 뭔가 실행에 옮겨야 될 것 같은 기분

조건부 Hook을 사용하면 안되는 이유

최근에 React 기본기를 아주 크게 놓친 코드를 작성했던 일이 있다. 처음엔 음.. 뭐가 문제지 싶었는데, 아주아주 치명적인 실수여서 기록해본다. 역시 모든건 기본이 중요하다. ㅠㅠ 맨 처음에 내가 작성했던 코드는 이런 식이다. 요구사항은 로컬스토리지에 저장하겠다는 변수가 있다면 로컬스토리지에 저장하고 아니라면 in-memory 에 저장한다는 것이었다.

React에서 지연 초기화(Lazy Initialization) 이해하기

React에서 를 사용할 때, 초기값을 바로 전달하는 대신 함수 형태로 넘길 수 있다. 이 방식을 지연 초기화(Lazy Initialization) 라고 부른다. 지연 초기화를 사용하면 컴포넌트가 처음 렌더링될 때만 초기값을 계산하고, 이후 렌더링에서는 다시 계산하지 않는다. 특히 비용이 큰 초기 연산이 필요한 경우, 불필요한 연산을 줄여 성능을 최적화할

AWSKRUG 을지로 소모임 Vibe Coding 짧은 후기

https://www.meetup.com/awskrug/events/306989337/ AWSKRUG 을지로 소모임 Vibe Coding을 주제로한 밋업에 참석했다. AI를 헤비하게 쓰지는 않는 나는 요즘 AI와 바이브 코딩에 관해 다들 이야기하고 (비개발자 짝꿍은 내가 바이브 코딩 밋업에 간다고 하니 ”뭐? Vibe~ 코딩?? 웃긴 이름이네~ 다녀와서 어

Zustand combine 미들웨어로 장바구니 상태 타입 추론하기

최근 참여하고 있는 프론트엔드 코드리뷰 스터디에서 간단한 토이 프로젝트를 진행 중이다. 장바구니 기능이 포함된 이커머스 페이지를 만들며, 상태 관리에 초점을 맞춰 구현하고 서로의 코드를 리뷰한다. 그 과정에서 전역적으로 상태를 관리해야할 때 많은 스터디원들이 Zustand를 사용했는데, 나도 회사에서 Zustand를 애용하고 있던 와중 스터디원이 소개해준

Dialog vs Modal

최근에 tailwind 와 DaisyUI 라이브러리, 시맨틱 태그 dialog 를 사용해 다이얼로그를 구현할 일이 있었다. 그 중에 DaisyUI가 제공하는 class가 modal, modal-box 인데 반해 사용하는 엘리먼트 태그는 dialog인 점, 이를 랩팽한 컴포넌트 명을 ~Dialog로 할지 ~Modal로 할지 고민하다가 알게 된 내용을 정리한다

2025.03 프리랜서 예술가 백수는 왜 엔지니어가 됐나?

2021년 가을 엔지니어로 인생 첫 정규직 직장인이 되었다. 2018년 겨울 그 추운 성북구에서 날 밤 까며 투바이에 실리콘칠하며 전시장 가벽을 세우고 손 곱아 가며 퍼포먼스 리허설을 하던 내가 갑자기 맥북 하나 펼치고 키보드 두드리는 엔지니어가 됐다. 2018년 겨울 그 음산하던 예술학교의 추운 언덕에서 아빠는 내가 4년제 국립대학 졸업할 때까지 취업할

How long is a second in JavaScript?(번역)

저는 뭔가 늘 시스템의 구멍이나 표준의 미세한 오차 같은 것에 흥미가 많습니다. 그리고 완벽해보이는 시간 단위 같은 것들이 역사, 과학, 문화적인 배경과 연관이 깊고 어쩔때는 단지 인간이 그렇게 하기로 정한 것이라는 사실 같은게 늘 재미있어요. 2023년 토성의 위성이 145개라 태양계에 위성부자라는 기사가 났는데, 이번 달에 또 발견돼 274개가 됐다는

Oops, I Did It Again 실수, 그리고 성장 - 참여 후기

저는 평소 불안이 큰 성향을 지닌 사람으로서, 이런 특성이 약점이 되지 않도록 애쓰며 ‘내 안의 또 다른 나’와 싸우느라 지칠 때가 많아요. 엔지니어로 일한 지 3년이 조금 넘어가면서, 이제는 나만의 뾰족한 무기를 만들고 싶다는 생각이 들어요. "이것만큼은 자신 있다!" 라고 말할 수 있는 실력을 갖추고 싶고요. 이런 고민을 요즘 자주 하고 있어요. 그러던

React 상태 업데이트와 브라우저 렌더링 사이클 feat.무한스크롤

최근 무한스크롤을 React로 구현하다가 만난 문제를 해결하면서 브라우저 렌더링 사이클에 관해 공부한 내용 정리입니다. 요구사항 : 무한스크롤 구현하기 - 카드목록UI를 스크롤할 때마다 20개씩 더 보여주기 요구사항을 구현하기 위해 아래 4가지 단계가 필요합니다. 1. 스크롤 감지 2. 스크롤 감지후 목록 데이터 추가 요청하기 3. 기존 목록 데이터와 합치

백엔드가 없는데 CORS에러를 만나면 feat.Proxy

글을 시작하기 전에 CORS에러란 무엇인지 작성해보겠습니다. CORS (Cross-Origin-Resource-Sharing) 에러란? CORS에러는 웹 브라우저의 보안 정책(Same-Origin Policy, SOP) 때문에 발생하는 에러입니다. 웹에서 보안상의 이유로, 한 도메인(origin)의 웹 페이지가 다른 도메인의 리소스에 접근하는 것을 제한하는

The WET Codebase(번역)

The WET Codebase 안녕하세요. 저는 물을 많이 마시는 법을 배웠습니다. 안녕하세요, 제 이름은 댄 아브라모프입니다. 저는 React라는 JavaScript 라이브러리를 개발하고 있습니다. 사실, 이번 컨퍼런스는 제가 React 또는 JavaScript와 관련되지 않은 행사에서 발표하는 첫 번째 자리입니다. 그래서 궁금한데요, 혹시 React를

How to Grow Professional Relationships(번역)

Tejas Kumar의 포스트 How to Grow Professional Relationships 를 번역합니다. 전문적인 관계를 성장시키는 방법 제 커리어 동안 세계에서 가장 뛰어난 창작자들을 만날 기회를 가졌습니다. 하지만 동시에 상당한 수준의 게이트키핑(gatekeeping)도 경험했습니다. 특정 (억/조)만장자 클럽과 그룹들은 그들만의 세계를 작게

2D 그래픽 렌더링 - Canvas vs WebGL, Excalidraw의 선택과 성능 이슈

회사에서 Excalidraw를 채택해 양방향 실시간 화이트보드 필기 기능을 개발하고 이슈 대응 담당을 한지 꽤 시간이 지났습니다. 처음엔 단순 화이트보드 기능으로, 그 다음엔 선생님과 학생의 실시간 양방향 협업 화이트보드로, 최근엔 학교 수업 현장에서 쓰일 판서, 수학이나 과학 과목 등 텍스트로만 학습하기 어려운 유형들의 활동과 모둠활동을 지원하기 위한 형

프론트엔드 아키텍쳐 스터디 - Seperation of Concerns is Great BTW

Frontend At Scale에 게시된 프론트엔드 아키텍쳐 포스트를 읽고 정리합니다. 최근 팀 내 코드가 거대해지고 10명의 엔지니어가 같은 코드를 수정, 개발하게 되면서 아키텍쳐 설계에 대한 고민이 많아졌습니다. 개인적으로도 어느덧(?) 3년 정도 프론트엔드 개발을 하면서 기본적인 기능 개발 능숙도는 올라갔지만, 유지보수하기 좋고 긴 생명력을 가진 코드

2025 벅뚜벅뚜

어렸을 때 부모님따라 일출보러간 이후로 처음으로 스스로 새해 일출을 보러 다녀왔다. 구름이 많이 껴서 우렁찬? 해는 못봤지만 고요함 속에서 알 수 없게 밝아지는 기분좋은 공기를 느끼고 왔다. 지난 다사다난한 1년이 참 고되고 힘든게 많았는데, 너무 비장하지 않은 이런 미지근한 출발도 좋은 것 같다. 2025년 플랜을 짜봤다. 연말 휴가 동안 짝궁과 우리의

React의 Portal과 이벤트 전파 원리 draft

React에서 을 사용하여 렌더링된 컴포넌트는 React 트리의 계층 구조는 유지하면서, 실제 DOM 트리에서 다른 위치에 렌더링됩니다. 이러한 포털은 React 이벤트 시스템과의 통합 덕분에 React 트리 기반의 이벤트 전파를 유지할 수 있습니다. React Portal의 이벤트 전파 원리 React는 포털이 렌더링된 DOM 노드의 위치와 관계없이, R

소소한 z-index 상식

최근 모달 컴포넌트를 개발하고 해당 컴포넌트를 헤더에서 한 번, 푸터에서 한 번 열도록 한 케이스가 있었습니다. 우선 모달 컴포넌트는 뒤쪽에 백드롭(전체 화면이 어둡께 깔리는 UI)이 깔리고 뷰포트 중앙에 모달이 배치되는 글로벌(?)한 UI 컴포넌트로 제작을 했습니다. 구현된 방식은 fixed position에 뷰포트 중앙으로 transition을 잡아주는

3일간의 미니프로젝트 - 105+1 탄핵타자연습

12/14 탄핵 표결 전 완성하기 위해 3일동안 부리나케 만들어 본 미니 프로젝트 105+1 탄핵 타자 연습을 공유합니다. 국회앞 인파 속 데이터가 터지지 않아 탄핵 가결 후 올리게 됐지만 오히려 좋아!!!!!! 매일 시위현장에 나가기 어려운 상황에 우리가 일상속에서 연대할 수 있는 방법은 무엇일까 고민하며 개발했습니다. 미니프로젝트를 이렇게 빨리 만들게

2024.12.03 - 2024.12.08

이번주는 개발 기술 관련 글을 쓸 마음이 들지 않네요. 회사에서도 새로운 스쿼드로 협업과정의 어려움, 일이 되게 하는 것, 좋은 설계, 코드 리뷰에 관해 여러 고민들을 했지만 별로 쓰고 싶은 마음이 들지 않는 한 주 입니다. 회사 동료들의 친절함과 소속감으로 인한 충만함으로 좋은 하루를 보내기도, 일하는 방식에 대한 고민을 옆팀 동료가 듣고 조언해준 고마운

getComputedStyle + CSS zoom or transform

최근 엘리먼트의 포지션을 제대로 잡지 못해 발생하는 이슈 2가지를 만났습니다. 하나는 회사 프로덕션에서, 다른 하나는 애니메이션을 적용한 개인 퍼블리싱 프로젝트에서 엘리먼트의 포지션이 어긋나 화면에서 보이지 않은 이슈였습니다. 1. 회사 프로덕션 : 화면 확대/축소 배율 조정 기능이 들어간 화면에서만 툴팁 컴포넌트의 x,y 포지션을 못잡은 이슈 2. 개인

슬로우 워크Slow Productivity(2)

3주간 회사 팀원들과 북리뷰를 진행했습니다. 일하는 방식을 너무도 개선하고 싶었고, 뭔가 액션아이템을 실행하려면 혼자 읽는 것보다는 다같이 리뷰를 하면서 읽고 공감대를 공유하는 것이 도움이 되리라 생각했습니다. 다들 많은 이야기를 나누어 주셨고, CTO, PM, 디자이너, 개발자가 모두 모여 생산성과 퀄리티, 일하는 방식이라는 주제에 관해 서로의 생각을 공

Uncaught SyntaxError - Failed to execute 'querySelector'

최근 리치에디터 기능 개발을 하면서 div 요소에 id indentifier를 랜덤으로 제너레이트해서 부여하고 해당 id를 querySelector로 찾아 DOM을 업데이트해줄 일이 있었다. 자세한 스펙은 적을 수 없지만 리치에디터 컴포넌트를 tiptap을 사용해서 구현하고 있는데, 이때 커스텀한 Node마다 id를 부여해 json content에 저장하고

vercel에 배포만 하면 라우팅 안되는 이슈 왜?

최근에 새로운 프로젝트를 하나 의뢰받아 vite react ts 로 개발하던 중 만난 문제를 기록해보고자 합니다. 클라이언트 사이드 라우팅을 위해 react-router-dom으로 3개 페이지를 라우팅하는 방식을 사용하고 있었습니다. 대략적인 구조는 이렇습니다. 로컬에서 각 페이지를 잘 개발하고, Header에서 네이게이션 버튼으로 라우팅하는 것까지 잘 확

슬로우 워크Slow Productivity(1)

최근 밀어붙이기만 하는 회사 업무 프로세스에 답답함을 느끼고 있습니다. 저 뿐만 아니라 팀 전반에도 네거티브가 많이 쌓이는 것 같아 생산성을 주제로한 따끈한 신권을 혼자 읽기보단 팀내 북리뷰 시간을 만들어 책을 같이 읽고 액션아이템을 만들어보기로 했습니다. 제 바람은 적절한 공감대를 가지고 다시 긍정적인 방향으로 나아가는 것인데, 너무 지쳐버린 팀원들, 비

toss 프론트엔드 파이트 클럽 참여

이번주 토스 프론트엔드 파이트클럽(프파클) Round4에 초대를 받아 참여하게 됐습니다. 해당 행사는 지난 프파클 행사의 스핀오프 행사로 토스 오피스에서 오프라인으로 진행이 됐습니다. 프파클은 프론트엔드 개발자라면 누구나 한번쯤 고민해봤을 법한 주제를 밸런스게임처럼 비교하며 패널과 참여자들이 토론하는 이벤트입니다. 앞선 Round1,2,3은 온라인으로 참관

React memo로 불필요한 렌더링 최적화

React 처음 배울때 제일 먼저 배우는 것 1. state가 변경될때마다 리렌더링된다. 2. props가 변경될때마다 리렌더링된다. 3. 부모 컴포넌트가 리렌더링되면 자식 컴포넌트도 리렌더링된다. 4. context value가 변경되면 context를 사용하는 컴포넌트가 리렌더링된다. 5. forceUpdate 메서드를 호출하면 강제로 리렌더링된다. 회

데브콘2024 다녀와서

이번 포스트는 지금까지와 조금 다른 주제로 작성을 해봅니다. 이번주 한빛앤 사옥에서 진행한 데브콘2024 을 다녀왔습니다. 세션을 듣고 이것저것 드는 생각들을 몇 가지 키워드로 짧게 기록해두는데 목적을 두겠습니다. 기술적인 지식을 정리하기보다 현재 회사에서 일하는 방식, 개인으로써 일하는 방식, 앞으로 어떻게 할 것인가를 위주로 작성이 될 듯 합니다. 1.

pointer-events로 원하는 element 정확하게 클릭하기

지난 포스트 element의 중앙을 찾아 선긋기 에서 svg 레이어를 보기카드 레이어보다 낮은 z-index로 겹쳐 보기카드와 선이 그려지는 위치를 일치시키는 방식으로 '선긋기'를 완성했었습니다. 그런데 만약 svg로 그려진 선을 직접 클릭해서 이어진 두 카드의 연결을 끊는 인터랙션을 구현하려면 어떻게 할 수 있을까요? 기본적으로 모든 elements는 z

element의 중앙을 찾아 선긋기

(https://images.app.goo.gl/fz4Vruc1TpxqwTCt5 이미지 출처) (https://kr.pinterest.com/pin/602567625135639636/ 이미지 출처) 회사에서 이런 선긋기 학습활동을 온라인에서 할 수 있도록 개발하고 있습니다. 새로운 학습활동인만큼 본격 개발 이전에 선을 그리고 선으로 이어진 두 카드가 매칭되

github actions로 fork한 레포지토리 동기화하기

사이드 프로젝트 sqetch.club 를 하는 중에 팀 레포지토리를 organization으로 야심차게 만들었습니다. FE는 Vercel을 연동해 main 브랜치에 머지되면 배포가 되도록 해두었는데, 개인 레포지토리가 아니라 organization 레포지토리는 유료로 배포가 되는 걸 뒤늦게 알아버렸습니다. ^^; 사실 쫌쫌따리 작고 조그마한 사이드 프로젝트

type-safe하게 API 만들기

현재 sqetch.club 프로젝트는 phoenix Socket , Channel 을 이용해서 Sveltekit app과 소켓통신을 하는 구조입니다. 프로젝트 poc단계에서 임시로 만들어둔 endpoint이긴 하지만 모든 타입들이 any 혹은 Object 타입인 상태로, 어떤 api에 어떤 payload data가 전송되는지 알 수가 없는 상태입니다. ph

WHY PROGRAMMING IS A GOOD MEDIUM FOR EXPRESSING POORLY UNDERSTOOD AND SLOPPILY FORMULATED IDEAS, Marvin Minsky

Intro 뭔가 만들고 코드를 작성하는 중에는 그러니까 몰입하고 있는 중에는 그 어떤 순간보다 재미있게 푹 빠져서 코딩을 하는 것 같습니다. 그런데 뭐랄까 요새 좀 개발, 프로그래밍에 대한 사랑..ㅋㅋ이 좀 식었는데 의욕도 좀 줄어들고, 다 비슷한 것 같고 나에게 새롭게 다가오는 자극이 없는 느낌을 받습니다. 그런 의미에서 예전부터 좋아하던 글을 번역하는

Next.js Pages router, App router & SvelteKit routes

Intro 최근에 Sveltekit + Phoenix 조합으로 사이드 프로젝트를 하나 만들고 있습니다. 회사에서도 Next.js 13으로 버전업하면서 Pages router 에서 App router로 점진적으로 마이그레이션을 하고 있고, 새로운 기술스택 Sveltekit의 routes 방식을 비교해보려고 합니다. 세 가지 라우팅 방식 다 공식 문서에 아주

engineering & other books

1. 함께 자라기 애자일로 가는길 2. Making Work Visible 3. Effective Typescript 4. Design System in 90 Days 5. Atomic Design 6. Production Ready Graphql 7. 프로그래머의 뇌 8. 오브젝트 9. Frameworkless Front-End Development 10

dot to dot wallpaper

recollect-logs

처음 개발 공부하던 때.. 열심히 했었다 아무것도 몰랐고.. 재미있었다 시안도 열심히 한땀한땀 만들고

study archives

1. https://www.patterns.dev/ | 2022 2. https://css-for-js.dev/ | 2023 3. https://github.com/zuzokim/http-definitive-guide-study | 2022 ~ 2023 4. https://practical-accessibility.today/ | 2024 5. https:

How to Design a GoodAPI and Why it Matters - Joshua Bloch

https://static.googleusercontent.com/media/research.google.com/ko//pubs/archive/32713.pdf