전체 글

💻 수강 전본격 취업 준비를 위해 나름대로 열심히 서류를 준비를 하고 야심차게 여러 곳 지원해봤지만, 넣는 족족 서류탈락을 했었다. 꽤나 큰 충격과 좌절감을 맛보고 뭘 더 준비해야 할 지 갈피를 잡지 못하는 상황 속에서 취업 리부트 코스를 알게 됐다. 이력서,면접 코칭부터 개인 프로젝트 진행까지 체계적으로 보이는 커리큘럼이 마음에 들었고, 취업 전까지는 비용을 받지 않겠다는 부분에서 항해99의 자신감이 느껴져 신뢰가 갔다. 그래서 신청하고 간단한 전화 면접을 거친 후 취업 리부트 코스에 합류-! 💻 수강 과정프로그램의 모든 기본적인 진행은 게더 내부에서 팀 단위로 이루어졌다. 주차마다 새롭게 팀이 변경되었고, 처음에는 어색했지만 코스가 끝날 때쯤엔 많은 사람들과 꽤 친해질 수 있었다~~맨날맨날 게더에..

폼 데이터를 관리하다가 제어 컴포넌트와 비제어 컴포넌트에 대해 공부해보게되었다.📌 제어 컴포넌트와 비제어 컴포넌트제어 컴포넌트리액트 상태에 의해 값이 제어되는 컴포넌트이다. 사용자 입력값으로 자신의 상태를 관리하고 업데이트하고, 상태가 업데이트 될 때마다 컴포넌트는 리렌더링된다.폼 데이터가 상태에 저장되어 있어 데이터의 흐름이 명확하고, 로직 구현도 수월하지만, 빈번한 리렌더링으로 인해 불필요한 api 호출 등 자원 낭비가 발생할 수 있다.import React, { useState } from 'react';function ControlledComponent() { const [inputValue, setInputValue] = useState(''); const handleChange = (ev..

🚨 고민 발생판매 상품 등록 시 이미지가 필수로 등록되어야 한다. 등록된 이미지는 firebase storage에 저장되고 storage url을 통해 이미지를 불러오게 된다. 전체 상품을 조회하는 페이지에서 다량의 상품 이미지를 불러오는데 이때 소요되는 로딩 시간이 너무 길어 사용자 경험이 떨어지는 문제가 발생한다. 📍 고민 해결 방법크기가 작은 썸네일용 이미지를 만들자!긴 로딩시간의 원인이 불필요하게 큰 이미지 크기라고 생각했고, 전체 상품 조회 페이지에서 보여질 크기가 작은 썸네일을 별도로 저장하는 방법을 선택했다.  📍 이미지 최적화 과정이미지 크기를 줄이기 위해서 두 가지 방법을 쓸 수 있었다.1. 이미지 크기 압축2. 이미지 포맷 변환 썸네일 크기에 맞는 수치로 이미지 크기를 압축하고, ..

📍 기존의 에러핸들링매번 try-catch로 api 통신 에러만 잡아냈을 뿐 에러처리에 대한 진지한 고민을 해본 경험이 없었다. 에러의 종류를 알고 커스텀 에러를 정의해 전역적인 에러 처리를 하고 싶다는 생각이 들었다. 📍 에러 핸들링 방법 선택에러 핸들링 방법은 여러가지가 있다 1. try-catch문- 특정 동작이나 함수 호출에 대한 에러 처리 2. promise catch문- 네트워크 요청 등의 비동기 코드에서 발생한 에러 처리 3. axios interceptor- 네트워크 에러 처리- axios 라이브러리 제공 기능 4. react-query onError- 데이터 fetching 중 발생한 에러 처리- react query 라이브러리 제공 기능 5. error boundary- 하위 컴포넌..

📌 문제상황 - 사용자 경험 향상을 위해 상품 상세 페이지 로딩 시간을 줄이고자 상품 데이터 prefetch 도입- 전체 상품 조회 페이지에서 상품 썸네일 이미지에 hover 했을 때 상품 데이터 prefetch 하도록 설계- 마우스 움직임에 따라 불필요한 네트워크 요청 다량 발생  📌 원인 분석 const { handlePrefetchProduct } = usePrefetchProduct({ productId: data.id }); // prefetch 커스텀훅 const handleMouseEnter = () => { handlePrefetchProduct(); }; ;- 마우스가 잠깐이라도 스쳐지나간 경우 (ex 스크롤 시) 스쳐간 모든 상품에 대한 데이터 prefetch 동작 ..

📌 개선 전 SEOSPA는 하나의 웹 페이지에서 동적으로 컨텐츠를 업데이트 된다.이때 컨텐츠는 클라이언트에서 렌더링 되기 때문에 크롤러가 컨텐츠를 제대로 인식하지 못해 SEO 문제가 발생한다.next.js 프레임워크로 SSR을 사용하여 개선할 수 있지만, 이번 프로젝트는 next를 사용하는 프로젝트가 아닌 관계로 별도의 세팅으로 SEO를 개선해볼 생각이다.  📌 개선 방법1 ) robots.txt과 sitemap.xml 생성검색엔진 크롤러가 사이트 구조를 이해하고 정확하게 인덱싱 할 수 있도록 하기 위해 robots.txt와 sitemap.xml 파일을 생성해야한다. robots.txt - 검색 엔진 크롤러에게 크롤링 할 수 있는 페이지에 대해 알려준다.- 개인 정보가 포함된 페이지는 크롤링 하지 않..

📍 개선 전 퍼포먼스 점수 내 프로젝트 랜딩페이지의 초기 Lighthouse 점수는 73점이었다. 만족스럽지 못한 점수로 최적화를 진행하기로 했다. 📍 성능저하 원인 분석 Lighthouse 퍼포먼스 지표에 대해 알아보았다.TTI - 사용자가 처음으로 이벤트를 발생시킬 수 있기까지 걸리는 시간FCP - 브라우저에 첫번째 컨텐츠가 로딩되는 시간SI - 컨텐츠가 얼마나 빠르게 로딩 되는 지LCP - 가장 큰 컨텐츠가 로딩되는 시간TBT - 로딩 중 중간중간 Block이 발생한 시간 그리고 지표를 기반으로 점수를 분석해보았고, 크게 두 가지 원인으로 성능이 저하된 거라 판단하였다.1) 가장 큰 컨텐츠인 배너 이미지의 로딩 시간이 길다2) 렌더링 차단 요소가 차지하는 시간이 길다 배너이미지 로딩시간 단축과 ..

🚨 고민 발생해당 컴포넌트는 공통 컴포넌트로 만들어져있다.여러 곳에서 사용되기 때문에 공통 컴포넌트로 분리했던 건데,, 문제가 생겼다.사용처마다 스타일이나 요소 배치 등의 컴포넌트 요구사항이 조금씩 다르는 것이다. 결국 여러 조건을 걸 수밖에 없었고 아래와 같이 꽤 복잡한 공통 컴포넌트가 만들어졌다.const ProductBoardItem = forwardRef( ( { item, children, checkHandler, checkedItems, selectedCnt, isCart }, ref ) => { return ( { checkHandler( checked as boolean, sel..

📌 문제상황// 실제 코드는 부가적인 기능으로 코드가 복잡하여 최대한 간소화한 코드를 예시로 사용했다 {[1, 2, 3].map((_) => ( 이름 가격 ))};- Grid 배치로 크기를 자동으로 설정한 grid 아이템 이미지의 로딩 전후로 리플로우 발생 이슈 발견- w-full 과 aspect-square로 높이와 너비 비율을 설정했다고 생각했기 때문에 리플로우 없이 로딩 될 것이라 생각했지만, 예상과는 다른 동작 결과를 보임  📌 원인 분석=>  aspect ratio을 1:1로 세팅해둔 것이 높이를 설정한 것이라 생각한 게 문제 - 높이가 명시적으로 정해진 것이 아니기 때문에 브라우저는 이미지를 로드하기 전까지 높이를 정확하게 알 수 없음. 즉, ..

📍 문제상황장바구니 아이템을 선택한 후 결제까지 완료하면 선택했던 아이템들은 장바구니에서 삭제가 되는 것이 정상 동작이다. 그런데 내 프로젝트에서는 아이템들이 삭제되었다가 장바구니를 다시 열면 재생성되어있는 이슈가 발생했다.삭제된 아이템이 개수가 0인 상태로 재생성되어 있었던 것.. 뭐야 무서워.. 📍 원인 분석콘솔을 통해 이전 장바구니 스토어 아이템 id에 해당하는 상품 데이터(=products)가 남아있는 것이 문제인 것을 찾아냈다.결제 이후 로직은 대충 다음과 같다.1) 결제 성공2) zustand 장바구니 스토어 아이템 삭제3) 장바구니 스토어 아이템 id에 해당하는 상품 데이터(=products) fetch 쿼리 캐싱 무효화 지난 products가 렌더링되는 근본적인 이유는 캐싱 무효화가 동..