Web Framework & Library 8

[Spring Boot] Could not move temporary workspace 오류 해결 (feat. V3)

Could not move temporary workspace라는 오류가 계속 발생했다. gradle의 버전 문제래서 다운그레이드도 해봤고, 캐시 폴더도 지워봤는데 해결되지 않았다.완전히 같은 프로젝트와 같은 자바 버전으로 실행한 노트북에서는 정상적으로 되었는데 왜 회사 컴퓨터에서는 안되는지 원인을 몰라 며칠을 헤맸다.의외로 원인은 V3 실시간 검사 때문이었다. V3를 열어 오른쪽 위 톱니바퀴를 누른다. 실시간 검사 사용 의 체크박스를 해제하고 밑의 확인 버튼을 누른다. Spring Boot 프로젝트로 돌아와서 .gradle 폴더를 삭제한다.빌드 섹션에서 Sync Gradle Project (동기화 버튼)을 클릭해서 다시 빌드해본다.이제 제대로 빌드되었음을 확인할 수 있다.

[React+Android Studio] 모바일 앱으로 카메라 사용하기

※ React Native가 아닌 React.js로 모바일 앱을 구현하는 과정을 담았습니다.학교에서 리액트+안드로이드 스튜디오 웹뷰를 활용해 안드로이드 앱을 만들 일이 생겼다. 나는 여기서는 프론트엔드를 담당했다.이 글에서 다룰 요구사항을 간단히 적어보면 아래와 같다.(기능적) 카메라로 QR 코드를 스캔하여 해당하는 URL로 리다이렉트되게 해야 함(비기능적) 모바일 브라우저, 자체 모바일 애플리케이션에서 모두 실행 가능해야 함처음에는 이게 리액트 네이티브를 안 쓰고 가능한 걸까 싶었는데,react-webcam이 기본적으로 모바일 카메라도 지원을 해줬기 때문에 크롬 모바일 앱에서 정상적으로 실행이 되는 걸 확인할 수 있었고, jsqr이라는 라이브러리를 통해 카메라에 잡힌 QR 코드를 인식하게 하는 것이 가..

[Next.js] NextAuth + sendmail 을 이용한 메일 인증 기반 회원가입 기능 구현 --- (2) NextAuth 설정

NextAuth.js는 Next.js 애플리케이션들을 위한 오픈소스 인증 솔루션이다.Google, Kakao 등 많은 서드파티 서비스들을 쉽게 연계할 수 있게 해주고, Prisma 등 각종 ORM에 대한 지원도 잘해주는 툴이다.나는 서드파티 fetch 없이 순수 이메일 가입 + Prisma + MySQL 형식으로 구현했다.1. NextAuth 설치아래 명령어를 사용해 NextAuth 및 Prisma 관련 패키지를 설치한다.npm install next-auth @prisma/client @auth/prisma-adapternpm install prisma --save-dev  2. app/api/auth/[...nextauth]/route.js 작성그 다음엔 api/api/auth/[...nextauth..

[Next.js] NextAuth + sendmail 을 이용한 메일 인증 기반 회원가입 기능 구현 --- (1) Introduction

위 플로우 차트와 같은 회원가입 절차를 Next.js에서 구현하고자 했다.관건은 3가지이다.Next.js에서 인증 기능 구현을 어떻게 할 것인가메일 인증은 어떻게 받을 것인가개인 정보 입력 시 메일 인증을 받은 사람과 그렇지 않은 사람을 어떻게 구분할 것인가 각각에 대해 아래와 같은 해결법을 찾았다.1. Next.js에서 인증 기능 구현을 어떻게 할 것인가-> NextAuth라는 Next.js용 인증 라이브러리 사용2. 메일 인증은 어떻게 받을 것인가-> Sendmail 이라는 리눅스 프로그램을 사용하여 SMTP 서버 구축3. 개인 정보 입력 시 메일 인증을 받은 사람과 그렇지 않은 사람을 어떻게 구분할 것인가-> 메일 인증을 받지 않은 사람은 개인 정보 입력 페이지로 넘어갈 수 없게 하고자 한다.데이터..

[NextAuth] 유저 id 불러오기

문제 상황사진같은 스키마 때문에 User.id를 참조할 일이 생겼다.근데 서버측에서 아무리 session을 불러와도 name, email, image만 불러와지고 id가 작성이 안 됐다.해결법getServerSession 대신 getToken으로 id 불러오기import { NextResponse } from 'next/server';import { PrismaClient } from '@prisma/client';import { getServerSession } from 'next-auth';import { authOptions } from '../../auth/[...nextauth]/route';import { getToken } from 'next-auth/jwt';const prisma = ne..

[Next.js] 기초 정리 2 (레이아웃, 라우팅 심화 등)

유튜브 강의https://www.youtube.com/playlist?list=PLC3y8-rFHvwjOKd6gdf4QtV1uYNiQnruI 를 보며 정리한 내용입니다.레이아웃페이지는 기본적으로 header, content, footer로 구성된다.이 컴포넌트는 페이지 간의 공통 레이아웃을 정의하는 데에 사용되는데, 레이아웃 컴포넌트가 렌더링될 때 자식 페이지를 포함할 수 있도록 반드시 children prop을 받아야 한다.이러한 레이아웃을 적용하기 위해, 폴더 안에 layout.tsx 파일을 만들면 된다. layout.tsx 파일에서는 children prop을 통해 렌더링될 자식 페이지를 받아와서 레이아웃의 특정 위치에 그 자식 페이지를 렌더링하게 된다. 이 방법으로 각 페이지가 공통 레이아웃을 공..

[Next.js] 기초 정리 1 (시작~라우팅 관련)

유튜브 강의https://www.youtube.com/playlist?list=PLC3y8-rFHvwjOKd6gdf4QtV1uYNiQnruI 를 보며 정리한 내용입니다.Next.js란React + production이 바로 가능하게 라우팅, 최적화 렌더링, 데이터 fetching, 번들링, 컴파일링 등 지원왜 Next.js를 사용하는가Next.js는 아래와 같은 기능들을 지원함으로써 프로덕션을 위한 웹 애플리케이션을 간단히 빌드할 수 있다.1. 라우팅2. API 루트3. 렌더링4. 데이터 fetching5. 스타일링6. 최적화7. 개발 및 배포 빌드 시스템 // SSR 말하는 건가?Next.js 사용 시 전제 조건HTML, CSS, JavaScript 기반ES6 + featuresReact 기반Next...

[Next.js] sh: 1: next: not found 에러

이슈Ubuntu 서버에 특정 디렉토리 내 하위 디렉토리들을 주기적으로 삭제하는 cron을 등록해놓았는데, 실수로 하위 디렉토리만 삭제한다는 조건을 안 넣어서 상위 디렉토리들까지 싹 다 날아갔다.그래서 구축해놨던 CI/CD 파이프라인 및 Next.js 프로젝트가 통째로 삭제됐다. 주기적으로 Miniconda가 삭제되는 문제도 있었는데 전부 cron 스크립트가 원인이었다. ㅠㅠ 그나마 데이터베이스 계정에 이런 실수를 저지른 건 아니라 다행이다.코드 백업은 윈도우에 해두고 있었기 때문에 다시 git 서버를 구축하고 post-receive 훅을 등록하니 CI/CD는 빠르게 해결됐고, Next.js 프로젝트도 다시 옮길 수 있었다.폐쇄망이라 급하게 다른 우분투 서버에 프로젝트를 옮기고, npm install & ..