전체 글149 튜플로 이해하는 ReBAC와 useState 최근 튜플이라는 개념을 알게 되면서, 이 개념이 권한 설계(ReBAC)와 React의 useState에서 어떻게 쓰이는지 정리해보기로 했다. 튜플은 순서가 정해져 있고 칸 수가 고정된 값의 묶음이다. 배열이 '같은 종류 여러 개'라면, 튜플은 '역할이 다른 값을 한 세트로' 묶은 것이다. 예를 들어 (아람, member, 프론트팀)은 첫 칸이 누가, 둘째 칸이 관계, 셋째 칸이 대상이라는 뜻을 가진다. 이 튜플이 실제로 쓰이는 곳 중 하나가 권한 시스템이다. 먼저 익숙한 RBAC부터 비교해보자. RBAC는 역할 기반이며 "너는 무슨 역할이야?"라고 물어보게 된다. 프론트는 사용자가 어떤 역할인지 알아내서 이 메뉴에 접근이 가능한지, 버튼을 클릭할 수 있는지에 대해 판단한다.그런데 '우리 팀 문서만 수정.. 2026. 10. 30. SaaS vs 온프레미스 : 프론트엔드에서 달라지는 것 SaaS(Software as a Service)는 격리와 배포가 핵심이고, 온프레미스는 호환성과 진단이 핵심이다. 최근 온프레미스 배포를 맡게 되면서, 평소 작업하던 SaaS와 프론트엔드 관점에서 무엇이 다른지 공부하고 정리했다. SaaS : 환경은 우리가 통제하지만, 여러 고객이 한 시스템을 같이 쓰고 버전이 계속 바뀐다.온프레미스 : 코드는 우리가 만들지만, 환경은 고객의 것이고 한 번 나간 버전은 고치기 어렵다.관점 SaaS 온프레미스환경 통제우리 인프라라서 프록시, cdn, 브라우저 정책을 맞출 수 있음.고객 인프라라서 프록시, 폐쇄망, CSP를 바꿀 수 없음.버전운영 버전은 하나이고 수시로 배포고객사마다 버전이 다르고 오래 유지됨.버그 수정핫픽스를 바로 배포고객사 일정에 맞춰 패치 -> 출시 .. 2026. 10. 16. Claude Agent SDK로 플래너 + 실행자 멀티 에이전트 만들어보기 시작하며요즘 개발자들 사이에서 멀티 에이전트가 화제라, 직접 만들어보면서 배워보기로 했다. 목표는 단순했다.플래너 에이전트가 작업 요청을 받아서 어떤 순서로 처리할지 계획만 세우고, 계획이 서면 실행자 서브에이전트를 호출해서 계획을 넘긴다. 그러면 실행자가 실제로 파일을 만들거나 코드를 작성하는 방식이다.@anthropic-ai/claude-agent-sdk (TypeScript)로 구현했고, 처음부터 끝까지 직접 코드를 짜면서 부딪힌 문제들을 그대로 기록했다. 완성된 코드만 던져놓기보다는 어디서 왜 막혔는지, 그걸 어떻게 확인했는지를 남기는 게 더 값진 것 같아서 시행착오를 그대로 살렸다. 1단계. query() 한 번 호출해보기가장 기본적인 형태부터 시작했다. import { query } from .. 2026. 9. 17. 인앱웹뷰에서 화면마다 히스토리를 관리했더니 벌어진 일 최근 EV Pay 카드를 발급하고 나면 미션을 수행할 수 있는 페이지를 만들었다. 앱 안에 인앱웹뷰로 만들었는데 인앱웹뷰로 구현할 때 중요한 점은 안드로이드의 물리 뒤로가기 버튼에도 우리가 의도한대로 '뒤로가기'를 실행해야한다. 하지만 안드로이드 물리 뒤로가기 버튼은 우리가 만든 UI를 전혀 모르고 이 버튼을 누르면 웹뷰의 브라우저 히스토리로 back()을 보내고, 더 되돌아갈 칸이 없으면 웹뷰 자체를 종료해버린다. 즉, 물리 뒤로가기 버튼 입장에서 우리 SPA는 그냥 히스토리 스택이다. 우리가 그 스택을 어떻게 쌓느냐에 따라 '레이어가 하나 닫히는 것'과 '앱이 웹뷰를 통째로 날려버리는 것'이 결정된다. 미션 중 하나였던 '충전 방법 확인하기' 화면에서 이 문제가 특히 까다로웠다. 이 라우트는 미션 목.. 2026. 9. 9. 브라우저 렌더링 1. HTML 파싱과 리소스 다운로드1.1 병렬 다운로드, 순차적 결합다운로드는 병렬이다. 리소스 다운로드는 병렬, 파싱 결과의 결합 지점은 순차적이다.브라우저가 HTML을 파싱하다가 를 만나면, CSS 파일 다운로드를 백그라운드로 요청해두고 HTML 파싱은 멈추지 않고 계속 진행한다. 이미지, 다른 리소스들도 마찬가지로 발견되는대로 병렬다운로드가 걸린다. 그런데 script를 만나게 되면(defer, async가 없는) HTML 파싱이 멈추고 브라우저는 이 스크립트를 실행하기 전에 먼저 그때까지 요청된 CSS 다운로드가 끝나기를 기다린다. 1.2 최적화 원칙CSS는 preload로 다운로드는 미리 시작하되, rel="stylesheet"로 바뀌기 전까지는 렌더 블로킹 리소스로 취급되지 않는다. Nex.. 2026. 9. 3. 무한 스크롤 최근 무한 스크롤을 구현해야 할 일이 생겼는데, 기본적인 구현부터 접근해보지 않았던 구현 방법까지 생각해보기로 했다. Next.js v16과 TanStack Query v5, react-intersection-observer를 사용했다.기본적인 무한스크롤의 코드이다."use client";import { useInfiniteQuery } from "@tanstack/react-query";import { useEffect } from "react";import { useInView } from "react-intersection-observer";import { fetchItems } from "@/lib/items";import type { CategoryId } from "@/lib/categorie.. 2026. 8. 19. 이전 1 2 3 4 ··· 25 다음
