프론트엔드 개발을 하다 보면 백엔드 API 스펙을 기반으로 타입을 만들고, axios 클라이언트를 작성하고, 때로는 react-query까지 붙이고 싶을 때가 있다.이걸 손으로 하다 보면 중복 코드도 많고, 유지보수도 어렵다. 그래서 나온 게 OpenAPI 기반 코드 생성기들이다.하지만 도구가 너무 많다. 어떤 건 타입만 되고, 어떤 건 Java 기반이고, 어떤 건 클라이언트는 만들지만 커스터마이징이 안 된다.그래서 실전에서 자주 쓰이는 주요 도구들을 비교하고, 어떤 선택이 가장 실용적인지 정리했다.📊 도구 기능 비교 도구 타입 생성 클래스 생성 클라이언트 생성 React Query 기반 비고 ope..
인간 인지와 반응의 경계선을 바탕으로 체계적인 타이밍 설계하기프론트엔드 개발자로서 UI 인터랙션 설계 시 은근히 고민되는 결정 중 하나는 적절한 타이밍 설정이다. 우리는 흔히 이런 질문을 던진다: "이 애니메이션은 100ms면 충분할까? 200ms가 더 자연스러울까? 아니면 300ms?“ 이러한 고민은 단순한 취향의 문제가 아니다. 인간의 인지 체계와 뇌의 정보 처리 방식에 깊이 연관된 과학적 근거가 있다. setTimeout, debounce, throttle, transition 모두 동일하다. 이 글에서는 인간의 시각 및 청각 처리 능력에 기반한 네 가지 타이밍 기준(100ms, 200ms, 300ms, 500ms 이상)을 제시하고, 각 값의 인지적 차이를 영상의 FPS(Frames Per Seco..
Form을 작성하면서, FormData와 서버 도메인 객체를 분리하는 것은 매우 중요합니다. 누구에게는 당연한 이야기이지만, 개발을 하면서 Domain Object를 그대로 사용하여 Form 안정성 및 확장성을 저해하는 경우를 종종 접해서 이 글을 작성합니다. 이번 글에서는 FormData와 서버 도메인 객체를 분리해야 하는 이유와 그로 인해 얻을 수 있는 다양한 장점을 설명하겠습니다. 1. 서버 도메인 객체란?서버 도메인 객체(Server Domain Object)는 서버와 클라이언트 간에 주고받는 데이터 구조입니다. 보통 서버에서 정의된 데이터 모델을 따르며, 데이터베이스와 직접 상호작용하는 객체입니다. // 서버 도메인 객체 예시 interface User { id: number; name: str..
[Note_Info_3-3] 네트워크 요청 11장 - 웹소켓
1. 웹소켓? 웹소켓: RFC 6455 명세서에 정의된 프로토콜. 서버와 브라우저 간의 연결을 유지한채로 통신하는 양방향 프로토콜이다. 채팅, 온라인게임, hts등 에서 활용된다. let socket = new WebSocket("ws://javascript.info"); 로 간단하게 생성 가능하다. - 4가지 주요 이벤트: open(커넥션 생성 완료), message(메시지 수신), error, close ** socket.onopen = () => {}; 과 같이 socket 객체 on~프로퍼티에 각 이벤트의 핸들러를 달 수 있다. - 2가지 주요 메서드: socket.send(data), socket.close(); 2. 웹소켓 핸드셰이크 - socket 객체를 생성하는 것만으로도 즉시 연결이 시작..