robots.txt 최신화 하는 방법을 아시나요?

안녕하세요.해당 최신화는 AWS의 CloudFront에서 Invalidation(무효화)를 통해서 하실 수 있어요.관련 내용은 섹션5 - 41번 영상 - CloudFront 무효화 부분을 참고 부탁드려요!

메타태그쪽 보고 있습니다만 helmet 라이브러리가 뭔가 잘 작동 안하네요.

안녕하세요.음, 우선 helmet을 적용하신 부분들의 코드를 확인해 볼 수 있을까요?

CloudFlare 설정 질문

안녕하세요.아마 루트 도메인(apex domain)에 대한 DNS 설정이나 리디렉션 설정이 제대로 되어 있지 않기 때문인 듯한데요.Cloudflare Dashboard에서 다음과 같이 설정하시면 됩니다. 1. Cloudflare DNS 설정 확인 및 수정Cloudflare 대시보드에 로그인하여 해당 도메인을 선택합니다.왼쪽 메뉴에서 DNS > 레코드로 이동합니다.루트 도메인 (사이트명) 설정:타입: A이름: @ (또는 사이트명 자체를 입력)IPv4 주소: 실제 웹 서버의 IP 주소프록시 상태:주황색 구름 (Proxied) - Cloudflare의 기능을 사용하려면 켜져 있어야 합니다.(만약 CNAME을 사용해야 하는 호스팅 환경이라면, 루트 도메인에 CNAME을 설정할 수 있도록 Cloudflare가 CNAME Flattening을 지원합니다. 이 경우 타입: CNAME, 이름: @, 콘텐츠: 호스팅 업체에서 제공한 CNAME 값, 프록시 상태: 주황색 구름)www 서브도메인 설정 (루트 도메인으로 연결):타입: CNAME이름: www대상(Target): @ (또는 사이트명 자체를 입력) - 이렇게 하면 www.사이트명이 사이트명을 가리키게 됩니다.프록시 상태:주황색 구름 (Proxied)변경사항 저장만약 이미 www A 레코드가 있고 www가 잘 작동했다면, www의 A 레코드 IP 주소와 루트 도메인의 A 레코드 IP 주소가 동일해야 합니다.2. Cloudflare Page Rule을 사용하여 www를 루트 도메인으로 리디렉션이 단계는 www.사이트명으로 접속하는 모든 사용자를 사이트명으로 자동으로 넘겨줍니다.Cloudflare 대시보드에서 해당 도메인을 선택합니다.왼쪽 메뉴에서 규칙 (Rules) > 페이지 규칙 (Page Rules)으로 이동합니다.페이지 규칙 만들기 (Create Page Rule) 버튼을 클릭합니다.URL 일치 (If the URL matches): www.사이트명/*(사이트명 부분은 실제 도메인명으로 바꿔주세요. *는 와일드카드로, www.사이트명/ 뒤에 어떤 경로가 오든 모두 일치시킵니다.)설정 선택 (Then the settings are): 드롭다운에서 전달 URL (Forwarding URL)을 선택합니다.상태 코드 선택 (Select status code):301 - 영구 리디렉션 (Permanent Redirect)을 선택합니다. (SEO에 가장 좋습니다)대상 URL 입력 (Enter destination URL):https://사이트명/$1(사이트명 부분은 실제 도메인명으로 바꿔주세요. $1은 www.사이트명/*에서 *에 해당하는 부분을 그대로 전달해줍니다. 예를 들어 www.사이트명/page1으로 접속하면 https://사이트명/page1로 이동합니다.)저장 및 배포 (Save and Deploy) 또는 저장 후 규칙 배포 (Save and Deploy Rule) 버튼을 클릭합니다.3. SSL/TLS 설정 확인 (HTTPS 강제화)이미 https://www.사이트명이 작동하고 있으므로 HTTPS는 활성화되어 있을 가능성이 높지만, 확인차원에서 진행합니다.Cloudflare 대시보드에서 해당 도메인을 선택합니다.왼쪽 메뉴에서 SSL/TLS > 에지 인증서 (Edge Certificates)로 이동합니다."항상 HTTPS 사용 (Always Use HTTPS)" 옵션이 켬 (On)으로 되어 있는지 확인합니다. 켜져 있지 않다면 켜주세요.이렇게 하면 HTTP로 접속 시 자동으로 HTTPS로 리디렉션됩니다.

SNS 공유버튼 그룹 만들기 6:30~7:30 질문있습니다.

안녕하세요.우선 해결하셨다니 다행이고, 좋은 질문 남겨 주셔서 감사합니다. 옵셔널 체이닝이 생기면서 간단하기도 하지만, 거꾸로 표현하면 그만큼 내부적으로 일어나는 일에 대해 무관심하게 넘어갈 수 있는 부분인데요. 우선 영상 속에서 타이핑했던 코드와 다른 점이 한 부분 있습니다.ShareButtonGroup 에서 FacebookShareButton 에 hashtag 데이터를 넘기는 코드 부분인데요.적어주신 코드에서는 renderTestInfo?.info.mainTitle 로 넘기셨지만, 강의 영상 또는 소스 코드 레포(https://github.com/cobaetoo/mbti-contents-platform/blob/main/src/components/testResult/ShareButtonGroup.jsx)에서는 renderTestInfo?.info?.mainTitle 로 넘기고 있습니다. info 안에 mainTitle이 있는지 한 번 더 확인하는 셈이죠.이렇게 다른 부분 때문에 undefined가 뜬 것으로 파악됩니다.

React Build 문제

안녕하세요.언제든지 궁금한 점이 있다면 편하게 질문 주세요! 말씀 주신 바와 같이 Timeout 이슈는 Pupeeteer가 응답을 기다리는 시간이 초과되어서 발생하는 이슈인데요. 페이지가 많아질수록 늘어날 겁니다. 에러 메시지에 있는 Increase the 'protocolTimeout' setting in launch/connect calls for a higher timeout if needed. 가 힌트가 될 수 있는데요. vite.config.js 파일에서 아래와 같이 protocolTimeout을 늘려주세요. export default { plugins: [ prerender({ ... // 렌더러 설정 (이 부분에서 Puppeteer에 옵션을 전달합니다) rendererConfig: { // --- 여기가 핵심입니다 --- // puppeteer.launch() 함수에 직접 전달되는 옵션들입니다. // 프로토콜 타임아웃 늘리기 (단위: 밀리초) // 기본값은 30000 (30초)입니다. protocolTimeout: 60000, // 60초로 설정, 필요시 더 늘리세요 // `protocolTimeout`만으로 해결되지 않으면 다른 타임아웃도 고려해볼 수 있습니다: // timeout: 60000, // Puppeteer 작업 전반에 대한 일반적인 시간 제한 }, }), ], };

PC 접속 X, 모바일 접속만 가능

안녕하세요.음, 말씀주신 문제는 흔한 케이스가 아니긴 한데요,,추측해 볼 만한 원인으로는 DNS 캐시 문제가 있어요.PC 운영체제 DNS 캐시: PC는 DNS 정보를 빠르게 불러오기 위해 한 번 조회한 DNS 정보를 저장해둡니다 (캐시). Cafe24에서 DNS 설정을 변경했더라도, PC가 이전 DNS 정보를 계속 사용하고 있을 수 있습니다. 모바일은 해당 사이트에 처음 접속했거나, 캐시 만료 주기가 달라 새 정보를 받아왔을 수 있습니다.해결 방법:Windows: 명령 프롬프트(cmd)를 관리자 권한으로 실행 후 ipconfig /flushdns 입력 후 엔터.macOS: 터미널 앱 실행 후 sudo dscacheutil -flushcache; sudo killall -HUP mDNSResponder 입력 후 엔터 (macOS 버전에 따라 명령어가 다를 수 있습니다).웹 브라우저 DNS 캐시: 크롬, 엣지 등 웹 브라우저 자체도 DNS 캐시를 가지고 있습니다.해결 방법:브라우저 설정에서 캐시 및 인터넷 사용 기록 삭제 (DNS 캐시도 함께 삭제되는 경우가 많음).크롬의 경우 주소창에 chrome://net-internals/#dns 입력 후 "Clear host cache" 버튼 클릭.공유기(라우터) DNS 캐시: 집이나 사무실의 공유기도 DNS 정보를 캐싱할 수 있습니다.해결 방법: 공유기를 재부팅합니다.

이미지 리사이징 현상 막기

안녕하세요.좋은 질문 주셔서 감사합니다. 실제로 S3는 스토리지에 불과하기 때문에 업로드 된 이미지는 리사이징 과정을 거치지 않습니다.단지 원본 이미지를 serving 해주는 역할에 불과해요.AWS가 이미지를 자동으로 리사이징하게 하려면 “Dynamic Image Transformation for Amazon CloudFront”과 같은 별도 솔루션을 직접 배포해야 합니다. 사이트에서 썸네일이 “같은 크기”로 보이는 것은 HTML/CSS에서 width, height, object-fit 같은 속성으로 브라우저가 화면에 맞게 축소해서 보여주기 때문일 듯합니다. 저는 개인적으로 그렇게 유의미한 비용의 차이가 없어서, 강의에서 사용한 이미지 해상도로 서비스에서 사용하고 있는데요.만약 조금이라도 비용을 최적화하고 싶으시다면 자체적으로 리사이징을 하시거나 콘텐츠를 처음 생성하는 과정에서 사이즈를 맞춘 후 업로드 하시는 것을 추천드립니다.

AWS 배포 후 사이트 접속이 원할하지 않은 문제

안녕하세요.현재 localhost로 되어있을텐데요, 혹시 공통으로 사용하고 있는 basic_url 변수를 변경해 보시겠어요?만약 해당 변수가 있는 부분의 코드를 캡쳐 해주신다면 더 상세하게 안내 드릴 수 있을 듯합니다!

따라하다 보니 어느순간 화면이 하얗게 나오는건 왜그럴까요?

아 네에 고생 많으셨습니다!만약 비슷한 에러가 다시 발생할 경우 브라우저 개발 도구의 console 부분을 캡쳐해서 알려주시면 더 정확하게 안내드리도록 하겠습니다, 감사합니다.

이용 약관 코드도 제공을 해 주시나요?

안녕하세요.우선 강의 잘 들어주셔서 진심으로 감사드립니다. 해당 구글 OAuth 이용 약관(Terms of Services)에 대한 코드는 아래 Github 링크를 참고 부탁드립니다.https://github.com/cobaetoo/mbti-contents-platform/blob/main/src/page/Terms.jsx 감사합니다.