naver Maps를 사용한 프로젝트를 만들며 배포를 먼저 시도했을 때 해당 에러를 마주하게 되었다. 2. 문제 인지 및 해결 배포 시 환경변수도 추가를 해줬기에 문제가 일어나는 부분은 네이버 클라우드측이라 확신했고, 역시 네이버 클라우드에 도메인을 추가해주지 않아서 발생한 에러였다. 네이버 클라우드에서 Web 서비스 URL 부분에 배포한 주소를 넣어줘 저장 후, 다시 도메인으로 돌아가 새로고침을 하면 정상 동작하는 것을 확인할 수 있다.

localhost에서 작동하던 google signin 기능이 vercel 배포 후 에러가 발생하는 것을 발견했다. //에러 내용 FirebaseError: Forebase: Error (auth/unauthorized-domain). 에러 내용에서 도메인 관련된 내용이 들어있는 것을 보니 firebase 도메인 설정과 연관이 있을거라 판단했다. 에러 해결 방법 1. firebase 프로젝트에 들어간다 2. Build > Authentication으로 들어간다. 3. settings에서 승인된 도메인을 클릭 후 배포 주소를 추가해준다. 이후 배포된 주소로 접속 후 정상 동작하는지 확인하면 된다.

며칠 전 detail tag와 custom data와 state를 사용한 간단한 기능을 만들었다. 기존엔 토글 버튼의 열고 닫힘이 자유롭게 이뤄졌는데, 하나의 토글이 열리면 나머지 토글은 닫히는 기능이었다. 너무 간단했고, 또 실제로 금방 만들어냈지만 한 가지 문제가 발생했다. details 태그에 state를 사용하는 경우 open 특성이 state와 반응하도록 구현했는데 한 번 함수가 실행되고 나서야 두번째에 정상 작동하는 것이었다. 해당 오류를 해결하기 위해 리서치한 결과, 나와 같은 문제를 겪은 개발자를 발견했고, 해답을 얻을 수 있었다. 해결 detail tag의 기본 동작으로 벌어진 문제 1️⃣ 사용자가 details 태그 요소를 클릭했을 때 onClick 이벤트가 동작히고 state가 fal..

tsx 파일명 변경 후 import를 하는 부분에서 error가 발생했다. 해당 에러는 tsconfig.json의 옵션 중 forceConsistentCasingInFileNames를 false로 만들어줘 해결 가능하다.

유튜브 프로젝트 배포 후 확인해보니 영상이 아예 나오질 않았다. Mixed Content라는 이름의 에러로 브라우저 자체적으로 안전하지 않은 콘텐츠라 여겨지면 차단을 시켜줬기 때문이다. 해당 에러는 친절하게 이유를 설명해주었다. HTTPS로 불러오고 있지만 영상의 src를 HTTP로 받아오려고 한 것이 이유였다. 영상 코드 중 iframe의 src에서 http -> https로 수정해주는 것으로 오류 해결이 가능하다.

class 내부에서 private 함수로 통신 부분 코드 작성을 하던 중 발생한 오류. 해결 방법 tsconfig.json에서 es5로 설정이 되어있다면 es6로 수정해준다.

이전 회사에서 채팅 서비스를 개발하며 겪었던 오류가 떠올라 작성하게 되었다. 주변에서도 나만 유일하게 겪은 오류이기에 기억에 남는다. 기존 채팅 서비스는 Socket IO를 기반으로 운영되고 있었고 나 또한 Socket IO를 이용한 개발을 하고자 했다. 하지만 웹소켓 연결 이슈로 1주 하고도 3일을 소모하며 불필요한 작업 지연이 발생하게 되었고 팀장님과 데브옵스분, 백엔드분과 모여 회의한 결과 이건 AWS 문제로 보여진다는 결론을 내렸다. 해당 이슈에 대해 이해를 하기 위해선 HTTP의 통신 구조에 대해 먼저 알 필요가 있다. 일반적으로 HTTP 통신은 단방향 통신으로 클라이언트에서 HTTP 요청을 요청하면 서버는 요청에 대한 응답을 내려주고 끝난다(= 단방향성) 기존의 서버 통신에서는 클라이언트 서버..

next.js로 만든 개인 프로젝트를 배포하기 위해 로컬에서 빌드를 해봤고, 용량은 무식하게 높았지만 빌드는 완료되었기에 vercel을 이용하기로 결정 후 곧장 배포 단계를 밟았다. 하지만 수많은 오류에 봉착했고, 정말 머리가 30가닥도 넘게 빠질 정도로 스트레스를 받아가며 오류를 해결하기 위한 시도들이 있었다. 놓쳤던 부분 나의 경우엔 node - 16버전, next- 9버전, 그리고 여러 라이브러리들을 사용했다.(next-redux-wrapper, chart.js등) 하지만 vercel로 빌드에 들어갈 때부터 새빨갛게 물든 화면을 볼 수 있었다. 여기서부터 환상의 삽질이 시작되었다. error:0308010C:digital envelope routines 이 에러의 의미를 아무리 찾아봐도 나오질 않았..