1. OAuth가 아닌 자체 인증 인가 로그인 기능을 구현하고 싶은데...? 소셜로그인 기능을 활용하는 OAuth가 아닌 자체적으로 인증하고 인가하는 로그인 기능을 구현하고 싶었다. NextAuth는 OAuth 뿐만 아니라 Credentials라는 기능을 제공해 자체적인 인증, 인가도 구현할 수 있다. 그런데 App Router에 적용하는 방법에 대한 자료는-아직까지는-잘 보이지 않았다. 그러다가 아주 유용한 튜토리얼을 발견하게 되었다. 2. App Router에서 NextAuth Credentials를 이용한 자체 인증 인가 로그인 구현 아래 링크는 App Router에서 NextAuth를 이용한 로그인 구현 튜토리얼 1편이다. NextAuth 사용법 1편 - Setup, Credentials : ht..

1. 페이지가 변경되었는데 왜 이전 페이지의 클릭 이벤트가 작동하는 거지??? Next.js에 mind-ar 라이브러리를 적용해 AR 기능을 구현하고 있다. 이미지를 컴파일한 특정 타깃이 사용자의 단말기(스마트폰 등)에서 스캔되면 3D 모델이 화면에 렌더링 된다. 이 모델에 addEventListener를 이용해 클릭 이벤트를 주었고 잘 동작하였다. 하지만 기대 이상으로 동작한 덕분에 다른 페이지로 이동 후에도 계속 동작하는 문제가 생겼다. 단, 페이지를 새로 고침(F5)하면 클릭 이벤트가 사라진다. 2. addEventListener를 혹시 body에 적용한거임? 여러 에러들이 그렇지만 막상 해결하고 나면 어디에 말하기도 부끄러운 문제들이 많다. 이번에도 그랬다. 애초에 addEventListener를..

이 내용은 유튜버 제로초님의 Next.js 13 App Router를 이용한 X.com 클론코딩 동영상 강의(2023년) 내용을 실습하면서-나름대로-정리한 글이다. 1. Next.js 장점 권한 설정을 App Router 미들웨어로 쉽게 할 수 있게 되었다. CSR의 경우 클라이언트에서 자바스크립트 코드를 다운로드하여야 한다는 측면에서 성능상 불리할 수 있다. 반면 SSR은 서버에서 완성된 html을 보내주기 때문에 유리한 성능을 낼 수 있다. 하지만 그만큼 서버 부담이 증가하기 때문에 Next.js에서 캐시를 적극적으로 활용한다. 2. 클론코딩 2.1. 클론코딩의 장점 우수한 서비스를 소스로 만드는 것을 경험할 수 있다. 정말 귀찮아서 안하고 싶은 기능을 핑계 대지 않고 경험할 수 있다. 하기 싫어도 ..

1. "Can't resolve 'encoding'..." 경고 프로젝트 실행 중(npm run dev) 뿐만 아니라 빌드 시에도 계속해서 표출되었던 경고 메시지이다. 프로젝트의 실행은 특별히 문제 되지 않았지만 비정상적인 상태이므로 해결이 필요했다! ⚠ ./node_modules/node-fetch/lib/index.js Module not found: Can't resolve 'encoding' in '(생략)\node_modules\node-fetch\lib' 2. encoding 의존성 설치로 간단 해결! 위 경고는 프로젝트 종속성에서 encoding이 누락되었기 때문에 발생한 것이다. 따라서 아래의 명령어로 종속성을 설치하면 잠잠해진다. npm i encoding 참고 자료 https://too..

1. Vercel에서 Next.js 배포 중 만난 첫 에러 ㅠ 1.1. root 디렉토리 관련 에러 첫 Next.js 프로젝트를 스마트폰에서 테스트해 보기 위해서 Vercel에서 배포를 진행해봤다. 이번 프로젝트에서는 웹 AR이 킬러 콘텐츠였기 때문에 단말기의 카메라 제어가 필수이다. 카메라는 보안 문제로 http에서는 제어가 불가하고 https에서만 가능하다(단, 카메라를 탑재하고 있는 노트북을 이용해 개발할 때 로컬에서의 제어에는 http라도 문제없다). Vercel에서 배포하면 https는 기본으로 적용된다. 또한 깃허브와 연동되어 있어 푸시만 해도 변경내용이 자동으로 빌드된다. Vercel의 편리한 기능 덕분에 간편하게 배포가 될 거라 생각했는데-개인적 경험으로는-꼭 그렇지는 않았다. [그림 1]..

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

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 ..