전체 글14 댕댕어디가 리팩토링 - #3 장소 상세 페이지 📌 장소 상세 페이지는 반려동물 동반가능 시설에 대한 정보와 방문한 사람들의 리뷰를 간단히 확인할 수 있는 페이지이다. 성능 점수는 지난 번 리팩토링에서 로컬보다 배포에 올라갔을 때 10점 이상 올라간다는 걸 확인했기 때문에 접근성을 올리는 데 중점을 두면 될 것 같다. 📌 Accessibility (접근성)1차 배포후 모바일 화면(iOS 기준)에서는 입력필드(input)의 폰트 크기가 16px 미만이면 터치할 때 자동으로 확대되는 현상이 발생해 사용하기 불편했다는 피드백이 있었고 이를 해결하기 위해 viewport 메타태그에 maximum-scale=1.0을 추가해 확대를 막아놨었는데, 이게 Lighthouse에서는 시각 장애인이나 저시력 사용자가 콘텐츠를 확대하는 걸 방해한다는 이유로 점수가 깎.. 2025. 2. 7. 댕댕어디가 리팩토링 - #2 검색 페이지 📌 검색 페이지는 반려동물동반가능시설을 현재 위치에 가까운 순으로 보여주기도 하고, 장소명을 검색하거나 지역, 시설타입에 맞춰 필터링 검색도 가능한 페이지이다. 최적화 시작하기도 전에 카테고리 2개가 목표치를 넘어가 있어서 순조로울 거라고 생각했는데... 아니었다..ㅎㅎ 📌 1️⃣ Performance (성능) ✅LCP(Largest Contentful Paint)란?LCP(최대 콘텐츠 페인트)는 웹페이지의 핵심 콘텐츠가 화면에 표시되는 데 걸리는 시간을 측정하는 성능 지표로, 핵심개념은 사용자가 웹페이지 방문 시 가장 큰 이미지나 텍스트 블록이 언제 렌더링되는지를 측정하는 것이다.구글은 LCP가 2.5초 이하여야 좋은 성능으로 평가하는데, 기존코드에서 지도가 뜨는데 오래 걸릴 시 나오게 한 로딩 컴.. 2025. 2. 6. 댕댕어디가 리팩토링 - #1 Code Splitting 처음에 Lighthouse를 돌리면서 모든 페이지의 점수를 확인하다보니, 네트워크 탭에서 현재 여는 페이지와는 상관없는 jsx파일들이 로드되고 있는 걸 발견했다.딱 보니까 route설정을 잘못해놨었던 것 같길래 찾아보니import Home from '../pages/Home';import Login from '../pages/Login';import Search from '../pages/search/Search';import PetRegisterPage from '../pages/pet/PetRegisterPage';...AppRouter.js가 모든 페이지를 한번에 import하고 있어서 그런거랬다. 그래서 해결방법은lazy() + Suspense로 코드 스플리팅하면 된다고 한다. 💡 코드 스플리팅.. 2025. 2. 6. 댕댕어디가 리팩토링 - #0 웹 성능 개선하기 LG유플러스 유레카 1기 최종융합프로젝트(비대면부문)에서 1등을 하며 기분 좋게 마무리한 후 약 한달간의 휴식기간을 가지고, 팀원들과 약속했던 리팩토링을 진행하기로 했다.프로젝트 기간 짧아 아쉬움이 많이 남았던 부분들을 위주로 보완하기로 했는데특히 프론트는 각자가 구현한 페이지를 최적화하기로 했고, 시작하기전에 최적화를 어떻게 하는지 제대로 알고 하는 게 좋을 것 같아서 한번 글을 써본다. 🚀 웹 성능(Web Performance)이란?웹 성능(Web Performance)이란 웹사이트가 사용자에게 얼마나 빠르고 원활하게 콘텐츠를 제공하는지를 의미한다.그럼 단순히 웹 성능은 빠르게 페이지를 보이게 만드는 것일까? ㄴㄴ 1️⃣ 전체 로드 시간 단축: 웹사이트를 렌더링하는데 필요한 파일을 다운로드하는 데 .. 2025. 2. 3. 변수 - 유효범위(스코프): 전역 vs 지역(함수, 블록)- 값의 변화: 정적 vs 동적- 값의 개수: 스칼라변수 vs 오브젝트 변수 변수 키워드varletconst전역스코프재선언 가능재할당 가능블록스코프(전역에 있는 변수 재선언o)재선언 불가재할당 가능블록스코프(전역에 있는 변수 재선언o) 재선언 불가재할당 불가* (var는 중복선언과 스코프의 모호성으로 잘 안씀) 2024. 10. 7. 선택자 종류- 단순 선택자(태그 이름, ID, Class)- 결합 선택자- 속성 선택자- 의사-클래스(pseudo-class) 선택자- 의사-요소(pseudo-element) 선택자명시도(우선순위): * 1. 아이디 선택자 vs 클래스 선택자아이디 선택자(#아이디)클래스 선택자(.클래스)하나의 문서에서 중복없이 오직 하나만 표현중복 허용(뒤쪽에 오는 클래스가 우선순위 ↑) 2. 속성 선택자[속성이름], [속성이름=속성값] 3. 의사클래스와 의사요소 * 의사: 가짜 또는 유사(similar)라는 의미- 의사클래스: '특정 상태'에 있는 요소를 선택하는 선택자로서 마우스포인터로 가리키고 있는 요소나 해당 유형의 첫번째 요소 등을 가리킴, 콜론 사용(:)- 의사요소: '새로운 HTML'을 적용한 것처럼 동작, 이중.. 2024. 10. 4. 이전 1 2 3 다음
