nextJS

4월 한 달 동안 베타 프로젝트를 세팅하고 배포까지 마무리했다. ✏️ 프로젝트 요구사항웹 기반 서비스웹 UI 내에서 카메라를 통해 사진 촬영카카오 맵이나 구글맵이 아닌 자체 제작한 지도 이미지 위에 핀으로 위치를 표시특정 위치에 대한 리뷰 작성 및 좋아요 기능사용자 활동 분석을 위한 Mixpanel 연동🤔 웹에서 카메라 촬영이 된다고?처음에는 웹 UI안에서 카메라 촬영을 할 수 있는 건가 했다..? 찾아보니 가능했고 나는 react-webcam을 활용해서 구현했다.이 라이브러리는 내부적으로 태그를 사용해 카메라 화면을 실시간으로 보여준다.구체적으로는 브라우저가 제공하는 표준 Web API인 navigator.mediaDevices.getUserMedia()를 호출해서 사용자의 카메라 스트림(strea..

Google Cloud 1. Google API Console에서 새 프로젝트 만들기 Google API Console 로 들어가 로그인 후 새 프로젝트를 만든다. 2. OAuth 동의 화면 사용자 인증 정보 들어가기 API 및 서비스 클릭! OAuth 동의 화면에서 User Type은 외부로 설정해 준다.(외부로 설정해야 google 계정이 있는 모든 사용자가 앱을 사용할 수 있다고 한다.) 앱 등록 수정 - OAuth 동의 화면에서는 * (별표시, 필수)만 입력해주고 넘어갔다 범위는 userinfo.email, userinfo.profile을 추가했다. 테스트 사용자를 추가하면 끝이다! OAuth 동의 화면 완성! 3. 사용자 인증 정보 - OAuth 클라이언트 ID OAuth 클라이언트 ID를 생성..

react-quill에서 에러 발생 react-quill을 아래처럼 static import를 하니 에러가 발생했다. import ReactQuill from 'react-quill' import EditorToolbar from '../toolbar/EditorToolbar' ⨯ node_modules/quill/dist/quill.js (7661:11) @ document ⨯ ReferenceError: document is not defined 에러가 발생한 이유는 react-quill가 로드되는 시점에 document가 정의되지 않았기 때문이다. dynamic import를 통해 모듈을 동적으로 import 했다. dynamic import를 사용하면 react-quill을 서버 측 모듈에 포함하..

CORS 에러 발생오늘도 어김없이 CORS에러가 나를 찾아왔다..ㅎㅎ 에러의 원인http://localhost:3000(프론트)에서 https://www.test.co.kr(백앤드)로 요청을 날려서로 다른 Origin이기 때문에 브라우저에서 SOP(동일 출처 정책)에 의하여 차단한 것이다axios.get('https://www.test.co.kr/api/item/diver.gate.php', { params: { searchType: 'REVIEW', sortOption: 'UPDATE', caType: 1, displaySize: 10, },}) CORS란?CORS(Cross-Origin Resource Sharing)는 교차 출처 리소스 공유 정책이다 기본적으로 브라우저가..