전체 글146 인앱웹뷰에서 화면마다 히스토리를 관리했더니 벌어진 일 최근 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. B2B 어드민 서비스에 웹 접근성 적용하기 웹 접근성이란웹 접근성(Web Accessibility, 흔히 a11y로 표기)은 장애 여부, 사용 환경, 보조 기술 사용 여부와 관계없이 모든 사용자가 웹 콘텐츠를 인지하고, 조작하고, 이해할 수 있도록 만드는 설계 원칙이다. 시각 장애가 있어 스크린 리더로 화면을 "듣는" 사용자, 손 떨림이나 마비로 마우스 대신 키보드만 쓰는 사용자, 밝은 곳에서 낮은 대비 화면을 봐야 하는 사용자까지 모두를 포함하는 개념이다.국제 표준인 WCAG(Web Content Accessibility Guidelines)는 접근성을 네 가지 원칙(POUR)으로 정리한다.인지 가능(Perceivable): 이미지에는 대체 텍스트를, 색상만으로 정보를 전달하지 않는 것.운용 가능(Operable): 마우스 없이 키보드만으로도 .. 2026. 7. 27. 글 요약 MCP 만들기 매번 글을 쓰고 나면 링크드인에 올리기 전에 매번 어떤 포맷으로 옮길지 새로 고민하게 된다. 핵심 요약을 몇 개 뽑을지, 어떤 얘기를 담을지 이런 결정을 글 쓸때마다 하고 있었다. 그래서 이 반복을 MCP 서버로 고정해버리기로 했다. 글을 발행한 후 가져와서 "대괄호 제목 -> 화살표 불릿 5개 -> 링크"라는 고정된 크로스포스팅 포맷으로 변환해주는 도구이다. 클로드 데스크탑에 연결해두면 "최신 글 가져와서 링크드인에 올릴 소개글 만들어줘" 한마디로 끝난다. 1. 구조MCP 서버가 하는 일을 3개의 독립된 도구로 쪼갰다. 이렇게 나눈 이유는 RSS 요약이 항상 전체 본문이라는 보장이 없기 때문이다. 1. RSS에서 최신 글을 가져오기 : get_latest_tistory_post2. 특정 글 URL에서 .. 2026. 7. 20. Next.js App Router 1. Next.js가 채워주는 것들React 자체는 '컴포넌트를 어떻게 렌더링할지'만 정의하는 라이브러리다. 라우팅, 번들링, 서버렌더링, 코드 스플리팅은 전혀 다루지 않는다.Next.js는 React를 프로덕션에서 쓰기 편하게 만든 프레임워크이다. 파일 기반 라우팅을 가지고 있고, 렌더링 전략의 선택권을 가지고 있다. 라우트 단위로 번들을 쪼개서 필요한 것들을 로드해 자동 코드 스플리팅이 되며, webpack(또는 최근에는 Turbopack)을 내부적으로 구성해 빌드 파이프라인을 만든다. 2. 렌더링 전략 : 페이지 단위에서 컴포넌트 단위로Next.js에서 렌더링 전략이 핵심이다.SSG(Static Site Generation) : 빌드 타임에 HTML을 미리 만들어둠. generateStaticPar.. 2026. 7. 14. 이전 1 2 3 4 ··· 25 다음
