대부분의 API 요청 및 응답은 JSON 형태로 사용하게 됩니다. 그런데 이미지 같은 파일형태를 업로드하기 위해서는 JSON의 사용이 어렵습니다. 이미지를 URL로 전달하거나 base64 등으로 텍스트 인코딩한게 아닌 이상 파일자체를 온전히 전달하기위해서는 다른 방법이 필요합니다. 일반적으로는 FormData 형식을 사용합니다. 이 방식은 텍스트 데이터와 파일 데이터를 한번에 전송할 수 있어 이미지, 동영상, 문서 등의 다양한 파일 업로드에 적합합니다. 브라우저에서 제공하는 FormData 객체를 통해 간편하게 구현이 가능합니다. JSON 기반 API 요청만 처리해오다가 파일을 업로드하는 과정은 처음 구현해 보았는데 기존 방식과의 차이점을 위주로 작성하겠습니다. 서버의 기능을 Route Handler로 ..

Firebase Authentication의 oAuth최근 개인프로젝트에서 firebase와 jwt를 활용해 oAuth 로그인을 구현했습니다. 서버와 DB, 프론트엔드쪽이 같이 만들어져야 완전한 구조가 구현되기때문에 백엔드, 프론트엔드의 역할을 구분하지 않고 동작방식을 이해하는데 집중하며 구현했습니다.기본적으로 양측이 하는일을 정리하면 아래와 같습니다.프론트엔드토큰 관리, 토큰을 통한 데이터 요청백엔드토큰 생성, 토큰 검증을 통한 데이터 처리 및 응답Google OAuth 로그인 구현 Google OAuth 로그인 구현어떤 사이트에서 회원가입이나 로그인을 하려고 할 때 SNS 로그인 버튼이 있는 것을 볼 수 있다. 이러한 로그인을 우리는 OAuth 로그인이라고 부른다.백엔드와 프론트엔드에서 이 로직을 어..

Next.js의 ISR이란?(Next.js 15.3.5 기준)웹페이지를 제작할때는 흔히 CSR(Client Side Rendering)과 SSR(Server Side Rendering)로 나누게됩니다. 쉽게말하면 페이지를 서버에서 생성하느냐 클라이언트에서 생성하느냐의 차이입니다. 추가로 SSG(Static Site Generation)는 데이터가 변하지 않는 페이지를 빌드 시점에 미리 만들어서 사용자 요청시 빠르게 제공할 수 있도록 하는 전략입니다. 여기에 추가로 Next.js는 ISR(Incremental Static Regeneration)을 사용할 수 있습니다. SSG 처럼 페이지를 정적으로 생성하여 사용하는 대신 특정 시점에 재생성하도록 합니다. 사용자가 자주 방문할 경우 너무 잦은 페이지 생성이..

울산 정보를 통합조회하는 개인 프로젝트에서 지난번 필터링 연산에 대해 최적화를 한번 진행했습니다. 2025.06.16 - [웹/React] - 웹워커를 활용한 대용량 데이터 필터링 및 input 입력 지연 최적화 웹워커를 활용한 대용량 데이터 필터링 및 input 입력 지연 최적화울산의 정보를 통합적으로 조회해볼수 있는 개인 프로젝트를 제작중에 성능저하 문제를 경험했습니다. 구현한 기능은 다음과 같습니다.사용자가 검색어를 입력검색어가 변경되면(사용자가 값cstelladev.tistory.com 병원 정보 검색페이지는 수백개 정도의 적지않은 데이터를 다루고 페이지에 표시해야합니다.검색 기능은 사용자가 큰 불편을 느끼지 않을정도로 성능이 개선되었으나 테마 변경 시점에 성능이 감소하는 문제도 발생했습니다. ..

울산의 정보를 통합적으로 조회해볼수 있는 개인 프로젝트를 제작중에 성능저하 문제를 경험했습니다. 구현한 기능은 다음과 같습니다.사용자가 검색어를 입력검색어가 변경되면(사용자가 값을 입력하면) 필터링 함수 실행기존 데이터에서 검색어를 이용해 필터링한 뒤 값을 표시이 과정에서 과도한 연산을 막기위해 debounce를 적용하고 useCallback, useMemo로 최적화를 진행했었습니다. 2024.10.31 - [웹/React] - 리액트의 메모이제이션 (useMemo, useCallback, React.memo) 리액트의 메모이제이션 (useMemo, useCallback, React.memo)리액트는 컴포넌트를 기반으로 동작한다. 컴포넌트는 props, state, context 등의 변경이 감지될때 변..

HTML의 시맨틱 태그는 구조화된 웹 문서를 만드는데 사용됩니다. 구조화된 웹 문서는 여러 장점을 가지고 있습니다. 유지보수와 SEO에 도움이 되며 렌더링에도 도움이 될 수 있고 접근성을 향상시키는데에도 필수적인 요소입니다. 특히 웹 접근성은 장애인 차별 금지법 등에 의해 엄격하게 관리될정도로 매우 중요한 부분입니다. 실제로 과거에 시각장애인이 비장애인과 동등한 서비스를 이용할 수 있는 방안을 마련하지 않은 웹사이트들이 손해배상 판결을 받은 사례도 있습니다. [판결] "'시각장애인 정보접근 차별' 온라인 대형 쇼핑몰, 10만원씩 배상" [판결] "'시각장애인 정보접근 차별' 온라인 대형 쇼핑몰, 10만원씩 배상"시각장애인들이 온라인 정보이용에서 차별을 받고 있다며 대형 온라인 쇼핑몰 운영사들을 상대로 낸..

이전에 도서 정보 홈페이지에서 책을 3D로 확인하고 회전해볼 수 있는 기능을 제공하기 위해 Three.js를 활용했었습니다. 2024.12.20 - [웹/JS] - three.js로 3D 책 구현하기 three.js로 3D 책 구현하기※ Next.js 14.2.18 버전의 App router와 three.js 0.171.0 버전 사용도서와 관련한 간단한 홈페이지를 구현하게되면 책을 3D로 둘러볼수 있는 기능을 넣어보고 싶었다. 자바스크립트에서는 간편하게 3D 개cstelladev.tistory.com Three.js는 requestAnimationFrame을 이용해 애니메이션 루프를 만들고 그 루프 안에서 WebGL을 통해 장면을 그려냅니다. 쉽게말해 일정 주기(예: 60 FPS 기준 초당 60번)로 화..

기존에 개인 프로젝트로 제작했던 영화 정보 제공 사이트는 React와 Next.js의 초기 학습단계에서 제작한 프로젝트라 완성도가 낮은편입니다. 당시에는 서버,클라이언트 측 컴포넌트의 동작방식도 제대로 알지 못했고 시맨틱태그, SEO, 그 외 사용자 경험에 영향을 주는 코어 웹 바이탈에 대해서도 잘 모르고 개발을 진행했었습니다. 이번에 간단한 리팩토링과 성능 개선을 진행하면서 코어 웹 바이탈을 참고해보았습니다.사용자가 가장 먼저 보게되는 메인 페이지를 기준으로 작업했고 그외 상세페이지도 일부 작업했지만 글에는 작성하지 않겠습니다. ● 개선 전후 측정 결과 비교 (Lighthouse) FCP : 0.7s » 0.3sLCP : 1.2s » 1.1sCLS : 0.108 » 0Performance : 93점 »..