이전다음 코딩테스트 더보기 App+Web 커뮤니티 더보기 Web Development 더보기 코딩테스트 App+Web 커뮤니티 웹앱 Web Development 개발일지 최근 게시물 4건을 노출합니다. 카테고리 없음 Lighthouse의 처참한 성능 점수를 보고 최적화 시작... 하..ㅋㅋㅋㅋ원인을 하나하나 살펴보고 해결해보자.보고서에서 텍스트 기반 리소스(HTML, CSS, JS 등)의 압축이 부족하다고 하니 그래..압축해줄게.. 우선 나는 백엔드 없이 프론트엔드 혼자서 외주를 하고있는거기 때문에Firebase Hosting에서 텍스트 압축 활성화를 시켜줬다. Firebase에 텍스트 압축 활성화 및 캐싱 및 헤더 적용Firebase Hosting은 기본적으로 gzip과 brotli를 지원하지만, 직접 활성화하거나 특정 파일을 더 잘 관리하려면 firebase.json 설정 파일을 직접 수정해야 한다!캐싱과 헤더 설정은 리소스 요청 수를 줄이고, 사용자 경험을 개선하는 데 중요하다.. { "firestore": { "rules": "firestore.rules", .. 팀 프로젝트 AWS 배포 후 새로고침시 404에러 오류 해결 1. S3에서 새로고침 처리 설정React와 같은 SPA(Single Page Application)는 모든 요청을 index.html로 리디렉션해야 하므로, S3의 **"오류 문서 설정"**을 수정해야 합니다.S3 설정 단계AWS Management Console에서 S3로 이동합니다.배포에 사용 중인 S3 버킷을 선택합니다."속성" (Properties) 탭으로 이동합니다."정적 웹사이트 호스팅" 항목에서 다음을 설정합니다:인덱스 문서: index.html오류 문서: index.html이 설정은 S3 버킷에서 404 오류 대신 index.html을 반환하도록 만듭니다. 2. CloudFront에서 새로고침 처리 설정CloudFront는 기본적으로 404 오류가 발생하면 S3에서 반환된 대로 클라이언트.. 자기계발 총정리) main,dev 브랜치 별로 배포하는 방법 (windows) Windows에서 환경 변수가 Vite에서 읽히지 않아 각종 삽질을 끝에, cross-env 패키지를 사용해 문제를 해결할 수 있었습니다. (이 글을 읽으시는 windows 사용자 분은 그냥 아래 방법때로 따라하시면 됩니다...) cross-env 설치npm install --save-dev cross-env package.json 스크립트 수 "scripts": { "dev": "vite", "build": "vite build", "build:main": "cross-env VITE_BRANCH=main vite build", "build:develop": "cross-env VITE_BRANCH=develop vite build", "lint": "eslint .", .. 팀 프로젝트 깃허브 셋팅 (팀원들 clone시키기) 프로젝트 구조를 다음과 같이 구성하였고, 피그마 디자인 대로 Footer.jsx, Header.jsx, Navbar.jsx, MainPage.jsx 구성해서 팀원들이 클론하여 작업하게 하였습니다. (++ eslint, prettier, index.html, manifest.json 까지 셋팅 완료) 프로젝트를 구성하다가 manifest.json이 어떤 역할을 하는건지 궁금해서 찾아본 후 아래에 정리하였습니다~! 📘 manifest.json의 역할1. manifest.json이란?manifest.json은 **PWA(Progressive Web App)**에서 필수적인 구성 파일로, 웹 애플리케이션이 모바일 또는 데스크톱 환경에서 설치 가능한 앱처럼 동작하도록 설정합니다.2. 주요 역할앱 설치 지원:사용.. 최근 게시물 4건을 갤러리 형태로 노출합니다. Lighthouse의 처참한 성능 점수를 보고 최적화 시작... AWS 배포 후 새로고침시 404에러 오류 해결 총정리) main,dev 브랜치 별로 배포하는 방법 (windows) 깃허브 셋팅 (팀원들 clone시키기)