뼈빌런 블로그

전체소스 코드 https://github.com/kimfame/next-s3 이전 아이디, 패스워드 기반 로그인 포스트에 이어서 https://bonevillain.tistory.com/31 구글 로그인을 추가를 해보았다. 사전 진행사항 1. Google Clould Platform에서 프로젝트 생성 2. OAuth 동의 화면 (OAuth consent screen) - 앱 이름, 사용자 지원 이메일, 개발자 연락처 정보 입력 (필수값) - 구글 로그인 진행하면서 보여줄 동의 화면 꾸미는 과정있음 3. 사용자 인증 정보 (Credentials) - Authorised redirect URIs 필드에 http://localhost:3000/api/auth/callback/google 추가 필수 - 이 부분..

Next.js AWS S3 이미지 업로드 테스트 소스코드 https://github.com/kimfame/next-s3 S3 버킷 설정을 직접 테스트하면서 겪었던 내용을 정리 목표 : 한 IAM 계정으로만 S3 버킷 내 이미지 Read, Write 권한 얻기 && 그 외 버킷 접근은 모두 차단 Next.js S3 파일 업로드 유튜브 강의들을 보면서 공부하는데 권한을 기본적으로 public access를 허용하여 교육 진행하는 것을 보았다. 다른 presigned URL(제한된 시간 안에만 해당 URL을 통해 파일 접근 가능) 유튜브 강의도 그렇고 대부분 편의상 그렇게 하는 것 같다. 아무래도 업로드할 파일명을 생성할 때, 적당히 긴 랜덤 문자열이라서 다른 이미지 파일에 접근하기 힘들기도하고 유튜브 교육용..

[Next.js] AWS S3 이미지 업로드 예제 (1) 글에서 소스 수정 전체 소스 https://github.com/kimfame/next-s3/tree/825116b3274bc549f67e3661e54bde836f725a34 패키지 설치 yarn add @aws-sdk/s3-request-presigner S3 이미지 업로드 API에서 코드 추가 /src/app/api/upload/route.js import { GetObjectCommand, PutObjectCommand, S3Client, } from '@aws-sdk/client-s3' import { getSignedUrl } from '@aws-sdk/s3-request-presigner' import { NextResponse } fro..

전체 소스코드 https://github.com/kimfame/next-s3/tree/37e1bfa31cbb54c87aecad1b1bc0e09f0a57c388 사전 작업 $ yarn add @aws-sdk/client-s3 uuid @aws-sdk/client-s3 : AWS SDK S3 uuid : UUID 생성 (랜덤 이미지 이름 생성 목적 / uniqid 사용해도될 듯) 환경변수 /.env.local AWS_REGION= AWS_ACCESS_KEY_ID= AWS_SECRET_ACCESS_KEY= AWS_S3_BUCKET_NAME= 환경변수 추가 및 외부 이미지 호출 설정 /next.config.mjs /** @type {import('next').NextConfig} */ const nextConf..

전체 소스코드 https://github.com/kimfame/next-login 사전 작업 mongodb DB 생성 (https://www.mongodb.com/) 패키지 설치 $ yarn add next-auth mongoose bcrypt - next-auth : Next.js 로그인 인증 관련 라이브러리 - mongoose : mongodb ODM (RDBMS 상의 ORM 같은 거) - bcrypt : 암호화 라이브버리 (비밀번호 단방향 암호화 때 사용) .env 설정 MONGODB_URI NEXTAUTH_URL NEXTAUTH_SECRET User 모델 (mongoose) /src/models/User.js import { model, models, Schema } from 'mongoose' ..

프로젝트 생성 공식문서 $ npx create-next-app@latest yarn 사용 시 $ yarn create next-app [프로젝트명] 프로젝트 옵션 (개인적으로 듣는 유튜브 강의에 맞춰서 사용) ✔ Would you like to use TypeScript? … No / Yes (Typescript 사용 여부) ✔ Would you like to use ESLint? … No / Yes (ESLint 사용 여부) ✔ Would you like to use Tailwind CSS? … No / Yes (TailwindCSS 사용 여부) ✔ Would you like to use `src/` directory? … No / Yes (src 폴더 사용 여부) src 폴더 사용 / 사용 시, sr..

퇴사를 하고 백수된 겸 Next.js 연습을 해보려고 한다. 대학교를 졸업한 이후로 IT 관련 동아리, 각종 인턴, 이직, 이직, 이직... 하면서 참 별걸 다 만져본 것 같다. IT 관련 동아리 활동에서는 PHP 방학 인턴과 졸업 프로젝트 때는 Spring 계약직 인턴 때는 ASP.NET MVC 정규직 직장 다니던 때는 Spring, Django (Django Rest framework), React 깔짝? 다 깊이있게 다룬 것은 아니고 회사의 필요에 따라 배우고 그에 맞게 그냥 쓴 것 같다. (솔직히 커리어 측면에서 좋은 건 아닌 것 같다. 잡탕 느낌이랄까...) 예전엔 깊이 팠을 수도 있는데 이젠 다 까먹었다. 어떤 인터넷 글에서 본 것 같은데 무슨 프레임워크 배우는 시간을 줄이고 그 아래에 있는 ..