1. 왜 prisma에서 DB 테이블 연동이 안 되는 걸까? Next.js 프로젝트에 prisma ORM을 적용하여 작업 중이다. 새로운 모델(CouponSetting)을 만들었다. // prisma/migrations/schema.prisma // (생략) model CouponSetting { id Int @id @default(autoincrement()) //(생략) } 변경된 내용을 적용하기 위해 마이그레이션 명령어를 실행하였다( 에 로그를 위한 마이그레이션 명을 임의로 작성). npx prisma migrate dev --name // 마이그레이션 생성 (npx prisma migrate dev 명령 입력, 엔터 후 이름을 작성해도 된다.) 변경된 모델에 맞게 Prisma Client를 재생성..

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

1. 코테 문제 풀다가... 프로그래머스 코테 문제 "소수 만들기"를 풀이하고 있었다. 나의 경우 동일한 문제를 파이썬과 자바스크립트로 각각 풀이해오고 있다. 이 문제를 해결하기 위해 주어진 숫자가 소수인지를 판별해야 해서 소수 판별을 위한 함수를 정의하였다. 해당 파이썬 코드는 다음과 같다. # 소수 판별 - 파이썬 def is_prime_num(n): for i in range(2, n): if n % i == 0: return False return True 인자로 들어온 숫자가 소수이면 True, 아니면 False를 리턴하는 파이썬 문법의 함수인데, 자바스크립트에서 for문을 이용하지 않고 작성하고자 하였다. 😉 소수는 1보다 큰 자연수 중 1과 자기 자신만을 약수로 가지는 수다. 2. every..

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

1. 홈 화면에 반응형 레이아웃이 필요한데... 진행 중인 Next.js 프로젝트의 홈 화면에는 대표 이미지, 대표 문구, 그리고 가입 및 로그인 버튼이 있다. PC화면과 모바일 화면에 모두 대응해야 하는 상황이다. module css를 사용하고 있어서 미디어쿼리를 직접 작성하려다가 일단 구글링을 해보기로 했다. 그런데 이렇게 알잘딱깔센 한 포스팅이 있누! 2. 모듈 CSS에 간단하게 적용하고 싶어 검색하다가 어썸한 발견! 아래의 참고 자료는 flex를 이용한 반응형 레이아웃에 대해 잘 정리해 놓았다. 중간 중간 삽입된 움직이는 삽화로 해당 코드의 결과를 한눈에 확인할 수 있어 친절하다! 아래 코드는 미디어 쿼리를 사용하지 않는 반응형 레이아웃 구현 방식인데 깔끔하다! flex-basis 속성을 유의해서..

1. 파비콘을 적용해야 하는데, 흠... 안드로이드 스마트폰의 크롬 브라우저에서 배포한 웹앱을 '홈화면추가'를 통해 홈화면에 아이콘을 생성해 보았다. 그런데 기대와 달리 못난(?) 아이콘이 적용되었다. 생각해 보니 누구 탓도 아닌 내 탓이었다. 파비콘을 적용한 기억이 없었기 때문이다. 이젠 문제와 원인을 알았으니 파비콘을 적용하면 되는데, 디자인된 ico 파일도 가지고 있지 않아서 고민이 되었다. 그러다가 검색을 통해 어썸 한 서비스를 만나게 되었다. 2. 놀라운 RealFaviconGenerator! "All browers, All platforms, Your favorite technologies" RealFaviconGenerator사이트의 홈 화면에 걸려있는 슬로건(?)이다. 뭔가 거창해 보여 '..

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

1. 이미지 파일을 저장하려고 하는데... mind-ar 라이브러리를 이용해 증강 현실 콘텐츠를 제공하는 프로젝트를 개발하고 있다. 타깃 이미지를 사용자 단말기의 카메라로 스캔하면 3D 모델 캐릭터가 렌더링 되어야 한다. 타깃 이미지는 사용자 단말기의 카메라로 촬영도 가능하지만 단말기의 저장소에 있는 이미지를 업로드도 가능하도록 구현하고 있다. Node.js에서 파일을 업로드할 때 multer라는 라이브러리를 사용했었다. Next.js 13의 App Router로 프로젝트를 진행하고 있는데 여기에서도 multer를 사용해야지라고 생각하고 시도했는데 Route Handlers를 이용한 API에서는 express의 라우터 설정 방법과 달라 코드의 변경이 필요했다. 2. fs.writeFile을 이용해-외부 ..