전체 글 (44) 썸네일형 리스트형 이미지 최적화 전후 webp, sharp 해줬는데도 이미지 로딩 느려서sizes="33vw", sizes="22vw" 만 추가해줬다. 전부 상용 환경 [전] 전_캐시 비우기 및 강력 새로고침 뭐 안 건드렸는데 완료 시간이 갑자기 2.7분이 돼있누; 시간 측정이 계속 달라져 [후]엥 3분?ㅋ 더느려졌느데 [전] [후]흠... [전] [후] 근데 눈에 보이는 로딩 속도는 확실히 빨라졌음; Nextjs 이미지 최적화 카드리스트 이미지 용량이 큰데 기존 코드는 언옵티마이제이션 하고 있어서 이미지 로드 느린 이슈 next.config.ts이미지 형식 avif, webp 로 변경 캐시 비우기 및 강력새로고침 후 테스트 before [상용]png, jpeg after [로컬]avif 982kb 카드 썸네일 작기 때문에 퀄리티 낮춤기본 quality 75 → 60으로 약 20% 추가 용량 절감이 예상 캐시비우기 강력새로고침 후 ㅂㅣ포 앱터 속도 개선됐으나배포 후 캐싱 전에는 속도가 느린 이슈 1. avif 변환시 느리다길래 webp로 바꿈2. sharp 설치Next.js는 sharp를 내부 엔진처럼 사용개발자가 직접 import 안 해도 됨=> 설치만 함 개선 후.. SSR vs CSR SSR(서버 사이드 렌더링)정의: 서버에서 HTML을 미리 렌더링하여 클라이언트에게 전달하는 방식작동 원리: 클라이언트가 페이지를 요청하면 서버에서 전체 HTML 페이지를 생성하여 클라이언트에게 전송.이후 JavaScript를 로드하여 동적 기능을 활성화장점:빠른 첫 페이지 로딩: HTML이 미리 렌더링 되어 전달되므로, 사용자는 첫 화면을 빨리 볼 수 있음SEO 최적화: 검색엔진 크롤러가 렌더링된 HTML을 쉽게 읽어 SEO에 유리단점:서버 부하 증가: 모든 요청에 대해 서버에서 페이지를 렌더링해야 하므로 서버 부하가 클 수 있음CSR(클라이언트 사이드 렌더링)정의: 클라이언트에서 JavaScript가 HTML을 동적으로 렌더링하는 방식작동 원리: 서버는 빈 HTML 틀만 전달하고, 클라이언트에서 Ja.. React에서 커스텀 훅(Custom Hook)과 HOC(Higher-Order Component)의 개념과 활용 React를 실무에서 다루다 보면 공통 로직을 재사용해야 할 상황이 자주 발생한다.이때 대표적으로 사용하는 패턴이 Custom Hook과 HOC(Higher-Order Component)1. 커스텀 훅(Custom Hook)1.1 개념React의 커스텀 훅은 use로 시작하는 사용자 정의 훅 함수로,useState, useEffect, useMemo와 같은 기존 Hook의 로직을 조합해 새로운 기능을 만든다상태 관련 로직을 UI와 분리해 재사용 가능하게 만드는 것이 핵심 // 예: useFetch.jsimport { useState, useEffect } from "react";export function useFetch(url) { const [data, setData] = useState(null).. React Fiber React Fiber 아키텍처 완전 정리 1. 왜 Fiber가 등장했을까?리액트는 2013년에 처음 공개된 이후, Virtual DOM 기반의 효율적인 렌더링으로 큰 주목을 받았습니다. 하지만 앱이 점점 복잡해지고 UI 업데이트가 많아지면서 기존의 Stack Reconciler 구조에는 한계가 있었습니다.기존 방식의 문제점:렌더링 과정이 동기적(synchronous) 으로 동작한 번 렌더링이 시작되면 중단할 수 없음 → 긴 작업이 있으면 브라우저가 멈춘 듯 보임애니메이션, 입력 처리 같은 사용자 경험(UX) 저하이 문제를 해결하기 위해 React 팀은 Fiber 아키텍처를 새롭게 도입했습니다. (React 16부터 적용)2. Fiber란?리액트 컴포넌트 트리를 순회하고 업데이트하는 새로운 재조정(Reco.. React Suspense React SuspenseReact 18부터 본격적으로 도입된 Suspense는 비동기 렌더링을 보다 자연스럽게 처리할 수 있는 방법을 제공합니다.React Query 또한 suspense: true 옵션을 지원하면서, 데이터를 불러올 때 Suspense와의 통합이 가능해졌습니다.그런데...suspense: true를 설정했는데도 왜 fallback UI가 안 뜨는 걸까?이 글에서는 Suspense가 실제로 동작하는 조건과, 자주 하는 실수, 그리고 올바른 사용 예제를 공유합니다.1. Suspense란 무엇인가?React의 는 비동기 컴포넌트가 "데이터가 준비될 때까지 기다릴 수 있게 해주는" 기능입니다.쉽게 말해, 컴포넌트가 Promise를 throw하면, 그 promise가 해결될 때까지 fallba.. 멘토링 피드백 내용정리 1) 기존 상대경로를 절대경로로 변경tsconfig.json에 "baseUrl": "." 추가절대경로로 변경 2) 기존 탠스택쿼리 관련 파일 구조 변경구조는 이렇게 돼있음useBrands fetchBrands 쿼리키 파일로 별도 분리 3) axios interceptor에서 직접 Authorization 헤더를 설정기존에 토큰 직접 추가하는 로직 제거하고 axiosInstance에 토큰 로직 추가 4) 응답 타입이 optional로 리턴되고 있는데 응답 타입을 명확하게 정의 5) 쿼리스트링 구성시 URLSearchParams 사용자동으로 인코딩도 적용되고 파라미터 추가/삭제나 가독성 측면에서도 좋기 때문 6) number타입 보장 7) setLoading 위치 변경 멘토링 3일차 내용정리 일반적으로 사용하는 클래스 VS 자바스크립트에서의 클래스 차이자바스크립트는 문법적 설탕이라고해서 프로토타입 기반으로 상속을 구현하게 해줍니다.프로토타입 기반으로 상속을 좀 더 쉽게 구현할 수 있게 클래스를 도입한 걸로 알고있습니다. 클래스에서 Constructor의 역할초기상태를 선언하는 구간입니다. 클래스에서 Extends, super가 뭔가요?익스텐즈는 부모클래스를 받아서 확장시키는 거고, 수퍼는 부모의 메서드를 상속받아 사용하는 것입니다. 클래스 Staticstatic으로 선언된 메서드나 필드는 인스턴스가 아닌 클래스 자체에 귀속됩니다.class A { static hello() { return 'hi'; }}A.hello(); // OKnew A().hello(); // ❌ 오류 :content.. 이전 1 2 3 4 ··· 6 다음
