문제 상황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..
React의 배포SSR를 사용하지 않는 CSR React 라이브러리 및 React 기반 프레임워크들은 빌드하면 아래와 같은 파일이 산출물로 나오기 때문에 정적 배포가 가능하다.assets/scripts/ㄴ index.jsㄴ index_ABCD.jsㄴ ...index.html따라서 AWS의 S3와 같은 서비스를 사용하여 정적 배포를 하기도 하고, CDN을 사용하기 위해 앞단에 cloudFront 서비스를 붙여 사용하기도 한다.CloudFront의 캐시 기능cloudFront는 캐시기능을 제공한다, 아래 사진과 같이Cloudfront → 배포 ID 선택 → 작업 → 동작 → 편집에서 캐시가 걸려있는것을 확인할 수 있다. (이 경우는 비용절감을 위해 캐시를 직접 설정했다){ "type": "mediaSing..
이 글에선 Typescript에서 사용되는 형식인 Union 형식, Intersection 형식에 대해서 알아보고, 필자가 가졌던 의문인 Union형식을 사용할거면, 상속을 사용하는 것이 낫지 않은가? 에 대해 설명을 하고,Union 형식이 사용되는 간단한 예시를 소개할 예정이다. Union형식과 Intersection형식Union 형식Union 형식은 여러 타입 중 하나의 타입을 가질 수 있도록 정의한다. 이는 상속의 개념에서 부모 클래스와 비슷하게 동작한다. | 연산자를 사용해 여러 타입을 조합할 수 있다. 예를 들어, Circle과 Rectangle을 대표하는 Shape 타입을 Union 형식으로 정의할 수 있다.type Circle = { radius: number;};type Rect..
