전체 글 (67) 썸네일형 리스트형 [AI] OpenRouter LLM 비교 실험 및 모델 선택 기준 개요프로젝트에 OpenRouter를 도입하면서, 수많은 AI 모델을 단일 API 로 사용할 수 있었음에도,단순 모델 간 비교가 귀찮아서, 그냥 AI가 추천해준 모델 ( gemini-2.5-flash, gpt-4o)을 기본값으로 깔아두고 쓰고 있었다.당장 문제가 생기는 건 아니었지만, 모델 선택의 근거가 없었다는 점이 계속 마음에 걸렸다.이미 그 프로젝트에서는 AI가 처리하고 있는 기능이 두 가지 있었다.하나는 문제 URL만 붙여넣으면 제목과 힌트, 알고리즘 태그를 자동으로 채워주는 가벼운 작업이었고,다른 하나는 제출된 코드를 읽고 버그를 짚어주는, 훨씬 무겁고 품질이 중요한 작업이었다.두 작업은 AI 모델에게 기대하는 게 달랐다.가벼운 작업은 정확도만 일정 수준 넘으면 싸고 빠른 모델이 유리했고, 무거운.. [AI] Gemini API vs OpenRouter 비교 실험 개요AI를 활용한 사이드 프로젝트를 만들 때, 쉽고 무료이면서도 토큰을 넉넉하게 지원하는 Gemini API를 주로 사용해왔다.그런데 어느 순간부터 잘 동작하던 서비스가 자꾸 429 에러를 내기 시작했다. 새로 만든 프로젝트에서도 같은 현상이 반복됐다. 원인을 찾아보니 2025년 12월,Google이 사전 공지 없이 Gemini API 무료 티어의 Rate Limit을 대폭 축소한 탓이었다.그 사이 무료 티어 제약이 그렇게 세진 줄도 모르고 계속 방치했었다.Yes, we turned down the 2.5 Pro free limits which were originally only supposed to be available for a single weekend. We have a huge amount .. [Network] Cookie 옵션 (HttpOnly, Secure, SameSite) - 실습으로 이해하기 개요이전 포스트에서 Cookie 에 sessionId 를 담아 사용자를 식별하는 흐름을 살펴보았다.하지만 Cookie 자체가 안전하게 다뤄지지 않으면, sessionId 를 아무리 잘 만들어도 의미가 없을 것이다. Cookie 에는 어떤 경로로 접근할 수 있는지, 어떤 상황에서 전송되는지를 제한하는 옵션들이 있다.간단한 실습 프로젝트를 활용하여 HttpOnly, Secure, SameSite 세 가지 옵션이왜 필요하고, 실제로 어떻게 동작하는지 하나씩 확인해보고자 한다.실습 환경두 개의 서버를 사용한다.역할주소설명bank.comhttps://localhost:3100로그인, 송금, 게시판 기능이 있는 정상 서비스evil.comhttp://localhost:3101탈취한 Cookie 로 공격을 수행하는 악.. [Network] Cookie 와 Session 개요웹 개발을 하면서 Cookie 와 Session 이라는 개념을 자주 마주했지만,막상 설명하려 하면 명확하게 정리되어 있지 않다는 느낌이 들었다.이 글에서는 두 개념을 복습하고 정리해보고자 한다.HTTP 는 StatelessCookie 와 Session 을 이해하기 전에 먼저 HTTP 의 특성을 알아볼 필요가 있다.RFC 9110 에서는 HTTP 를 다음과 같이 정의한다.RFC (Request for Comments): 인터넷 표준을 정의하는 공식 문서"The Hypertext Transfer Protocol (HTTP) is a stateless application-level protocol for distributed, collaborative, hypertext information system.. [Web] Observer 패턴과 Store - 직접 구현하며 이해한 상태 관리 Vanilla JS 환경에서 외부 프레임워크 없이 상태 관리를 직접 구현해보면서, Observer 패턴과 Store 구조를 먼저 접하게 되었다.이 글은 그 경험 기반으로, React 의 Context API 를 거쳐 Zustand 와 같은 전역 상태 관리 방식까지상태의 공유 범위와 구독 방식이 어떻게 확장되어 가는지를 구조적인 흐름으로 정리한 문서이다.특정 도구를 우열로 비교하기보다는, 각 단계에서 어떤 문제를 해결하려 했는지와그 과정에서 상태의 공유 범위와 구독 방식이 어떻게 달라졌는지를 회고하며 정리해보고자 한다.Observer 패턴상태 관리를 공부하면서 가장 먼저 만나게 된 개념이 Observer 패턴이었다.const subject = { observers: [], subscribe(fn) { .. [Web] React 의 useState 와 useReducer 이 글에서는 React 에서 컴포넌트 내부의 상태를 관리하는 두 가지 훅, useState 와 useReducer 의 동작 방식과 차이를 정리한다.useStateReact 에서는 보통 useState 라는 훅을 사용해 상태를 관리한다.function Dropdown({ text }) { const items = ["item-1", "item-2", "item-3"]; const [state, setState] = useState({ isOpen: false, selectedIndex: -1 }); const className = "dropdown"; const handleClick = () => setState((prev) => ({ ...prev, isOpen: !prev.isOpen })); .. [Web] 여러 방식으로 DOM 조작하기 - createElement 에서 JSX 까지 이 글은 순수 Vanilla JS 만으로 DOM 을 직접 다뤄야 했던 경험에서 시작해, 이후 React의 JSX 구조를 이해하게 되기까지의 학습 흐름을 정리한 기록이다.직접 DOM 을 조립하며 느꼈던 불편함과 시행착오, 그리고 그 과정에서 선언적인 UI 방식으로 사고가 어떻게 확장되었는지를 시간의 흐름에 따라 작성했다.따라서 특정 기술을 소개하거나 정답을 제시하려는 목적이라기보다, createElement 중심의 명령형 코드 에서 시작해 선언적 UI 방식 에 도달하기까지의 고민 과정을 순서대로 담은 글임을 먼저 알린다.JS 기본 DOM APIdocument.createElement()React 없이 순수 Vanilla JS 로 FE 개발을 할 때, 이런 코드를 작성했었다.const header = doc.. [Web] CSR (Client-Side Rendering) 클라이언트 사이드 렌더링 (CSR)1. 개요이 문서는 CSR(Client-Side Rendering) 렌더링 방식을 학습한 내용을 바탕으로,해당 개념과 내용을 정리하고 복습하기 위한 목적으로 작성되었다.2. SSR 방식의 한계전통적인 SSR(Server-Side Rendering) 은 서버에서 완성된 HTML 을 생성하여 브라우저로 전송하는 방식이었기 때문에 빠른 초기 로딩과 SEO에 유리했지만, 웹 애플리케이션이 복잡해지고 사용자 경험에 대한 요구가 높아지면서 다음과 같은 한계점들이 드러났다.SSR 의 한계모든 사용자 행동마다 전체 페이지 새로고침: 링크 클릭, 폼 제출 등 페이지 전환이 있을 때마다 서버에서 새로운 HTML 을 만들어야 함서버 부하 증가: 매 요청마다 서버가 HTML 생성을 담당해 트.. 이전 1 2 3 4 ··· 9 다음
