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

AI를 활용해 하드웨어, 백엔드, 데이터 등 낯선 분야를 빠르게 학습하며 다양한 자동화 시스템을 구축했지만, 정작 내 머릿속에 남는 경험치는 점점 줄어들고 있다는 사실을 깨달았습니다. AI가 제공하는 속도와 편리함을 누리면서도 진짜 실력을 쌓기 위해, 모르기 때문에 배우는 과정 자체를 기록하는 '몰라서 배웠습니다' 시리즈를 시작합니다.

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

구버전 브라우저에서 PDF 뷰어 문제가 계속 발생해서 S3 + Lambda를 활용해 PDF를 이미지로 자동 변환하는 서버사이드 솔루션으로 근본적으로 해결했고, 프론트엔드 개발자도 백엔드/인프라까지 알아야 진짜 문제 해결이 가능하다는 걸 깨달았다는 이야기

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

Modal과 Drawer 컴포넌트는 전통적으로 루트에 두고 전역 상태로 제어했지만, 스타일링 문제(z-index 등)가 있었습니다. React의 Portal을 활용하면 부모 DOM 계층을 벗어나 원하는 위치에 컴포넌트를 쉽게 렌더링할 수 있어 이런 문제를 해결할 수 있습니다. 실제 프로젝트에서 Portal을 이용해 Drawer를 구현하니 추가 CSS 없이도 원하는 UI를 손쉽게 만들 수 있습니다.

무한 스크롤은 사용자가 페이지를 내릴 때마다 자동으로 데이터를 추가로 불러와 보여주는 UX 방식이다.Intersection Observer와 React Query의 useInfiniteQuery 훅을 활용하면 효율적으로 무한 스크롤을 구현할 수 있다. 핵심은 관찰 대상이 뷰포트에 들어오면 다음 페이지 데이터를 불러오고, 마지막 데이터까지 자연스럽게 이어주는 것이다.

React에서 데이터 패칭과 상태 관리는 복잡해질 수 있는데, React Query를 사용하면 데이터 패칭, 캐싱, 동기화, 뮤테이션 등을 간편하게 처리할 수 있다. useQuery와 useMutation 훅을 활용하면 로딩, 에러, 최신 데이터 반영 등 다양한 요구사항을 쉽게 구현할 수 있으며, invalidateQueries, Optimistic Updates 등 고급 기능도 지원한다. 적절한 옵션 설정과 쿼리 키 관리로 효율적인 데이터 최신화와 캐싱이 가능해진다.

AWS S3는 대용량 데이터를 저장하는 객체 스토리지 서비스로, 버킷을 생성해 정적 웹사이트를 호스팅할 수 있다.CloudFront는 전 세계에 분산된 CDN 서비스로, S3와 연동해 정적 웹사이트의 콘텐츠를 빠르고 효율적으로 전달한다.S3 버킷 정책과 퍼블릭 엑세스 설정, CloudFront 배포 설정을 통해 웹사이트 성능과 접근성을 높일 수 있다.