안녕하세요, 이상혁입니다

AI 서비스를 사용하면서 실시간으로 답변이 생성되는 UX를 경험하게 되었고, 이를 구현하는 Stream 개념에 관심을 갖게 되었습니다. Stream은 거대한 데이터를 작은 청크로 쪼개어 연속적으로 전달하는 방식으로, 메모리 효율화와 응답 시간 단축의 이점을 제공합니다. Next.js 프로젝트에서 ReadableStream과 Fetch API를 활용해 직접 스트리밍 UI를 구현하고, 상태 업데이트 최적화와 불완전한 JSON 처리 같은 실무에서 고려해야 할 사항들을 정리했습니다.

React 기반으로 CSR을 사용하던 중 SEO와 초기 로딩 속도 등의 이유로 SSR, 특히 Next.js에 관심을 가지게 되었고, SSR은 서버에서 초기 HTML을 생성해 제공하는 반면 CSR은 브라우저에서 생성하는 방식으로 각각의 장단점이 존재한다. React로 직접 SSR을 구현해보니 생각보다 간단했지만, 실제 서비스 수준의 개발에는 Next.js가 제공하는 코드 스플리팅, 라우팅, 최적화 기능들이 필요하다는 점도 실감하게 되었다. 결국 기술 선택은 트렌드보다 프로젝트 요구사항과 팀의 상황에 맞춰 신중히 결정해야 한다는 결론에 도달했다.

이 글은 프론트엔드 공통 코드를 기존의 런타임 API 방식에서 빌드타임 코드 포함 방식으로 전환한 경험을 다룹니다. 빌드타임에 공통 코드를 객체로 변환해 타입 안정성과 자동완성을 높이고, 네트워크 의존성과 유지보수 부담을 크게 줄였습니다. 이로써 초기 화면 속도, 코드 관리 효율, 개발자 경험이 모두 개선되었습니다.