![]()
💻 수강 전본격 취업 준비를 위해 나름대로 열심히 서류를 준비를 하고 야심차게 여러 곳 지원해봤지만, 넣는 족족 서류탈락을 했었다. 꽤나 큰 충격과 좌절감을 맛보고 뭘 더 준비해야 할 지 갈피를 잡지 못하는 상황 속에서 취업 리부트 코스를 알게 됐다. 이력서,면접 코칭부터 개인 프로젝트 진행까지 체계적으로 보이는 커리큘럼이 마음에 들었고, 취업 전까지는 비용을 받지 않겠다는 부분에서 항해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가 렌더링되는 근본적인 이유는 캐싱 무효화가 동..
![]()
언제 어떤 메서드를 사용하는 것이 좋을 지 궁금해서 적어보는 글 📌 공통점refetch와 invalidateQueries 둘 다 리액트 쿼리의 캐시된 데이터를 무효화 시키는 메서드이다. 📌 차이점사용 목적은 같지만 메서드별로 동작과 사용시기가 다르다.refetch- 쿼리를 새로고침하여 바로 데이터를 다시 fetch 한다. - 바로 fetch한 결과를 바로 볼 수 있다는 것이 장점이다.- 사용 예시) 새로고침 버튼을 눌러 최신 데이터를 수동으로 가져올 때 invalidateQueries- 쿼리의 캐시를 무효화하여 stale한 상태로 만든다.- 1) 컴포넌트가 다시 마운트되거나2) 사용자가 포커스를 변경하거나3) 네트워크가 다시 연결되거나4) 자동 리페치 간격이 설정되어 있는 경우간격에 따라서 다시 fe..
![]()
🔎 비동기적으로 동작하는 setStatesetState로 상태 업데이트 후 예상처럼 값이 나오지 않는 경험을 여러번 했었다. 이유를 찾아보니 호출한 직후 상태가 바로 업데이트 되지 않을 수 있어 상태 업데이트 후 바로 상태값을 확인할 때 예상한 값이 나오지 않을 수 있다는 것이었다. 아래와 같은 방법을 통해 이 문제를 해결했었다.1) useEffect 훅을 사용하여 상태 변경 후에 다음 로직을 실행하도록 설계한다.useEffect(() => { console.log(value); }, [value])2) 이전 상태에 의존할 경우 함수형 업데이트를 통하여 처리한다. const increment = () => { setCount(prevCount => prevCount + 1);}; 🔎 비동기..
![]()
책을 선택하게 된 계기프론트엔드의 기본이 되는 js의 지식의 깊이가 너무 얕다고 느꼈다. 어렴풋이 알고 있는 클로저, this 등.. 기초를 단단히 다지는 게 시급했고, 이 책을 발견하게 되었다.두껍지 않은 두께와 핵심 개념을 모두 포함한 알찬 책이라는 생각이 들어 고민없이 선택했다. 결론 : 너무 만족 ⭐⭐⭐너무 만족스럽게 마지막 페이지를 닫았다. 그동안 구글링을 전전하며 js 관련 개념을 조각조각 이어붙이면서 가장 답답했던 것은 개념들이 서로 어떻게 연결되어 있는 지를 이해하기가 어렵다는 것이었다.이 책은 개념의 개연성이 잘 나타나 있어서 앞서 배운 개념을 뒤에서 활용하여 설명하며 각 개념들이 어떻게 연결되고 작용하는 지를 체계적으로 설명해주었다. 이 부분에서 개념의 이해도가 전체적으로 높아진 느낌..
![]()
코딩테스트 문제를 풀다가 시간 초과 실패를 겪어본 적 누구나 있지 않은가? 일단 나는 굉장히 많다...ㅜ 그래서 조금이라도 시간 복잡도를 줄이는 것에 늘 생각하고 고민해보려 한다.아예 접근 방식을 다르게 하는 것이 시간 복잡도 측면에서 가장 효율적이었던 경험이 많지만 같은 로직에서 간단한 조작 하나만으로 복잡도를 줄일 수 있는 방법이 있다. 바로 배열에 접근할 때 인덱스로 접근하는 것이다. 배열을 다룰 때 원본 배열을 그대로 둔 채 인덱스로만 값을 조종하는 방법은 상황에 따라 실행시간을 줄이는데 소소한 도움이 된다. 👁🗨 배열에 인덱스로 접근하는 예시예시 1) 배열의 마지막 요소를 반복적 제거하는 과정순서대로 pop 메서드를 사용하는 경우와 인덱스 값을 1씩 줄이는 방법을 사용하는 경우의 예시이다...
![]()
검색어 입력 중 검색창 외부를 클릭하면 연관 검색어 창이 닫히도록 구현해야 할 일이 생겼다 비슷한 경험으로 과거 모달을 띄우고 모달 외부를 클릭하면 모달이 닫히도록 구현한 적이 있는데, 그때는 어두운 불투명 오버레이 컴포넌트를 깔고 오버레이 컴포넌트에 onClick 이벤트 핸들러를 할당하여 클릭 이벤트가 발생하면 모달을 닫히는 동작으로 간단하게 구현할 수 있었다. 이번에도 동일한 방법으로 투명 오버레이를 깔아 구현해볼까 생각했으나 연관 검색어 창이 활성화 된 상태에서도 지도 확대 축소나 스크롤 등의 이벤트는 정상 동작 해야했기 때문에 불가능하다고 판단하였다. 💭 생각한 두가지 방법 그래서 생각해본 두가지 방법..! 우선 연관 검색어 창이 열려있는 지 닫혀있는지를 boolean으로 나타내는 state값을 ..
