Front-End/Next.js9 최적화 작업(삽질) (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. 캐싱(caching) 캐싱 - 자주 사용되거나 시간이 많이 소요되는 데이터를 임시 저장소에 저장한다.이때 저장 된 데이터를 캐시라고 부른다. 캐싱의 유형은 크게 4가지가 있다. 브라우저 캐싱웹 브라우저가 웹페이지 리소스를 로컬에 저장페이지 로딩 속도를 향상 시키는 방법이다. CDN 캐싱콘텐츠 배포 네트워크(CDN)을 사용하여 전 세계 여러 서버에 데이터를 분산 저장.CDN 제공업체: Cloudflare, Akamai, AWS CloudFront 등.정적 파일(이미지,동영상,css,JS)를 각 지역의 CDN서버에 저장해 로드 시간 단축 서버사이드 캐싱서버에서 자주 사용되거나 시간이 많이 소요되는 데이터를 임시저장, 이후 요청시 빠르게 응답메모리 캐싱: 데이터를 서버의 메모리에 저장하여 빠르게 접근.ex)Redis, Memcac.. 2024. 7. 31. 404 ,error , loading 각각 페이지 만드는 방법에 대해 알아보겠다. 404설정을 안하면 버셀에서 제공해주는 404페이지를 그대로 따라간다. 만드는 방법은 src/app 하위에 "not-found.tsx"를 만드는 것이다.컴포넌트채로 보여준다고 보면 된다. Error이것 역시 404와 방식은 똑같다.error.tsx 만들면 된다.에러는 'use client' 붙혀줘야 함! Loading로딩도 똑같다. 같은 경로에 Loading.tsx를 만들어주면 된다.로딩 컴포넌트 만드는 거 굉장히 중요하다.이것도 레이아웃.tsx처럼 , 가장 가까운 놈의 경로 공유를 한다.같은 폴더에 있는 놈을 쓰게 된다. 2024. 7. 30. layout.tsx 레이아웃은 시스템 파일이다. 시스템 파일 : 운영 체제 및 시스템 소프트웨어가 제대로 동작하기 위해 필요한 파일이거 경로마다 사용이 가능하다. 기본적으로 root에 있는 레이아웃의 설정을 따라가게 되는데예를 들어 라우터폴더 안에 , layout.tsx를 만들면 , 그 안에 page.tsx는 안쪽 layout.tsx를 따라가게 된다.src/app/blog/layout (blog 폴더 내에 있는 page.tsx는 이 놈을 따라간다.)src/layout.tsx (전체적으론 이놈) 결론 : 레이아웃은 경로마다 생성해서 중첩 할 수 있다. 2024. 7. 30. 리액트 서버컴포넌트 , 클라이언트 컴포넌트 넥제 서버컴포넌트 안에서도 변수 사용이 가능하다. RSC (Default)react-server-component데이터 패칭 ! axos나 fetch api를 사용해서 하는 작업을 용도로.server Actions RCC (선택사항)react-Client-component 사용자와 상호작용하기 위한 컴포넌트useState , useEffect등 훅 사용가능. 넥제가 이렇게 두개가 나뉘는 이유는각각의 역할이 다르기 때문이다. 컴포넌트 트리를 구현할 때 신경써야 하는 부분 서버(상단) - 클라이언트(하단) 이렇게는 적용이 괜찮은데 클라(상단) - 서버(하단) 이렇게 트리구조가 되면 ,서버는 client 컴포넌트가 되는 것이다. 클라컴포는 서버컴포넌트에서 실행된다.요약 : 서버컴(상) - 클라(하) => 이.. 2024. 7. 30. 이전 1 2 다음
