뼈빌런 블로그

- 변수 용도로 사용하는 hook- 사용법const [변수명, set변수명] = useState(초기값)- 컴포넌트 최상위 레벨에서만 호출 가능- 반복문이나 조건문 안에서 호출 불가 (그렇게 쓰고 싶다면 새 컴포넌트 안에서 사용하고 컴포넌트를 호출하는 방식으로 사용)- set 함수는 반환값이 없음- set 함수에 함수를 값으로 넣는 것은 불가(화살표 함수(() =>)로 감싸서 전달은 가능은 함) - 초기화 예시function MyComponent() {  const [age, setAge] = useState(28);  const [name, setName] = useState('Taylor');  const [todos, setTodos] = useState(() => createTodos());}- ..

전체소스 코드 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 깔짝? 다 깊이있게 다룬 것은 아니고 회사의 필요에 따라 배우고 그에 맞게 그냥 쓴 것 같다. (솔직히 커리어 측면에서 좋은 건 아닌 것 같다. 잡탕 느낌이랄까...) 예전엔 깊이 팠을 수도 있는데 이젠 다 까먹었다. 어떤 인터넷 글에서 본 것 같은데 무슨 프레임워크 배우는 시간을 줄이고 그 아래에 있는 ..

여러 자바 버전을 동시에 설치하면서 유동적으로 변경할 수 있는 프로그램 jenv 1. brew를 통한 jenv 설치 $ brew install jenv $ echo 'export PATH="$HOME/.jenv/bin:$PATH"' >> ~/.zshrc $ echo 'eval "$(jenv init -)"' >> ~/.zshrc $ source ~/.zshrc 2. brew를 통한 설치 가능한 JDK 확인 여기서는 Java 11, 17 버전 설치 $ brew search jdk ==> Formulae openjdk openjdk@17 jd cdk openjdk@11 openjdk@8 mdk ==> Casks adoptopenjdk microsoft-openjdk sapmachine-jdk adoptope..

느낌 상으로는 Template Method 패턴의 확장팩 버전 같다. 인스턴스 생성할 클래스(Product)와 생성시켜주는 클래스(Factory)의 형태를 미리 정의(abstract)해놓고 하위 클래스에서 둘 다 구현시켜줌. 이 때, Template Method 패턴과 동일하게 생성되는 과정(예: 각종 옵션 값에 따라서 생성되는 인스턴스를 달리해주고 생성된 인스턴스 고유번호를 어디에 저장하고 등등..)은 클래스(Factory)에서 구현되어 있음. 다시 간단하게 설명하면 제품과 공장 및 제품 생성 구조(뼈대)는 이미 구성되어 있고 나머지는 하위 클래스에서 모두 구현한다고 보면 된다. // 제품 frame public abstract class Product { public abstract void prin..