프론트 개발 블로그

Core Web Vitals는 구글이 정의한 웹페이지의 실제 사용자 경험 품질을 측정하는 3가지 핵심 지표예요.검색 순위(SEO)에도 영향을 미침.1. LCP (Largest Contentful Paint) — 로딩 속도뭘 측정하나: 화면에서 가장 큰 콘텐츠(보통 히어로 이미지, 큰 텍스트 블록)가 렌더링되는 시점의미: "사용자가 페이지의 주요 콘텐츠를 봤다고 느끼는 시점"기준:좋음: 2.5초 이하개선 필요: 2.5~4초나쁨: 4초 초과원인: 느린 서버 응답, 렌더링 차단 CSS/JS, 최적화 안 된 이미지 등2. INP (Interaction to Next Paint) — 반응성뭘 측정하나: 사용자가 클릭/탭/키 입력했을 때, 화면이 실제로 반응하기까지 걸리는 시간의미: "버튼 눌렀는데 왜 안 눌리지?..

글꼴 설정이 왜 잘못되었는지, 이를 수정하는 방법 https://www.jonoalderson.com/performance/youre-loading-fonts-wrong/?utm_source=Nomad+Academy&utm_campaign=6c590e1186-EMAIL_CAMPAIGN_2025_09_05&utm_medium=email&utm_term=0_4313d957c9-7ac123137e-158246701

Material UI(@mui/material)구글 머티리얼 디자인 기반 UI 컴포넌트가장 널리 쓰임. 버튼, 다이얼로그, 셀렉트 등 포함MUI Base(@mui/base)스타일 없는 순수 기능 컴포넌트스타일링 자유도 높음 (headless UI)Joy UI(@mui/joy)MUI 팀이 만든 다른 디자인 시스템머티리얼이 아닌, 감성적이고 우아한 UI 디자인MUI System(@mui/system)스타일 유틸리티 (spacing, layout 등)Emotion 기반의 스타일링 도구 모음

1. PMG = Project Master Gantt 의 약자로 전체 프로젝트의 공정(Plan & Schedule)을 Gantt Chart 형식으로 정리한 마스터 일정표를 말함. 공정도란? 작업 순서와 기간을 시각적으로 표현한 도표. 일반적으로 Gantt 차트 형태.PMG 공정도는 보통 다음 내용을 포함합니다:전체 작업(WBS: Work Breakdown Structure)각 작업의 시작일/종료일선행 작업/후속 작업 간 의존 관계주요 마일스톤일정 지연/진행률 표시 등

소스 충돌 해결 하고자 compare 화면을 보고자 했는데 소스 비교 화면이 보이질 않음. 이클립스가 평소에도 느려서 이클립스 문젠가 싶었는데, Javascript 비교 버그 중 하나라고(StackOverflow) 함. window >> preferences >> compare/Patch open structure compare automatically 체크박스 해제 (읽어보기) -> Javascript 비교 관련 버그라고 한다. https://stackoverflow.com/questions/10457639/eclipse-compare-editor-stopped-showing-detailed-differences

SASS Function을 활용한 px -> rem 단위 변환 // px to rem $rem-base: 16px !default; // STRIP UNIT // 측정 단위를 제거하고 반환 @function strip-unit($num) { @return $num / ($num * 0 + 1); // 10 / 10 * 0 + 1 } // CONVERT TO REM @function convert-to-rem($value, $base-value: $rem-base) { $value: strip-unit($value) / strip-unit($base-value) * 1rem; @if($value == 0rem) { $value: 0; } @return $value; } // REM CALC // rem-c..

https://jobc.tistory.com/177 git push, pull (fatal: refusing to merge unrelated histories) 에러 원격 저장소를 remote로 설정하고 바로 push를 하면 몇가지 오류가 발생할 수도 있다. 예를 들어 아래와 같은 오류 메시지이다. 1 2 ! [rejected] master -> master (non-fast-forward) error: failed to push som.. jobc.tistory.com 위으 블로그 덕분에 해결할 수 있었음. 1. git push origin main 실행 시 아래와 같이 rejected 발생 ! [rejected] main -> main (non-fast-forward) error: failed to..

response.sendError(HTTP상태코드, 에러메세지) HttpServletResponse : HTTP 응답정보를 처리하는 객체 https://velog.io/@jihyeonee/%EC%8A%A4%ED%94%84%EB%A7%81-MVC-2%ED%8E%B8-%EC%98%88%EC%99%B8-%EC%B2%98%EB%A6%AC%EC%99%80-%EC%98%A4%EB%A5%98-%ED%8E%98%EC%9D%B4%EC%A7%80 https://tomcat.apache.org/tomcat-5.5-doc/servletapi/javax/servlet/http/HttpServletResponse.html

https://itworldyo.tistory.com/136 submit 중복 클릭 막기 submit 중복 클릭 막기 중복 클릭으로 인해 가장 많이 발생하는 문제가 있습니다. 폼을 전송할 때 클릭이 2번 이상 발생하면서 폼이 2번 전송되어 2중으로 저장되는 경우입니다. 이러한 경우에 itworldyo.tistory.com 버튼 클릭 시 중복 이벤트 방지 // 클릭 시 버튼 비활성화 $('#btn').prop('disable', true); OR const btnElem = document.querySelector('#btn'); btnElem.addEventListener('click', function(e) { this.setAttribute("disabled", "disabled"); // Submi..

기종 Viewport 화면 사이즈 (W x H) 해상도 Phys. (W x H) 인치 DPR (Device Pixel Ratio) Galaxy Flip3 384 x 939 1080 x 2640 260 x 512 6.7 2.8125 Galaxy Flip2 6.7 Galaxy Flip 412 x 1004 1080 x 2636 112 x 300 6.7 Galaxy Z Fold3 접힌화면 320 x 872 넓은화면 674 x 842 접힌화면 840 x 2289 넓은화면 1769.25 x 2210.25 2.625 Galaxy Z Fold2 884 x 1104 1768 x 2208 7.6 2 Galaxy Fold 768 x 1076 1536 x 2152 7.3 2