codinghatso

이번 목표는 폰트 최적화입니다.폰트를 최적화함으로써 LCP와 CLS를 개선되는 것이 기댓값입니다. 먼저 CLS(Cumulative Layout Shift, 누적 레이아웃 이동)는 웹 페이지가 로드되거나 상호작용하는 동안 발생하는 예기치 않은 화면 요소의 밀림이나 이동을 측정하는 시각적 안정성 지표를 말합니다. 네이버 외부 CSS 연결을 제거하고 폰트 파일을 프로젝트 내부에서 직접 관리하는 방식으로 바꿨습니다.font-display: swap을 적용하고, 대체 글꼴의 크기 차이로 발생하는 CLS는 폰트 측정값 재정의로 줄입니다.woff2로 변환하기 위해서 brew install woff2 변환도구를 설치합니다.변경한 코드 값들은 작성하지 않겠습니다. 현재 발견한 문제점 3가지 네이버 CSS의 @font-f..

LCP(Largest Contentful Paint) 개선해보기콘텐츠가 포함된 최대 페인트 (LCP)는 Lighthouse 보고서의 성능 섹션에서 추적하는 측정항목 중 하나입니다.각 측정항목은 페이지 로드 속도의 일부 측면을 포착합니다.Lighthouse는 LCP를 초 단위로 표시합니다.가장 큰 콘텐츠 요소가 화면에 렌더링되는 시점을 측정한 것 입니다.LCP를 개선하는 방법LCP가 이미지인 경우 타이밍은 4개의 하위 부분으로 나눌 수 있습니다. 가장 오래 걸리는 하위 부분을 알면 LCP를 최적화하는 데 도움이 됩니다. Lighthouse는 '최대 콘텐츠 페인트 요소' 진단에서 하위 요소 분석과 함께 LCP 요소를 표시합니다. 첫 바이트까지의 시간 TTFB로드 지연로드 시간렌더링 지연위처럼 LCP를 최적화..

Lighthouse로 Local환경의 브라우저에서 테스트한 결과입니다.배포된 서비스와 Local에서의 성능차이가 생각보다 많이 차이 나는 것 같습니다. 제가 만든 서비스만 그런 건지 대부분의 서비스가 그런 건지 아직은 잘 모르겠지만 최적화하는 방향성을 더 최악의 결과를 보여준 Local에서 개선하고 배포하게 된다면 유의미한 성능 개선이 될 것 같다고 판단했습니다.

Lighthouse로 vercel로 배포된 서비스를 브라우저에서 테스트한 결과입니다.

Microsoft는 2026년 7월 8일 TypeScript 7.0을 발표했습니다. 가장 큰 변화는 컴파일러와 언어 서비스가 Go 기반 네이티브 코드로 옮겨갔다는 점이며, 공식 발표는 전체 빌드에서 대체로 8배에서 12배 수준의 속도 향상했다고 발표했습니다.Notion, Figma, google 등의 많은 회사들과 협력해 실제 코드베이스에서 테스트했고, 6.0에 비해 서버 명령 실패율이 80% 감소, 서버 충돌 발생률 60% 감소하는 등의 성공적인 사례들을 자랑합니다.TypeScript 팀들을 7.0 버전을 실무에서 바로 적용하여 할 수 있다는 걸 강조 합니다. 뒤에 내용이 나오지만 기존 6.0과 7.0의 호환성 패키지를 안내하기도 한다. "타입 체크가 빨라졌다"를 넘어서 에디터 진단, 자동완성, 참조 ..

이번에 ChatGPT-5.6 버전이 업데이트되면서 Codex App이 ChatGPT App으로 명칭이 바뀌며 통합되었다.또한 Sol, Terra, Luna 3가지 모델로 세분화되면서 각자 용도에 맞게 사용하게끔 의도하고 있다.각 모델의 특징과 용도 그리고 비용등을 간단하게 정리하고자 한다. Sol : 중요한 문제를 끝까지 풀어야 할 때여러 파일과 조건이 얽힌 코드 수정·디버깅긴 문서·자료를 바탕으로 한 분석 및 연구설계 판단, 보안 검토, 복잡한 자동화한 번에 정확히 해결하는 것이 재시도 비용보다 중요한 작업비용은 5.6-Sol 추론 높음 === 5.5 추론 높음으로 같다고 할 수 있다.모델입력 100만토큰출력100만토큰GPT‑5.5$5$30GPT‑5.6-Sol$5$30 즉 기존 개발자분들은 이전과 같은..

https://www.anthropic.com/news/claude-sonnet-5 Introducing Claude Sonnet 5Our most agentic Sonnet yet, with top-tier intelligence for coding and everyday professional work.www.anthropic.comAnthropic은 2026년 6월 30일 Claude Sonnet 5를 발표했습니다.성능은 Opus 4.8에 가까워졌지만 더 낮은 가격대API 모델명은 claude-sonnet-5Sonnet5는 이전 버전보다 훨씬 더 능동적이다.안정성 평가 소네트 5는 소네트 4.6보다 전반적으로 부적절한 행동 비율이 낮지만, 미소스 프리뷰 및 오푸스 4.8보다는 높다.전반에 걸쳐 사용..

Next.js 는 프레임워크입니다. 때문에 프레임워크에서 추구하는 방향성과 제작과정을 준수해야 합니다.우선 폴더 구조부터 파악하고 접근할 필요가 있습니다.https://nextjs.org/docs/app/getting-started/project-structure Getting Started: Project Structure | Next.jsLearn the folder and file conventions in Next.js, and how to organize your project.nextjs.org 공식 문서에 첫 글에선 기본적인 폴더 구조를 소개합니다.app, pages, public, src 최상단 디렉토리 이하 루트 디렉터리에서 형상관리 저장소에 업로드하면 안 되는 파일들을 안내해주고 있습니..