프론트엔드 개발을 할 때 우리는 많은 라이브러리를 사용하게 됩니다. 저 같은 경우는 요즘 Axios와 React-Query는 거의 항상 사용하는 것 같아요. React는 기본..! 그러다 최근 이런 생각이 들었습니다. "이런 라이브러리들의 새 버전을 프로젝트에 적용하게 되면 어떻게 될까?" 특수한 경우에는 해당 라이브러리에 의존하는 많은 부분의 코드를 변경해야 할 수도 있지 않을까요? 물론, 외부 요소에 하나도 의존을 하지 않고 애플리케이션을 만들 수는 없습니다. 예를 들어 브라우저에서 제공하는 기능을 이용해야 한다는 사실은 무시할 수 없으니까요. 하지만 외부 요소에 직접적으로 의존하는 코드를 최소화하고, 전체적인 제어권을 우리의 애플리케이션 안으로 가져올 수는 있습니다. Axios, React-Quer..
You'll Never Walk Alone.
테크
오랜만에 글을 쓰네요. 요근래 취업 준비, 기존 프로젝트 리팩토링 등을 수행하며 글 쓰기를 자꾸 미뤘던 것 같아요. 이번 글에서는 가장 최근에 작성한 프로젝트 회고 글에서 언급했던, 현재 운영 중인 웹 사이트의 느린 서버 사이드 렌더링 속도 문제를 개선한 경험에 대해 공유해보려 합니다. 체감되는 느린 서버 사이드 렌더링 제가 만들었음에도 너무 느려 보였습니다. 특히 맨 처음 웹 사이트에 접속하게 되면, 서버리스 애플리케이션 특성 상 발생하게 되는 콜드 스타트(Cold Start) 문제로 인하여 더욱 느려 좋지 않은 사용자 경험을 유발합니다. 콜드 스타트가 뭐냐구요? 아래 ChatGPT 답변을 참고해주세요 😅 이러한 콜드 스타트에 느린 서버 사이드 렌더링 속도(분석 결과 약 1.33초)까지 더해진 상태가 ..
'세 줄 독후감' 웹사이트를 운영하며, 최근 사용자들에게 한 오류를 제보 받았습니다. 아래 독후감 평점 입력 기능이 동작하지 않는다는 것이었습니다. 근본적인 원인을 찾아보자 먼저 데스크톱 환경에서 평점 기능을 사용해보자 별 이상 없이 동작했습니다. "왜 안된다는 거지..?" 당황했지만.. 무려 2명의 사용자가 동일한 오류를 제보해주셨기에, 틀림없이 문제가 존재한다고 판단했습니다. 하지만 계속해서 여러 방식으로 평점 기능을 요리조리 사용해보아도 별 문제가 없었습니다..😨 그러다! 모바일 환경에서 테스트를 해보자 곧바로 오류를 발견할 수 있었습니다. 오류의 한 예시는 다음과 같습니다. 1. 3으로 초기화된 평점 5을 터치 2. 별점 다섯 칸 활성화 3. 평점 제외 다른 영역 터치 4. 별점 세 칸 활성화 원..
최근 개발 프로젝트 하나를 마쳤습니다. (https://www.sejulbook.com 많이 방문해주세요 😁) 해당 프로젝트에서 처음으로 아토믹 디자인 시스템을 도입해봤습니다. 디자인 시스템을 컴포넌트로 파편화하여 쉽게 재사용하고 확장하고 싶었기 때문입니다. 하지만 아토믹 디자인 시스템은 제가 느끼기에 꽤 모호했어요. 그리고 NextJS에서 아토믹 디자인을 사용하면서 하나의 문제가 발생하기도 했구요. 그래서 아토믹 디자인 시스템을 잘써보기 위해 제가 이행했던 것들을 공유해보겠습니다. 아토믹 디자인? 아토믹 디자인(Atomic Design)은 화학적 관점에서 영감을 얻은 디자인 시스템입니다. 모든 것은 원자(Atom)으로 이루어져 있으며, 원자들이 결합하여 분자(Molecule)이 되고, 분자가 더 복잡한..
최근 프로젝트를 하며 사용자가 업로드한 이미지를 저장하기 위해 AWS S3 클라우드 스토리지를 사용했습니다. 프리티어를 이용했기에 제한된 용량을 효율적으로 사용하고 싶었고, 이에 따라 스토리지 내 불필요한 이미지는 저장되지 않도록 노력했습니다. 이번 글에서는 가비지 컬렉션 Hook 구현으로 AWS S3 사용 용량을 감축한 오버엔지니어링 경험을 공유합니다. 문제 아래 이미지는 현재 제가 개발한 독후감 작성 페이지입니다. '[선택] 추가 내용 작성' 부문에 사용자는 독후감 관련 내용을 작성할 수 있고 로컬 이미지를 업로드할 수 있습니다. 마치 블로그 글 작성과 같이 말이죠. 사용자가 로컬 이미지를 업로드하면, 즉시 AWS S3에 업로드하고 해당 URL을 반환받아 img 태그의 src 속성에 삽입합니다. 이때..
최근 웹 개발 프로젝트 하나를 마쳤습니다 🙌 (Fitory GitHub 바로가기) 짧은 시간 동안 최선을 다한 만큼 완결성 높은 결과물이 나온 것 같아 만족스럽습니다. 해당 프로젝트에서 본인은 프론트엔드 개발을 담당하여 수행했으며, 그 과정에서 프론트엔드 성능을 개선한 경험을 공유해보려 합니다. 성능 개선 경험들 중 이번 글에서는 번들 최적화에 대해서 다루겠습니다. 문제 발생 모바일 기기 환경의 Lighthouse를 찍어봤습니다. 성능 측정 항목 대부분의 시간이 오래 걸리는 것이 보이네요.. 해당 결과를 확인 후, 사용자가 빠르게 콘텐츠를 인식할 수 있도록 성능 개선의 필요성을 느끼게 되었습니다. 또 이러한 지표를 보고 성격 상 절대 그냥 지나칠 수 없습니다..😅 그래서 우선적으로 한 것은 바로 Bund..
이번 글에서는 Canvas를 사용하여 캐릭터 이동을 구현한 경험을 공유해보려 합니다. 그저 이동 뿐 아니라, 캐릭터가 마치 걷는 듯한 애니메이션을 표현했습니다. (제일 어려웠어요..) Canvas? Canvas API는 JavaScript 및 HTML 요소를 통해 그래픽을 그리는 수단을 제공합니다. 애니메이션, 게임 그래픽, 데이터 시각화, 사진 조작 및 실시간 비디오 처리에 사용할 수 있습니다. → 캐릭터 이동을 위해 동적 그래픽 조작이 필요하기 때문에 Canvas API를 사용합니다! useCanvas Hook 구현 먼저 canvas를 조작할 수 있는 환경을 마련합니다. // useCanvas.ts import { useRef, useEffect } from "react"; const useCanva..
최근 React에서 Socket.IO를 사용해 보았습니다. Socket.IO를 통한 실시간 통신을 구현해보며 Custom Hook을 이용하면 더 편리한 개발이 가능할 것이라 생각했습니다. 이에 대한 구현기를 공유해보려 합니다. Socket.IO? - HTTP의 한계 HTTP는 요청한대로 응답을 보내주기만 하는 단순한 프로토콜입니다. 이처럼 요청에 대해서만 응답을 보낼 수 있는 HTTP의 특징으로 채팅, 게임 등의 실시간 통신에 매우 비효율적이었습니다. 예를 들어, 채팅 서비스에서 계속 메시지를 받기만 하는 상황은 구현하기 힘들었습니다. 또한 HTTP는 매 요청과 응답마다 connection과 disconnection의 과정을 반복해야 하기에, 유사한 통신을 반복해야 한다는 문제가 있었습니다. - WebS..
안녕하세요 동쪽별입니다. 최근에 바닐라 자바스크립트로 SPA(Single Page Application)를 개발해보았습니다. 이와 관련하여 SPA 개발을 위한 컴포넌트를 구현한 경험에 대해 공유해보려 합니다. 컴포넌트? 컴포넌트는 리액트로 만들어진 앱을 이루는 가장 최소한의 단위로, 리액트(React)에서 가장 중요한 구성요소입니다. 그래서 컴포넌트가 정확히 무엇일까요? 실제 리액트 공식 문서의 Components and Props 부문을 보면 아래 문장이 명시되어 있습니다. Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements d..
안녕하세요. 동쪽별입니다. 이번 글에서는 바닐라 자바스크립트로 모달을 직접 구현해본 경험을 공유하고자 합니다. 위 이미지와 같이 날짜 입력 아이템을 클릭시 캘린더 모달이 렌더링 되도록 구현했습니다. 모달은 position: absolute 스타일을 적용하여 쉽게 퍼블리싱할 수 있습니다. 그런다음 클릭 이벤트 발생시 모달 Element를 DOM에 추가하거나, display: none 이었던 모달 Element 스타일을 display: flex 로 변경하는 등의 방식으로 렌더링할 수 있겠죠. 문제는 모달 외 영역 클릭시 해당 모달을 제거하는 동작을 구현하는 것이었습니다. 또한, 모달 제거와 동시에 날짜 입력 아이템의 포커싱 또한 비활성화해야 했습니다. 첫번째 방법 : 상위 Element 에서 이벤트 전파 해..
