Frontend21 [Frontend 성능 개선] 프론트엔드 번들 크기를 최적화 주요 방법 1. 코드 분할 (Code Splitting)```javascript// 라우트 기반 분할const Dashboard = lazy(() => import('./Dashboard'));// 컴포넌트 기반 분할const HeavyComponent = lazy(() => import('./HeavyComponent'));```2. Tree Shaking 활용```javascript// Badimport _ from 'lodash'// Goodimport { map, filter } from 'lodash'// 더 좋음import map from 'lodash/map'import filter from 'lodash/filter'```3. 이미지 최적화```javascript// Next.js Image 컴포넌트.. 2025. 2. 10. [Frontend 성능 개선] 압축 적용하여 번들 사이즈 줄이기 증상프로젝트 개발이 진행됨에 따라 번들 사이즈가 커지고 있는 상황.해결 방법https://mystudylab.tistory.com/206 에 나와있는 최적화 방법 중 압축 방법을 적용한다.압축 방식 비교1. 애플리케이션 레벨 (예: Node.js/Next.js)장점:애플리케이션 로직 내에서 세밀한 제어 가능동적 콘텐츠에 대한 즉각적인 압축 가능단점:애플리케이션 서버의 CPU 리소스 사용각 요청마다 실시간 압축 필요여러 애플리케이션이 있을 경우 각각 설정 필요2. 웹서버 레벨 (예: Nginx)장점:중앙 집중식 설정으로 관리 용이C로 작성되어 효율적인 압축 처리정적 파일 압축 결과 캐싱 가능여러 애플리케이션에 대해 일관된 압축 정책단점:동적 콘텐츠 압축은 실시간으로 해야 함세밀한 케이스별 제어가 어려울 수.. 2025. 2. 10. Node22 마이그레이션 작업1. Docker 이미지 버전 업FROM public.ecr.aws/docker/library/node:22-alpine AS builder2. nvmrc 수정22이슈1. Cannot find module '../build/Release/canvas.node'원인canvas 이전 버전 의존성 이슈 때문에 테스트 실패 문제 발생해결방법package.json "resolutions": { "canvas": "^v3.1.0" } 2025. 2. 5. [Web] Search Engine Optimization 검색 등록 네이버 웹마스터: https://searchadvisor.naver.com 구글 검색: https://search.google.com/search-console 헤더에 메타 정보 설정 Ben의 블로그 로봇 설정 robots.txt 작성 후 root에 호스팅 공개 사이트면 모두 허용 User-agent: * Allow:/ Sitemap sitemap.xml 작성 후 root에 호스팅 사이트 내 페이지를 나열 https://ben.com/ 2023-07-28T18:15:38+00:00 1.00 https://ben.com/about 2023-07-28T18:15:38+00:00 0.80 2023. 7. 30. 2-1 웹 브라우저의 작동 방식 (기본 동작) 이전 글에서 웹에 대한 기본 개념들에 대해서 알아보았다. 이번엔 사용자가 웹 브라우저를 통해 웹 페이지 요청을 보낼 경우 어떤식으로 브라우저가 작동하는지 알아보겠다. TL;DR - 브라우저의 작동방식이 왜 프론트 성능에 중요한지 2-2 에서 다루겠다. 2021. 3. 14. 1. 웹에 대한 기본 개념(브라우저, 서버, 클라이언트) 웹에 대한 기본적인 내용들이다. 하이퍼텍스트(Hyper Text) 란? - 참조(하이퍼링크)를 통해 독자가 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트이다. - 주로 컴퓨터나 다른 전자기기들을 통해 표시된다. - 웹이라는 것은 컨텐츠들이 하이퍼텍스트로 묶인 집합이라고 볼 수 있다. 웹 브라우저(Web Browser)란? - 웹 서버와 통신(쌍방향으로)하여 HTML 문서나 파일을 출력하는 GUI(그래픽 사용자 인터페이스) 기반의 응용 소프트웨어이다. 웹 서버란(Web Server) - 인터넷을 통해 웹 서비스를 제공하는 컴퓨터의 하드웨어 또는 소프트웨어를 의미한다. 클라이언트(Client)란? - 인터넷에 연결된 컴퓨터나 모바일 기기 등을 이용해 웹 서비스를 이용하는 컴퓨터 또는 이용자를 의미한다.. 2021. 3. 14. WIP 이미지 캐시란? 캐시는 "성능 향상을 목적으로 자주 사용하는 데이터나 값을 미리 복사해 놓는 임시 장소" 이다. 캐싱은 이런 캐시에 데이터를 저장하는 행위를 의미한다. 캐시는 크게 물리적인 캐시 메모리와, 소프트웨어적인 캐시로 나뉘어지며, 소프트웨어 캐시는 대표적으로 이미지 캐시가 있다. 왜 이미지 캐시해야 하나? 1. 비용 절감 서비스 트래픽에 절대적인 부분을 차지하는 건 미디어 데이터 즉 이미지이다. 이미지 최적화 여부가 비용으로 직결되기 때문에 반드시 생각해야 하는 부분이다. 아래는 Threshold 기준으로 640px x 480px 이미지를 바이너리 이미지로 바꿔 표현한 것이다. 307,200 비트를 사용한다. 2. 사용자 경험 향상 사용자는 컨텐츠를 빨리 소비할 수 있길 원합니다. 특히 미디어가 중요해진 요즘 .. 2020. 10. 19. Macking Layouts Floots Positioning Box Model CSS Grid Flex Box 2020. 9. 6. Learn the basic 2020. 9. 6. SEO Basics 2020. 9. 6. 이전 1 2 3 다음
