끄적이는 개발노트

이번 포스트에서는 카카오톡 알림톡을 전송해주는 API인 솔라피 사용법에 대해 정리한다. 솔라피를 활용하면 SMS, LMS 등의 서비스도 이용가능하며, 사용법이 매우 간편하다. 1. 사전준비 - 솔라피 회원가입 https://solapi.com/ 세상에서 가장 쉬운 알림톡 문자메시지 플랫폼 - 솔라피 3중 보안으로 안전보장 기존 아이디/비밀번호 방식의 로그인에 더해서 2차 인증 도입으로 해킹 사고로 부터 안전합니다. 발송량에 따라 일일 발송량 제한이 자동으로 조정되어 클라이언트 프로 solapi.com - 카카오톡 채널 개설 및 비즈니스 채널 신청 https://guide.solapi.com/alimtalk/%EC%B9%B4%EC%B9%B4%EC%98%A4%ED%86%A1-%EC%B1%84%EB%84%90..

1. auth module import { Module } from '@nestjs/common'; import { AuthService } from './auth.service'; import { LocalStrategy } from './local.strategy'; import { UsersModule } from '../users/users.module'; import { PassportModule } from '@nestjs/passport'; import { JwtModule } from '@nestjs/jwt'; import { jwtConstants } from './constants'; @Module({ imports: [ UsersModule, PassportModule, JwtModu..

이번 포스트에서는 로그인 구현에서 가장 많이 사용되는 JWT 토큰에 대해 정리한다. 토큰 기반의 인증 시스템은 로그인 토큰을 발급하고, 서버에 요청을 할 때 헤더에 토큰을 담아 유저 인증을 처리하는 방식이다. auth 모듈과 user 모듈은 각각 본인의 프로젝트에 맞게 구성되어 있다는 전제 하에 필요한 코드들만 빼내서 정리한다. 1. 설치 yarn add @nestjs/passport passport passport-local @nestjs/jwt passport-jwt yarn add -D @types/passport-local @types/passport-jwt 2. Jwt strategy auth 디렉토리 레벨에서 strategy 폴더를 만든 후, 아래의 파일을 추가한다. // auth/strate..

이전 포스트에서는 결제모듈을 사용하기 위한 사전준비 작업을 마쳤다. 이어서, Next.js 코드에 적용하는 방법을 정리한다. 1. 아임포트 라이브러리 추가 2. 객체 초기화 const IMP = window.IMP; IMP.init("가맹점 식별코드") 해당 초기화 코드를 Next.js에서 사용하기 위해서는 결제 버튼 클릭 이벤트 안에서 실행하는게 좋다. 3. 결제창 호출 const onPaymentHandler = () => { const IMP = window.IMP; IMP.init("가맹점 식별코드"); const payData: RequestPayParams = { pg: "html5_inicis", // PG사 pay_method: "card", // 결제수단 merchant_uid: `mid..

이번 포스트에서는 프로젝트에 연동했던 결제모듈 아임포트(Iamport)에 대해 정리한다. 1. 포트원(아임포트) PG(Payment Gateway)란? 온라인에서 상품이나 서비스를 결제할 때 우리가 알고 있는 다양한 수단으로 결제 가능하게끔 지원하는 서비스 결제 서비스를 위한 PG사는 이니시스, 다날, 카카오페이, 네이버페이 등 다양한 업체들이 존재하는데, 포트원을 사용하면 PG사 변경에 따른 추가 개발이 필요하지 않아 편리하다. 다만, 포트원은 PG사를 연결해주는 것일 뿐이므로, PG사 심사는 별개로 진행된다. 경험상으로는 1~2주가 소요되었으며, 실제 사용을 위한 필요사항들(ex. 결제약관 등)을 피드백해주며 심사가 진행된다. 2. 포트원 가입 https://admin.portone.io/auth/s..

const FileUpload: NextPage = () => { const [file, setFile] = useState(null); const onFileHandler = (e: React.ChangeEvent) => { if(e.target.files[0]?.size > 5242880) { alert("5MB 이하만 가능!") } else { setFile(e.target.files[0]) } } const onSubmitHandler = async () => { const formData: FormData = new FormData(); formData.append("test", file); await 백엔드 api에 formData 넣어서 태우기 } return ( 선택 ) } 파일 업로드를 ..