AI가 우기는 방식은 인간과 닮아 있다2주 전6분LLM이 그럴듯한 답을 확신하듯 이어가는 방식과 인간의 자기 확신이 닮아 있는 이유, 그리고 AI를 멈추게 하는 점검 장치를 정리했다.
내가 쓰는 메모장을 AI도 읽게 했다 (Ocean Brain)2주 전6분내가 계속 쓰려고 만든 셀프호스트 노트 앱 Ocean Brain에 MCP를 붙여, 사람이 보기 좋은 메모장이 AI에게도 좋은 맥락이 된 경험을 정리했다.
AI 에이전틱 개발에 대한 걱정1개월 전5분속도는 기술이 올려줄 수 있다. 하지만 그 속도를 따라잡을 수 있는 검토 방식, 공유 방식, 책임 분산 방식이 없다면 그것은 생산성 향상이라기보다 책임이라는 이름으로 누군가에게 감당하지 못할 몫을 떠넘기는 일이 될 수 있다.
사용 가능한 뉴모피즘2개월 전11분내가 좋아하는 뉴모피즘을 실제 인터페이스에 써보기 위해, 무엇을 포기하고 무엇을 남겨야 하는지 정리한 기록이다. 예쁘지만 쓰기 어려운 스타일을 사용 가능한 디자인 언어로 만들기 위해 그림자, 위계, 접근성, 컴포넌트 규칙을 정리했다.
AI에게 팀 역할을 맡기며 배운 것3개월 전5분혼자 개발할 때 내 관점에 갇히지 않기 위해 AI에게 가상의 팀 역할을 맡겨본 실험을 정리했다. Team Conor 자체보다 중요했던 것은, AI에게 코드를 더 많이 쓰게 하는 일이 아니라 내 생각을 다른 관점에서 다시 보게 만드는 구조였다.
GitHub Actions 셀프 호스트 러너 직접 띄워보기4개월 전2분GitHub Actions 셀프 호스트 러너를 직접 띄워보고, workflow의 runs-on: self-hosted로 내 장비에서 잡을 실행하는 과정을 정리했다. 이 글은 러너를 안전하게 운영하는 방법이 아니라, 다음 글에서 위험성과 격리 방식을 다루기 전 기본 동작을 확인하는 기록이다.
리액트 18 동시성 렌더링5개월 전3분React 18의 동시성 렌더링을 startTransition, useTransition, useDeferredValue 중심으로 정리한 글이다. 동시성 렌더링은 모든 렌더링을 빠르게 만드는 기술이 아니라, 사용자의 중요한 상호작용을 먼저 반영하기 위해 느린 렌더링의 우선순위를 낮추는 방식에 가깝다.
AI는 내 편향을 너무 잘 편들어준다5개월 전4분AI는 나를 가두려고 하지 않는다. 하지만 내가 이미 가진 결론을 들고 다가가면, AI는 그 결론을 너무 그럴듯하게 보강해준다. AI를 많이 쓰는 사람일수록 왜 자기 생각을 더 조심해서 의심해야 하는지 정리했다.
바퀴를 재발명하지 않기5개월 전4분최적화와 통제권을 핑계로 직접 만들던 것들이, 어느 순간 내가 만들려던 제품보다 더 커져버렸다. 바퀴를 직접 깎는 즐거움과, 마차를 앞으로 나아가게 하는 일 사이에서 무엇을 선택해야 하는지 정리한 글이다.
NPM: Git과 Tarball로 의존성 관리6개월 전4분회사 디자인 시스템을 수정하며 개발해야 했으나, 정식 배포는 너무 오래 걸렸습니다. 동료 팁으로 Git/Tarball로 직접 설치하는 법을 알게 되었습니다. 프라이빗/베타 버전 관리에 매우 효율적이겠습니다.
자바스크립트를 원래 자리에 되돌려 놓기8개월 전7분장고 풀스택에서 Next.js로 전환했다가 다시 장고로 복귀한 경험을 다룬 글. 리액트 서버 컴포넌트(RSC)의 한계와 Vite, 섬 아키텍처를 활용한 현대적 풀스택 개발 방식을 설명합니다.
앵귤러는 화면을 어떻게 그릴까?2025. 04. 06.10분앵귤러 성능 개선의 핵심, 렌더링 원리 이해하기! Zone.js부터 변경 감지, 실제 DOM 업데이트까지 앵귤러의 작동 방식을 배우고, OnPush 전략을 적용하여 앱 성능을 최적화하는 방법을 알아보세요.
Sass @import 및 Legacy API 해결 방법2024. 11. 20.3분Sass의 @import 구문이 Dart Sass 3.0.0에서 사용 중단되며, Legacy JS API도 더 이상 지원되지 않습니다. 이 글에서는 @use와 @forward로의 전환 방법을 설명하고, Vite에서 Legacy API 경고를 해결하는 방법을 안내합니다. Sass와 Vite 설정을 최신 상태로 유지하여 원활한 개발 환경을 구축하세요.
쉐도우 돔을 스타일링 하는 방법2024. 09. 08.14분HTML은 모두 DOM으로 변환된다. DOM은 자바스크립트로 엑세스하고 CSS로 스타일링 할 수 있다. Shadow DOM은 요소 내부에 Shadow DOM 이라는 자체 DOM을 생성할 수 있다. 웹 사이트의 소스를 보다가 위와 같은 것을 발견한다면 그것이 쉐도우 돔이 적용된 것이다. Shadow DOM을 사용하는 이유? 페이지의 다른 자바스크립트나 CSS로 부터 컴포넌트를 보호 컴포넌트에 대한 …
리액트 18 서스펜스 (Suspense)2024. 07. 06.4분React Suspense를 React.lazy, fallback, 데이터 fetching 관점에서 정리한 글이다. Suspense는 아무 Promise나 자동으로 기다려주는 도구가 아니라, 준비되지 않은 UI를 가장 가까운 경계의 fallback으로 전환하는 방식이라는 점을 중심으로 다룬다.
BLEX 2024 4월 개발노트2024. 05. 01.4분BLEX의 2024년 4월 개발노트입니다. 초대장을 도입하여 오픈형 블로그에서 다소 폐쇠적인 서비스로 변경되었습니다. 메인 페이지, 프로필 페이지의 디자인이 리뉴얼 되었으며 시리즈 페이지의 UI가 개선되었습니다. 개발노트에 작성한 작업들을 진행하며 느낀점을 담은 월간회고를 작성하였습니다.
웹 앱 API 개발을 위한 GraphQL 1~4장 정리2024. 04. 27.15분GraphQL을 보다 잘 사용하기 위해서 '웹 앱 API 개발을 위한 GraphQL' 도서의 1-4장 부분에서 새롭게 알게된 것이나 주요한 내용들을 정리하였습니다. GraphQL 소개, 그래프 이론, GraphQL 쿼리 작성과 스키마 설계에 대한 내용을 다루고 있습니다.
Docker 이미지 사이즈 최적화 기록2024. 04. 13.3분내가 만든 Docker 이미지가 1.44GB까지 커진 것을 보고, dive로 레이어를 확인하며 어디서 용량이 늘어났는지 추적했다. 베이스 이미지 변경, .dockerignore, 멀티 스테이지 빌드를 적용해 이미지를 322MB까지 줄인 기록이다.
2024 1분기 회고2024. 04. 07.11분1월 회고[업무]회사에서 중요한 프로젝트를 진행중이다. 이 작업을 하면서 내가 주체적으로 일하지 않는다는 생각이 강하게 들었다. 그냥 시키는 대로만 하고 그 외에 부분은 크게 신경쓰지 않는 태도로 작업을 했던것 같다. 아직 업무에 익숙하지 않아서 그런걸 수도 있겠지만, 다음 프로젝트에서는 개선하도록 해야겠다. [되고 싶지 않은 모습]뭘 해야될지 모를 때... 삶의 목표를 잡아주는 …
리액트 19 서버 컴포넌트 (RSC)2024. 03. 11.4분React Server Components를 기존 SSR의 연장선에서 정리한 글이다. 하이드레이션 비용, 클라이언트 컴포넌트와 서버 컴포넌트의 경계, 'use client' 지시어, 그리고 RSC를 이해할 때 조심해야 할 오해를 함께 다룬다.
BLEX 2023 12월 개발노트2023. 12. 25.1분⭐ 추가된 항목 💬 사용자 포스트 검색 사용자의 프로필 > 포스트에 검색 입력창이 추가되었습니다. 💬 태그 클라우드 페이지 추가 블렉스에 존재하는 모든 태그를 모아 볼 수 있는 태그 클라우드 페이지를 추가하였습니다. 태그명과 동일한 URL로 작성된 포스트는 태그 상세 페이지에서 태그를 대표하는 설명글로 표기됩니다. 💬 간편 발행 버튼 추가 포스트 발행시 …
BLEX 2023 11월 개발노트2023. 11. 23.1분⭐ 추가된 항목 💬 알림 설정 추가 원하는 알림만 수신할 수 있도록 알림 설정을 추가하였습니다. 기존 사용자를 비롯하여 서비스에 가입시 기본적으로 모두 비활성화 된 상태이므로 알림 수신을 원할 경우 활성화가 필요합니다. 💬 포스트 설정 페이지 필터 추가 [설정 > 포스트 관리 > 포스트]에서 정렬 외 포스트에 설정된 태그, 시리즈 및 …
Angular :: Pipe2023. 11. 23.8분이 글은 Angular에서 템플릿에 데이터를 변환하는 파이프에 대한 설명이며, 내장 파이프와 커스텀 파이프의 생성 방법과 옵션에 대해 다룹니다. 내장 파이프로는 AsyncPipe, DatePipe, CurrencyPipe 등이 있으며, 커스텀 파이프는 @Pipe 데코레이터를 사용하여 생성하며, 옵션으로는 name, pure, standalone 등이 있습니다. 코드 예시와 함께 파이프의 활용 방법을 자세히 설명하고 있습니다.
