회사에서 더 이상 업데이트하지 않는 레거시 게임서버측의 동작을 확인할 일이 있어서, 코드를 보는 김에 이 서버가 어떤 클라우드플랫폼의 어떤 서비스에 올려져 있는가를 찾아봤다. (최근 클라우드서비스 사용양상 분석을 하고 있다) 그런데 구서버 API URL 도메인의 AWS Route53 호스팅 영역을 보니, 아무 곳에도 연결이 되지 않고 있었다.오직 이 두 레코드 뿐이었는데, 실질적으로 이 도메인이 어딘가에 연결이 되어있으려면 A, AAAA, CNAME 등 외부자원을 나타내는 유형의 레코드가 있어야 한다.그러면 서버 요청이 허공으로만 전해지고 동작하지 않고 있는가 하면, 그것도 아니고 이 서버는 동작이 아주 잘 되고 있었다. 이 미스터리를 푸는 데 꽤 시간이 걸렸다. 결론적으로는 도메인 시스템에 대한 이해가..

클라이언트 사이드 렌더링부터 SSR, RSC까지의 발전 흐름이 항상 헷갈려서 여러 블로그들을 참고하여 한번 정리해 보았다.CSR이란?클라이언트 사이드 렌더링. 렌더링을 클라이언트(브라우저)에 위임하여 렌더링 로직을 클라이언트에서 수행하는 방식으로, 서버는 최소한의 HTML만 내려주고 클라이언트 측에서 해당 HTML과 CSS, JS 등을 파싱하여 화면을 렌더링한다.CSR은 기본적으로 SPA(Single Page Application)이기도 하다.CSR의 장점뷰가 그려지는 시점과 인터랙션이 가능한 시점이 동일해서 사용자에게 상호작용이 빠르게 느껴짐구현이 간단함, 생성 및 관리가 간단함페이지 이동 속도가 빠름(SPA에서 딸려오는 장점)CSR의 단점1. CSR 앱의 콘텐츠를 불러오려면 JS 실행이 필요하므로 S..

Vercel에서 한달 전쯤에 공개해서 화제가 되었던 Agent-skills에서 렌더링 성능 관련 스킬들(react-best-practices/rendering-, react-best-practices/rerender-)을 까보면서 몰랐던 내용들을 클로드와 함께 정리해 보았다.SSR에 국한된 내용(하이드레이션 최적화)이나 최신 React 명세와 관련된 내용(Activity, useTransition 등)은 생략했다.긴 리스트에서 CSS content-visibility 적용하기(rendering-content-visibility)화면 밖 렌더링을 지연시키기 위해 content-visibility: auto를 적용할 수 있다.내용 설명긴 리스트를 렌더링할 때, CSS의 content-visibility: a..

출처 : https://ykss.netlify.app/translation/2026/how-to-write-a-good-spec-for-ai-agents/ (번역) AI 에이전트를 위한 좋은 스펙 작성법원문 : How to write a good spec for AI agents TL;DR: AI를 압도하지 않으면서도 충분히 세밀한 지침(구조, 스타일, 테스트, 경계 조건 등을 포함)을 담아 명확한 스펙을 작성하는 것을 목표로 하세요. 큰 작ykss.netlify.app 위 글을 읽다가 AI 활용법에 대한 인사이트가 많아서 한번 정리해 봤다.스펙 주도 개발이 주 내용이지만, 병렬 에이전트나 적합성 테스트 중 AI 개발론에서 활용할만한 전략들이 많다. AI 에이전트 스펙 주도 개발AI 에이전트에게 명확하고..

연말마다 친오빠와 간단하게 연말 회고와 신년 목표, 포부를 공유하는 활동을 2년 전쯤부터 하고 있다.이번에도 진행했는데, 2024년 계획을 점검하기 위해 2024년에 내가 남겼던 소감을 들었다. 아주 뜻밖이었다.아주 행복한 한 해였다희망차다앞으로도 이렇게 보내고 싶다이렇게 회고를 남겼었더랜다. 내가 2024년을 이렇게 만족스럽게 보냈었던 줄 전혀 몰랐다. 지금은 어두컴컴한데하긴 2024년 12월에 이직을 성공해서 새 회사로 출근했고, 원하던 일을 할 수 있다는 만족감과 기대감으로 가득 차 있었을테니 회고를 남겼을 연말에 아주 행복했을 수밖에...그에 비해 2025년을 통과하는(사실 이미 통과했지만) 현재 시점의 나는 꽤 어두운(?) 상태이다. 올해는 나름 평화로웠던 작년에 비해 다사다난한 해였던 것 같다..

읽게 된 배경변경이 용이한 코드, 유지보수하기 쉬운 코드에 대해 탐구하다가, 언젠가 들은 원티드 프리온보딩에서 강사님이 클린 아키텍처를 많이 인용하시길래 저기에 답이 있겠다고 생각하고 읽게 되었다.책의 구성총 7부로 이루어져 있다.1부 : 아키텍처의 중요성2부~3부 : 프로그래밍 패러다임(구조적 프로그래밍, 객체지향 프로그래밍, 함수형 프로그래밍)에 대한 간략한 설명 및 설계 원칙(SOLID 원칙)에 대한 이론적 설명4부~6부 : 컴포넌트(패키지), 아키텍처, 데이터베이스/웹/프레임워크 등 여러 차원의 시스템들에서 위 이론을 바탕으로 클린 아키텍처를 설계하는 법7부 : 1970년부터 45년에 걸쳐 프로그래밍을 해온 저자의 프로젝트 경험담클린 아키텍처의 중요성"소프트웨어 아키텍처의 목표는 시스템을 구축하고..

이 주제를 다루게 된 계기회사에서 다음과 같은 패턴의 코드를 작성하고 있었다.const useSomething = (flag) => { if (flag) { return useSomethingWithFlag(); } else { return useSomethingWithoutFlag(); }}React 공식 문서에서는 "조건문이나 반복문 안에서 Hook을 호출하지 마세요"라고 명시하고 있지만, 사실 이 코드는 에러 없이 잘 동작했다.if문 중 하나에만 훅이 있을 경우엔 리액트 쪽에서 명시적으로 에러를 터뜨려서 막아줬던 것 같은데 저렇게 쓰니 너무 잘 돌아가서 의문이었다. Hook의 개수가 맞춰져 있으면 조건문에서 써도 문제가 없는 걸까?하는 의문이 생겼고 이 의문을 풀기 위해 React에..

예전에 한창 Cypress 실무에서 활용할 때 Cypress Best Practices를 정리해서 노션에 기록해두고 짱박아뒀었는데, 우연히 발굴해서 다시 읽어 보니 꽤 도움될만한 이야기들이 많아서 백업용으로 겸사겸사 블로그에 공유해 본다.처음 Cypress를 사용할 때 아래 공식 Best Practices 아티클을 읽어보는 걸 추천한다. 이 방식을 적용해서 테스트 소요 시간을 75% 단축시켰던 기록이 있다.(하지만 가능하면? Playwright를 쓰는 것을 추천한다. 난 Cypress 쓰면서 특유의 느린 속도와 flaky함, Cypress Cloud의 비용 문제 때문에 이가 너무 갈렸다...) Best Practices | Cypress Documentation Best Practices | Cypres..

2024년 12월에 현재 회사로 이직을 하고 9개월이 지났다.1년도 안 된 시간이지만.... 정말 다이나믹했다. 업무도 업무지만 여러 사건들이 일어나면서 정말 많은 일이 있었고 많은 경험을 쌓은 9개월이었다.한번 반추해 보고자 회고를 적어 본다. 커뮤니케이션에 대해서.현 회사에서 가장 많이 얻고 깨닫고 경험한 게 커뮤니케이션인 것 같다.지금까지 세 군데의 회사를 다녔지만, 이 회사에서 제일 말을 많이 하고 있다.이전의 회사들은 각자가 기능별로 업무를 분담한 풀스택 개발 형식이었고 기획자나 디자이너도 따로 없었어서 하나의 기능을 구현할 때 누군가와 소통하고 상의할 필요가 별로 없었다. 팀장님에게 리뷰받을 때 소통하는 정도가 거의 전부였다.하지만 현재 회사에서는 백엔드/프론트/게임 클라이언트/기획자로 명확하..

애플이 새롭게 내놓은 디자인 컨셉인 Liquid Glass.이런 Liquid Glass를 웹에서 구현하고자 하는 시도들을 많이 봤는데, 하나같이 svg filter라는 기능을 사용하고 있었다.svg가 단순 이미지 포맷이라고 생각했던 나에게 생소한 개념이라 정리해 보았다.Liquid Glass에 SVG filter가 필요한 이유CSS에는 backdrop-filter 라는 속성이 존재한다. 이는 요소 뒤 영역에 흐림이나 색상 등 그래픽 효과를 적용할 수 있는 속성이다.단순하게 봤을 때, 리퀴드 글래스를 만들기 위해 backdrop-filter: blur(2px) 같은 블러효과를 먹여서 구현하는 접근법을 생각해볼 수 있다.그러나 이렇게 구현할 시 리퀴드 글래스가 갖고 있는 유리 위에 비친 배경이 굴절되어 보이..