[TIL] 오늘의 개발일지

 

오늘 재밌었던 작업은 카카오 공유하기 API를 테스트로 붙여보는 거였당

항상 새로운 기술은 첨엔 낯설어서 무섭지만 구글링 하면서 또 하나하나 콘솔 찍어가면서 어떤 원리인지 찾아가는 묘미가 있는 것 같다

나는 next.js로 작업을 하는데 중간에 에러가 났었는데

 

1. Kakao.init : Already initialized 에러 메세지

이미 이니셜라이즈가 되었다고 메세지가 나와서

useEffect를 사용해서

  useEffect(() => {
    if (!window.Kakao.isInitialized()) {
      window.Kakao.init(process.env.NEXT_PUBLIC_KAKAO_API_KEY);
    }
  }, []);

이니셜라이즈가 false일때만 최초 실행을 시키도록 수정해주었다.

 

* JavaScript SDK가 정상적으로 초기화된 상태라면, 해당 웹 페이지 실행 시 개발자 도구 콘솔에 true가 출력되고. false가 출력됐다면 초기화에 사용한 JavaScript 키 값이 올바른지 확인해야 한다고 한다.

 

2. Cannot read properties of undefined Share 어쩌고 저쩌고.. 에러가 나왔다.

처음에 카카오 개발자문서 뒤져보니 아래 문제인가도 싶어서 Link로도 바꿔봤는데, Link도 똑같이 안되었었다.

사실 이 문제도 1번 에러를 잡을때, 정상적으로 Kakao 를 init하는 함수를 쓰고 나니 잡힌것같긴한데

  const kakaoShare = () => {
    const { Kakao, location } = window;
    console.log("Kakao", Kakao.Link);
    console.log("location.href", location.href);

    Kakao.Share?.sendScrap({
      requestUrl: location.href,
    });
  };

요렇게 Kakao.Share 에 ? 를 붙여서도 에러를 해결했었다

(당연히 위에 1번이 해결이 안되었으니, 저 sendScrap는 실행되지 않았음 ㅇㅅㅇ !)

 

 

내일은 진짜 로그인 한 상태로 해당 유저가 할 수 있는 수정/삭제로 코드 수정하고

커뮤 페이지에 댓글은 CSR으로 되게 리팩토링해야징~

 

UI작업도 어여 시작하고 싶당..

나름 수월하게 흘러가서 감사했던 오늘의 개발일지 끄읕-

 

---

[오늘 잡았던 오류일지]

 

https://warn-code.tistory.com/296

hydration failed because the initial UI does not match what was rendered on server ! / 서버에서 랜더링되는 것과 브

 

 

https://warn-code.tistory.com/297

next.js에서 Image is missing required "src" property 에러 해결법