YDMmobile / oss
KOEN

Keyword / 12 entries

javascript

이 키워드가 붙은 글입니다. 전체 글

Category
  1. 1

    개발할 때는 Next.js, 실행할 때는 FastAPI 하나만 남기기

    Python 백엔드에 웹 화면을 붙이면 개발 중에는 서버 두 개가 자연스럽습니다. Next.js 개발 서버가 화면 변경을 반영하고 FastAPI가 데이터를 처리합니다. 그런데 사용자가 로컬 도구를 실행할 때도 Node 서버와 Python 서버를 각각 켜야 할까요? 화면을 정적 파일로 만들 수 있다면 배포 후에는 FastAPI가 화면과 API를 같은 주소에서 제공하도록 구성할 수 있습니다. 개발 환경의 편의를 유지하면서 실행할 서버를 줄이는 선택입니다. 다만 개발 서버가 해 주던 일을 무엇이 대신할지 명확히 나눠야 합니다. 개인 사진 분류 프로젝트의 웹 실행 경로는…

    KO2026-10-29

  2. 2

    Vitest Is Collecting Unrelated Tests? Start with the File List

    If Vitest reports a failure in a test file you do not recognize, inspect the file path before changing assertions, timeouts, or worker settings. A test collected from a tool's cache needs a different fix from a failing test in your application. The useful question is specific: which files did this invocation discover,…

    EN2026-10-23

  3. 3

    The Export Line Was Not the Documentation

    I found the symbol in one search. That line looked generous. It gave me the function name. It showed two arguments. It even showed that the options object and status both have defaults. I could have written the documentation immediately. I would have documented the shape and guessed the behavior. The export line…

    EN2026-10-08

  4. 4

    The Mobile Screenshot Was 390 Pixels Wide and Still Lied About the Viewport

    A 390-pixel-wide capture showed horizontal overflow. The visual review appeared to have found a mobile layout bug. Except it had not. Headless Chrome had kept an approximately 500-pixel layout viewport and cropped the image to 390 pixels. The screenshot dimensions were correct. The page geometry behind them was not.…

    EN2026-09-29

  5. 5

    localStorage를 React 상태처럼 쓰면 동기화가 빠지는 이유

    작은 웹사이트에 한국어와 영어 전환 버튼을 붙이려다가 묘한 장면을 만났습니다. 버튼을 누른 탭은 영어가 됐는데, 옆 탭은 여전히 한국어였습니다. 새로고침하면 둘이 다시 같은 언어가 됩니다. 저장은 됐고 화면도 바뀌었는데, 둘 사이의 소식만 늦었습니다. 처음에는 localStorage에 값을 썼으니 React도 알아서 알겠지 싶습니다. 하지만 localStorage는 React 상태가 아닙니다. 값은 보관해도 컴포넌트에 “다시 읽어!”라고 말해 주지 않습니다. (창고 직원에게 물건을 맡겼는데 방송까지 해주길 기대한 셈입니다.) 이 문제의 방향은 분명합니다. 브라우저…

    KO2026-09-25

  6. 6

    복사하지 말고 가져오세요: 디자인 토큰과 스크린샷의 import 경계 만들기

    앱의 색상을 바꿨습니다. 랜딩 페이지의 색상도 바꿨습니다. 앱 스크린샷도 새로 찍었습니다. 랜딩 페이지에 있는 스크린샷도 갈아 끼웠습니다. 여기까지만 보면 동기화가 끝난 것 같습니다. 그런데 한 달 뒤 누군가 묻습니다. “이 주황색은 앱이 기준인가요, 웹이 기준인가요?” 대답이 “아마 앱일 텐데요”라면 이미 동기화가 아닙니다. 색상 값과 이미지 파일이 우연히 같은 시점일 뿐입니다. Flutter 앱과 Next.js 랜딩 페이지를 잇는 이 구성에 필요했던 것은 더 거대한 design system이 아니었습니다. 한쪽에서 만든 결과를 다른 쪽으로 가져오는 작고 명시적인…

    KO2026-08-23

  7. 7

    An English File Does Not Make a Bilingual Route

    Part 3 of The Portfolio Is an Interface. I added English post routes to my portfolio and used a condition that looked impossible to misunderstand: If a post has English, generate /posts/<slug>/en. What could possibly go wrong? Three of the six posts in that first corpus answered the question. They were English-only…

    EN2026-08-20

  8. 8

    Your Public Resume Should Be a Projection, Not a File Read

    Part 1 of The Portfolio Is an Interface. I wanted one resume file to feed everything: the Korean page, the English page, the printable documents, and the work pages on my portfolio. One source of truth, fewer places for a date or sentence to drift. Very tidy. Then I wrote a test fixture with a fake phone number in it…

    EN2026-08-19

  9. 9

    취소 버튼을 눌렀는데 요청이 계속 돈다? AbortController로 진짜 취소하기

    네트워크 요청에 진행 알림을 붙였습니다. 오래 걸릴 수 있으니 취소 버튼도 달았습니다. 사용자가 취소를 누르면 알림을 닫고 함수에서 return합니다. 끝났을까요? 아닙니다. 이미 시작된 fetch()는 여전히 응답이나 타임아웃을 기다릴 수 있습니다. 화면에서 사라진 것은 진행 표시이지 요청이 아닙니다. API 사용량도, 네트워크 연결도, 서버 작업도 계속될 수 있습니다. 이런 취소는 사실 안 보기에 가깝습니다. 진짜 취소를 만들려면 UI 이벤트가 네트워크 계층까지 전달되어야 합니다. Commit Quill은 VS Code 진행 알림의 취소 토큰을…

    KO2026-08-13

  10. 10

    번역 라이브러리 없이 다국어 상태 만들기: useSyncExternalStore와 localStorage

    다국어 지원을 붙여야 한다고 하면 보통 패키지부터 찾습니다. next-intl, react-i18next, i18next 같은 이름들이 줄줄이 나오죠. 당연합니다. 복수형, ICU MessageFormat, 번역 파일 분할, 지연 로딩, 번역 플랫폼 연동까지 생각하면 검증된 라이브러리를 쓰는 게 맞습니다. 그런데 영문과 한글만 있는 작은 단일 페이지라면 어떨까요? 필요한 건 사실 네 가지뿐일 수 있습니다. localizations 저장소에서는 이 문제를 useSyncExternalStore와 localStorage로 풀었습니다. 거창한 프레임워크를 새로 만든 건…

    KO2026-08-09

  11. 11

    You Don't Choose Your Scraping Strategy — the Platform's API Surface Does

    I wanted the same boring thing twice: pull my own chat history out of an AI product and save it as Markdown. Once for Claude, once for Gemini. Same author, same monorepo, same output format, same week. I assumed I'd write one script and copy-paste it with the hostname swapped. I ended up with two scripts that share…

    EN2026-07-18

  12. 12

    new Promise(async ...), 내 에러 어디 갔니? (부제: 스택트레이스는 죄가 없습니다)

    요즘 공부한다는 핑계로 남의 오픈소스를 뜯어보는 취미가 생겼습니다. 이번에 뜯은 건 ethora-chat-component-rn이라는 리액트네이티브 채팅 라이브러리였어요. XMPP 실시간 연결을 실제 프로덕트 코드가 어떻게 굴리는지 보고 싶었거든요. (제 프로젝트는 아닙니다. 저는 그냥 남의 집 구경 온 사람이에요.) 그런데 CHANGELOG를 읽다가 흥미로운 사냥 기록을 발견했습니다. 26.5.8 릴리즈에서 src/ 전체에 promise 위생 점검을 돌렸는데, 오래 묵은 id:0/id:2 레드스크린 — 재연결 이후에만 간헐적으로 뜨던 그 유령 — 의 유력 용의자로…

    KO / EN2026-07-13