Front-End54 최적화 작업(삽질) (2/2) 나에겐 3번째 문제가 있었다."Properly size images" : 브라우저가 필요로 하는 크기보다 더 큰 이미지를 로드해서 성능이 떨어질 때 발생적절한 크기의 이미지를 요청하도록 설정해야 한다. 이 문제를 풀어야 하는데 전 글에서 말했듯 나는 S3 + CloudFront를 건드릴 수 없는 환경이다.포기할 순 없으니 CloudflareCDN을 사용하기로 했다. unplash라는 친구를 소개 하겠다.https://unsplash.com/ko 아름다운 무료 이미지 및 사진 | Unsplash어떤 프로젝트를 위해서든 다운로드 및 사용할 수 있는 아름다운 무료 이미지 및 사진입니다. 어떤 로열티 프리 또는 스톡 사진보다 좋습니다.unsplash.comUnsplash가 하는 역할:이미지를 저장, 최적화, 가.. 2025. 1. 13. 최적화 작업(삽질) (1/2) 일단 나는 프론트엔드 성능 최적화가이드라는 책을 먼저 읽고 해당 작업을 시작했다.(필요할 때마다 반복해서 읽을 것이다)14일 동안 고민한 거 같은데 당장 성능지표는 이렇다.왼쪽이 개발환경,오른쪽이 배포환경이다. 나름 나쁘지 않은 점수라고 생각하지만 나는 끝까지 올려보고 싶어 Perfomence에 대해 2주동안 고민 했다.문제는 LCP였다.**LCP (Largest Contentful Paint)**는 화면에서 가장 큰 콘텐츠가 렌더링되는 시점을 측정하는 지표로, 2.5초 이하가 "좋음" 기준이다. 개발 환경에서는 LCP가 더 낮게 측정되었다.(코드 압축,Tree-shaking,브라우저 캐싱 등이 이유다.) 이미지가 너무 크다. 이미지가 너무 커서 화면에 그리는데 느리다는 문제다.이것을 해결 해보기 위해.. 2025. 1. 13. Jest의 한계점과 Cypress(UI) 일단 테스트의 종류가 뭐가 있는지 알아보자. 유닛 테스트코드의 개별 단위가 올바른지 확인함수, 메서드, 컴포넌트가장 빠름Jest, Mocha 등통합 테스트여러 유닛의 결합이 잘 되는지 확인API, 모듈 간 연동중간Jest, Supertest 등E2E 테스트전체 애플리케이션 흐름이 문제없는지 확인사용자 관점, 전체 시스템가장 느림Cypress, Playwright 등 Jest는 주로 **유닛 테스트(Unit Test)**와 **통합 테스트(Integration Test)**에 많이 쓰이긴 하지만,기본적으로 E2E 테스트(End-to-End Test)도 가능하다.하지만 E2E 테스트에 특화된 도구인 Playwright나 Cypress 같은 툴에 비해 좀 번거로운 점이 있을 수 있는데 Jest는 기본적으로 .. 2025. 1. 3. React-hook-form & Zod를 사용해보자 유저는 회원가입/로그인 할 때 항상 값을 제대로 입력해주지 않는다.고의고 아니고를 떠나서 그렇다. 숫자칸에 "숫자만 넣으세요" 라고 해도 실수로 글자를 넣을 수 있는 법이니까. React-hook-form 이란? 그래서 프론트 개발자가 막아주는 게 좋다. 틀리면"여기는 숫자만 들어가야 해요" , "여기선 문자만 쓸 수 있어요" 이 역할을 해주는 게 React-hook-form이다.서버에 전송하기 전에 한번 걸러주는 필터 같은 친구다. import React from "react";import { useForm } from "react-hook-form";const MyForm = () => { const { register, handleSubmit, formState: { errors .. 2025. 1. 3. Jest Method 1. Test 블록 관련 메서드describe(name, fn): 테스트 그룹을 정의하는 블록입니다. 테스트 케이스를 논리적으로 묶을 때 사용합니다.test(name, fn) 또는 it(name, fn): 개별 테스트 케이스를 정의합니다.beforeAll(fn, timeout): 테스트 케이스가 실행되기 전에 한 번 실행됩니다.afterAll(fn, timeout): 모든 테스트 케이스가 실행된 후 한 번 실행됩니다.beforeEach(fn, timeout): 각 테스트 케이스가 실행되기 전에 실행됩니다.afterEach(fn, timeout): 각 테스트 케이스가 실행된 후 실행됩니다.2. Assertions (단언) 메서드expect(value): 테스트할 값을 지정합니다.3. Mock 함수 관련 메.. 2024. 11. 19. Jest란? Jest는 자바스크립트 테스트 프레임워크다.- 메타에서 개발- React를 포함한 다양한 JS애플리케이션 테스트를 작성하고 실행하는 데 유용하다.-유닛테스트,통합테스트,엔드투엔드테스트까지 다 커버할 수 있다. (차후에 설명) Jest 특징쉬운 설정 가능 : 기본적으로 설정 없이도 바로 사용할 수 있다.빠른 실행 속도 : 테스트를 병렬로 실행해 빠르게 결과를 확인할 수 있다. 스냅샷 테스트 : UI변화가 없는지 검증할 때 유용하다.모킹 함수 기능 : 함수,모듈 등을 모킹(mocking)해서 독립적인 테스트 환경을 만들 수 있다. Jest 언제 쓰나요? 유닛 테스트:개별 함수나 모듈이 예상대로 동작하는지 확인.예) 로그인 함수가 올바른 데이터를 반환하는지 확인.통합 테스트:여러 모듈이 함께 동작할 때, 그.. 2024. 11. 19. 이전 1 2 3 4 ··· 9 다음
