1. 분명히 이 경로가 맞는데?! mind-ar의 Target인 target.mind 파일을 public/uploads에 두었다. 그리고 아래의 코드와 같이 작성했다. import path from "path"; const mindarThree = new MindARThree({ container: containerRef.current, imageTargetSrc: path.join("public/uploads", "targets.mind"), // 이 부분을 주목하라! }); console.log를 찍어 보면 분명히 "http://localhost:3000/public/uploads/targets.mind"라고 정확한 경로가 이쁘게 찍히는데 왜 이 경로가 아니라는 걸까??? 2. 클라이언트 컴포넌트에서..

1. 왜 터미널에서만 ReferenceError 에러를 뿜는 거지? Next.js 프로젝트에 mind-ar 라이브러리를 설치한 후 import 하였다. 컴포넌트에서 mindar-image-three라는 모듈을 import 해야 하는데 인식하지 못했다. 그래서 아래와 같이 해당 모듈의 경로까지 작성하였다. import { MindARThree } from "mind-ar/dist/mindar-image-three.prod"; 여기까지는 그럭저럭 잘 넘겼다. 그런데-서버 사이드-터미널에서 "ReferenceError: window is not defined" 에러가 발생했다. 브라우저에서는 아무런 문제없이 화면이 렌더링 되었고 콘솔도 고요했다. 오직 터미널에서만 난리가 났다! 2. 동적 로딩(dynamic ..

이 포스팅은 인프런의 "[손에 익는 Next.js] 공식 문서 훑어보기"를 학습하면서 필요한 내용을 정리한 것이다. 이 강의는 Next.js 13 버전에 대한 것으로서 새로운 라우팅 시스템인 App Router,  서버 컴포넌트(Server Component), 데이터 페칭(Data Fetching), 캐싱(Caching) 그리고 재검증(Revalidating)을 다룬다.1. 문제 해결 과정에서 탄생JavaScript > 복잡한 요구사항, 다양해진 브라우저의 종류 > jQuery > UI 요소들에 사용되는 데이터 관리 어려움 > AngularJS > 양방향 데이터 바인딩이 효과적이었지만 프로젝트가 크고 복잡할수록 복잡도가 급격하게 증가 > React.js > 단반향 바인딩으로 복잡한 문제 해결했지만 CS..

1. canvas에서 base64 데이터를 다룰 때 만난 TypeError 에러 react-camera-pro를 이용해 캡처한 이미지를 base64 데이터로 받을 수 있었다. 캡처한 이미지를 mind-ar에서 Target으로 사용하기 위해 compile 하는 과정에서 다음과 같은 에러가 발생했다. Uncaught (in promise) TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLCanvasElement or HTMLImageElement or HTMLVideoElement or ImageBitmap or Offscree..

1. Next.js에서 Web Wokrer 사용 방법은 JavaScript와 다소 차이가 있었다! mind-ar을 이용해 웹 AR을 프로젝트를 구현하고 있다. 단말기에서 촬영한 Target 이미지를 Compile 하는 기능을 구현하면서 Web Worker를 만났다. 웹 워커는 JavaScript에서 백그라운드 스레드에서 코드를 실행할 수 있게 해주는 웹 기술이다. 웹 워커를 사용하면 메인 스레드와 별도로 백그라운드에서 CPU 집약적인 작업을 처리하거나 긴 작업을 분리하여 웹 애플리케이션의 반응성을 향상할 수 있다. 따라서 Target 이미지를 Compile 하는 것과 같은 무거운 작업은 웹 워커로 처리하는 것이 적합한 것이다. 문제는 기존의 코드가 JavaScript로 되어 있는데 Next.js로 가져와..

일반적으로 회사 홈페이지의 경우 문의하기 폼을 제공한다. 이 기능을 구현하기 위해서는 별도의 백엔드 서버와 DB가 필요한데 구글 스프레드시트를 이용하면 간편하게 구현할 수 있었다. 원리는 간단하다. 작성된 정보를 받을 구글 스프레드시트를 준비하고 홈페이지 HTML 소스 form 태그의 class 속성에 "gform"을 추가하고 action 속성에 구글 스프레드시트에서 제공받은 URL을 추가하면된다. 이렇게 하면 form에서 사용자가 메시지를 작성 후 submit하게되면 구글 스프레드시트에서 사용자가 작성 내용을 확인할 수 있다. 참고 자료 https://velog.io/@qhflrnfl4324/Contact-Me-%EB%A9%94%EC%84%B8%EC%A7%80-%EB%B3%B4%EB%82%B4%EA%B..

이 글은 2023년 웹 개발교육 WEB TECH SEMINAR의 강의를 학습하고-개인적으로 중요하다고 생각한 부분을-정리한 내용이다. 1. Next.js 개발 환경 구축하기(1주차) 😉 1주차 강의 링크 1.1. a태그와 SPA a태그는 기본적으로 페이지를 새로고침하기 때문에 SPA의 이점을 살릴 수 없다. 따라서 a태그 대신 Link를 이용하면 된다. 😉 a태그가 페이지를 새로고침하는 것을 확인하는 방법: 콘솔에서 로그 찍은 상태에서 a태그 클릭, 로그가 사라지면 페이지가 변경된 것임을 알 수 있다. 😉 vscode에서 ul, li 태그 자동 생성 : ul>li 1.2. JSX JavaScript + XML XML 안에 {}로 자바스크립트 표현식을 작성할 수 있다. 1.3. 천 단위 구분 기호 cons..

인프런의 "아는 만큼 보이는 크롬 개발자 도구(제주코딩베이스캠프)" 강의 내용을 정리한 것이다. Ctrl + Shift + C : 요소 선택 활성/비활성 (개발자 도구 활성화 상태) Ctrl + Shift + d : 개발자 도구 창 분리/병합 (개발자 도구 활성화 상태) Ctrl + Shift + p : 실행 > (명령어 입력) 눈금자 요소 탭 (태그 선택) h : 요소 숨기기/보이기 (태그 선택) 마우스 우클릭 > HTML로 수정 > 코드 선택/복사 Ctrl + f : 문자열 검색 스타일 탭 우선 순위로 인해 활성되지 않은 스타일, 주석 처리된 스타일도 모두 볼 수 있다. element.style에 스타일을 작성하면 선택된 태그에 인라인 스타일을 지정할 수 있다. 색상 선택 도구 색상값 얻기 : 스타일..