문제 상황Google Search Console에서 "페이지 색인이 생성되지 않음: 중복 페이지, Google에서 사용자와 다른 표준을 선택함" 오류 발생사용자가 원하는 표준 URL: https://example.com/en/blog/...Google이 선택한 표준 URL: https://www.example.com/posts/...원인 분석1. Canonical 태그 문제문제점: 모든 페이지의 canonical 태그가 메인 페이지를 가리키고 있음원인: 각 페이지의 고유한 URL을 canonical로 지정하지 않아 Google이 혼란스러워함2. 메타 태그 불일치 문제문제점: 페이지마다 메타 태그 작성 방식이 달라 일관성 없음원인:수동으로 작성한 메타 태그들이 서로 다른 URL 형식 사용OG 태그, Twi..
What I doAS - IS style background-image attribute로 이미지 로드TO - BEnext/image Image Component 사용 하여 로드width, height 지정minimumCacheTTL → Image cachingoptimize with AVIF, WEBPset Priority to Next Image(Main Page Top content → priority: “high”)// Image Load With next/image Image Component// it change to below// even if you not use next/image, you can use that api(_next/image?url=[imageURL])// for imag..
이 글에선 Typescript에서 사용되는 형식인 Union 형식, Intersection 형식에 대해서 알아보고, 필자가 가졌던 의문인 Union형식을 사용할거면, 상속을 사용하는 것이 낫지 않은가? 에 대해 설명을 하고,Union 형식이 사용되는 간단한 예시를 소개할 예정이다. Union형식과 Intersection형식Union 형식Union 형식은 여러 타입 중 하나의 타입을 가질 수 있도록 정의한다. 이는 상속의 개념에서 부모 클래스와 비슷하게 동작한다. | 연산자를 사용해 여러 타입을 조합할 수 있다. 예를 들어, Circle과 Rectangle을 대표하는 Shape 타입을 Union 형식으로 정의할 수 있다.type Circle = { radius: number;};type Rect..
스토리북은 무언인가?UI 컴포넌트를 완성된 프로그램으로 생각하게 만들어주는 도구 라고 생각한다.우리는 storybook을 사용하게 되면서, UI 컴포넌트에 대해문서화 작업기능테스트시각적테스트등의 작업을 진행하면서, UI컴포넌트 자체를 하나의 완성된 프로그램으로서 만들어 나간다.문서화 작업 React나 컴포넌트 기반의 프론트엔드 개발을 진행하면, 꼭 겪게되는 문제가 있다. 다른사람 (과거의 나를 포함해서) 이 만든 컴포넌트의 존재를 모르거나, 이해할 수 없는 경우이다. 컴포넌트가 있는지도 몰라서 다시 똑같은 기능의 컴포넌트를 만든다거나, 이미 만들어진 컴포넌트지만 그 컴포넌트의 기능을 제대로 이해하지 못해, 결국 다시 만들어 버린다던가하는 일이다. 아마 React기반의 프론트엔드 개발을 진행해본 사람..
