완강했습니다. 이슈 해결 정리 (23.01.31 기준)

안녕하세요. 완강해서 지금까지 제가 개인적으로 마주친 문제들 해결 내용을 공유해보고자 합니다. 

Mac에서 작업했습니다. 

조금이라도 도움이 되었으면 좋겠습니다. 

## chakra Avatar broken-link 오류

문제: Avatar 컴포넌트의 src에 ‘https://bit.ly/broken-link' 이 링크를 넣었을 때 콘솔에 오류가 계속 발생했습니다. 

해결:  https://chakra-ui.com/docs/components/avatar 여기를 참고하니 src가 문제 있을 때 기본아바타를 보여준다고 해서 기본 아바타가 필요할 때는 src에 ’’ 빈문자열을 넣었습니다. 

## LOCAL_CHROME_PATH 폴더가 존재하지 않음

문제: 강의를 따라서 playwright-core 설치하고 했는데 ms-playwright 폴더가 없었습니다. 

해결: 오류났을 때 로컬호스트로 띄운 페이지에서 npx playwright install 하라는 안내가 떠서 했더니 ms-playwright 폴더가 생겨서 무사히 진행했습니다. 

## vercel배포 시도 중 용량 문제

문제: api/thumbnail  에 severless function 용량이 제공되는 50mb보다 크다고 빌드가 안 되었습니다. 

해결: chrome-aws-lambda 버전을 6에서 5로 수정. 아슬아슬하게 세이프했습니다. 

## 배포 후 구글 로그인 오류 

문제: 400 오류 redirect_uri_mismatch

이런 오류가 나서 꼬박 하루 정도 찾아다녔는데 vercel 에 환경변수 넣을 때 한 글자 빼먹고 저장했던 것을 발견했습니다.

해결: 환경변수 오타 수정 후 재배포

## og 이미지에서 텍스트가 안보임

문제: 로컬에서 테스트 할 때 og 이미지에서 텍스트가 보일 때도 있고 안보일 때도 있고 새로고침 할 때마다 랜덤으로 발생. 배포중인 상태에서는 서버 에러 나면서 이미지가 아예 보이지 않는 문제. 

해결 과정: 파라미터로 텍스트가 넘어오는 게 문제인가 싶어서 useRouter의 isReady를 사용해 보기도 하고.. (사실 정확히 원인을 알 수 없었습니다. )

해결: playwright 대신 vercel에서 제공중인 og 이미지 생성 기능을 사용 

https://vercel.com/templates/next.js/og-image-generation

### vercel/og 사용중 추가적인 에러 처리

문제: new URL type 에러

• Type error: Argument of type 'URL' is not assignable to parameter of type 'RequestInfo'. Type 'URL' is not assignable to type 'string'. 

해결: @types, typescript 버전 수정

    "@types/node": "^18.0.6",

    "@types/react": "^18.0.15",

    "typescript": "^4.7.4"

문제: vercel 무료 제공 함수 용량 초과

• Error: The Edge Function "api/og" size is 1.67 MB and your plan size limit is 1 MB. Learn More: https://vercel.link/edge-function-size

해결: ttf 대신 용량이 작은 woff 파일 사용