1. AR 물고기 두 마리가 겹쳐 보이는 현상?! Next.js에서 mind-ar 라이브러리를 이용해 웹 AR을 구현하고 있다. 카메라에 Target 이미지가 들어오면 물고기 3D 모델이 렌더링 되도록 하였다. 다행히도 잘 렌더링 되었는데 물고기 상태가 좀 이상하다. 파들 파들 떠는 것 같기도 하고 영화 매트릭스나 사이버펑크에서 봤던 화면 지직 거리는 것 같기도 한 현상이 발생했다. 2. 원인은 useEffect 2회 호출 문제 원인은 useEffect 훅이 2번 호출되는 문제 때문이었다. 일전에 html에서 테스트했던 코드에서는 이런 현상이 없었던 점, react에서 로 설정되어 있는 경우 useEffect가 2회 호출된다는 것을 알고 있었다. 그래서 Next.js에서도 유사한 현상일 거라 생각했고 역..

이 글은 유데미의 "클린코드 자바스크립트" 강의 내용(섹션 7: 객체 다루기)을 정리한 것이다. 1. Shorthand Properties ES2015 이후로 Shorthand Properties 덕분에 키와 값으로 이루어진 속성들을 축약할 수 있다. 1.1. CSS에서도 비슷한 것이 있다! 아래의 코드를 통해 CSS attribute가 축약되는 것을 보자! before는 after와 같이 축약될 수 있다. .before { margin-top: 5px; margin-right: 5px; margin-bottom: 5px; margin-left: 5px; } .after { margin : 5px, 5px, 5px, 5px; } 1.2. JavaScript 객체의 축약! 아래의 코드는 축약하기 전의 코드..

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로 가져와..

이 글은 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..