우당탕탕 에러 해결 로그

 

 

① 초대장 공유하기 기능을 만들 때였다. 링크 복사 버튼을 만들고, 페이스북이랑 트위터 공유는 react-share라는 라이브러리를 이용하였다. 그리고 카카오톡 공유는 카카오 메시지 api를 활용했는데,

 

여기서 카카오톡 버튼을 누르면, 

 

이렇게 카카오톡 공유를 위한 새 창이 뜨게 되는 것이다. 그런데 이게 다른 때는 문제가 없는데, 새로고침을 하고 나면 이 창이 뜨질 않았다. 

 

https://developers.kakao.com/tool/demo/message/kakaolink?default_template=feed 

Kakao Developers

위 예제를 보고 만들었었는데, 아예 안 되는 것도 아니고 새로고침만 하면 안 되니까 문제의 원인과 그 해결 방법을 찾기가 정말 어려웠다. Kakao SDK가 최신화되지 않아서 그런 건지, 다른 api 사용 부분과 충돌이 되어서 그런 건지, 다양한 방법을 시도해 보다가 결국 문제를 해결한 방법은 구현 방식의 차이에 있었다. 

 

 

출처: https://developers.kakao.com/docs/latest/ko/message/js-link

 

  여기 구현 방식을 보면, 카카오 api를 이용해 공유하기 버튼 자체를 만드는 방식이 있고, 버튼은 내가 만들고 공유하기 기능만 가져와서 연결하는 방식이 있는데, 내가 사용했던 방식은 버튼 자체를 만드는 방식이었다. 아무래도 예제가 바닐라 자바 스크립트로 작성된 것이었기 때문에 리액트로 구현하는 과정에서 잘 맞지 않는 부분이 있었던 것 같다. 구현 방식을 변경하면서 버튼 생성 시 Kakao 객체를 초기화하는 것이 아니라 버튼 클릭 시 초기화할 수 있도록 코드를 수정하였고, 이렇게 문제를 해결할 수 있었다.

 

 

 

 

 

② ngrok 서버를 이용하던 중, get 요청을 보내면 응답으로 html 파일이 오는 문제가 있었다. 해당 html 파일을 살펴보니 (ERR_NGROK_6024)라는 내용이 있었고, 이 에러 코드를 검색해서 해결 방법을 찾을 수 있었다.

 

→ 요청 헤더에 "ngrok-skip-browser-warning": "69420" 을 추가해 주면 된다!

 

( 참고한 글 : https://velog.io/@se2id/ngrok-skip-browser-warning-ERRNGROK6024%EC%97%90%EB%9F%AC-Get%EC%9A%94%EC%B2%AD%EC%8B%9C-doctype-html-%EB%9C%B0-%EB%95%8C )

 

 

 

 

 

③ 우편 번호 검색 시 처음 한 번은 문제가 없는데, 다시 검색을 하면 Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.라는 에러가 발생하는 문제가 있었다. 컴포넌트가 언마운트 되면서 DOM 조작을 위한 노드를 찾지 못하게 되는 것 같았다. 바로 에러 메시지를 검색해 보았고, 문제가 발생하는 컴포넌트를 <div> 태그로 한 번 감싸주면 된다는 글이 있어 이 방법으로 문제를 해결할 수 있었다. 

 

이런 식으로!

 

( 참고한 글 : (1) https://velog.io/@ansrjsdn/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%97%90%EB%9F%AC-%ED%95%B4%EA%B2%B0-React-DOMException-Failed-to-execute-removeChild-on-Node-The-node-to-be-removed-is-not-a-child-of-this-node, (2) https://chana.tistory.com/entry/Scroll-Magic-Failed-to-execute-removeChild-on-Node-%EC%97%90%EB%9F%AC-%ED%95%B4%EA%B2%B0)

 

 

 

 

 

④ 간단하게 아이콘을 사용하기 위해 react-icons를 이용하던 중 아이콘의 색이 원하는 대로 잘 변경되지 않는 문제가 발생했다. 

 

<NavListIcon>
  <RxCross1 size="30px" color="#fff"/>
</NavListIcon>

 

보통 이런 식으로 옵션을 설정하면 되는데, 사이즈는 잘 적용이 되는 반면, 색은 그렇지 못했다.     

 

그래서 개발자 도구를 이용해 아이콘의 구조를 확인해 보았다. 

이런 식으로 svg 태그 안에 path 태그가 있었고, 여기에 직접 색상을 적용하면 될 것 같다는 생각이 들었다. 

 

const NavListIcon = styled.div`
  > svg > path {
    color: #fff;
  }
`;

 

그렇게 위와 같이 직접 path에 색상을 적용해 보았고, 그 결과 원하는 대로 리액트 아이콘의 색을 변경할 수 있었다. 

 

 

 

 

 

⑤ 톡캘린더 api를 연결하던 중 400 Bad Request: “{“msg”:“The minimum unit of start_at is 5 minutes.”,“code”:-2}” 를 응답받게 되었다. 시간을 5분 간격으로 설정해야 한다는 것 같긴 한데, 당시 우리가 보냈던 내용은 {start_at: “2023-08-03T15:00Z”, end_at: “2023-08-03T23:59Z”, time_zone: “Asia/Seoul”} 으로 start_at은 이미 5분 간격이었고 (end_at이 5분 간격이 아닌 상태), 공식 문서에 관련 내용이 없어서 확실하게 알기 위해 문의 글을 남겼다. → start_at과 end_at을 5분 간격으로 설정해야 하는 것이 맞다!

 

https://devtalk.kakao.com/t/topic/131000

에러 메시지 확인 부탁드립니다

 

  그렇게 시간을 5분 간격으로 받기 위해 아래와 같이 input 설정을 해주었는데,

 

<input
  type="datetime-local"
  step="300" // 5분(300초) 간격으로 설정
/>

 

어째서인지 step 옵션이 적용되지 않았다. 스택 오버플로우랑 다 찾아봤는데 이게 어느 버전 이후부터 (크롬) 브라우저 자체의 문제인 것 같았다. 그래서 해당 기능을 구현할 수 있는 라이브러리를 찾아 사용하였고, (내가 사용한 것은 datepicker이다) 그 결과 문제를 해결할 수 있었다.