분류 전체보기 28

퀴즈앱 9일차 이메일 인증( + OTP식으로 구현)

자 오늘은 저번에 깜박한 회원가입 성공 후, 이메일 인증을 구현해봤습니다! 우선 저는 중복되는게 보여서 Form에 사용되는 styles 코드를 따로 빼서 아래처럼 파일로 옮겨서 사용했습니다.import { StyleSheet } from "react-native";import { BASE_COLOR } from "../constants/color";export const formStyle = StyleSheet.create({ form: { flex: 3, justifyContent: "flex-start", }, submitButton: { backgroundColor: BASE_COLOR.LIGHT, padding: 20, borderRadius: 15, alig..

퀴즈앱 8일차 (+ 머리가 안돌아가는 날..)

오늘은 좀 뻘짓을 많이 했네요 ㅠㅠ머리가 안돌아가는 날도 있는거죠. .ㅎㅎ 자 오늘은 로비를 간단하게만 만들어봤습니다. 이런 느낌으로 해봅시다. 우선 헤더를 만들었어요!일단 헤더에는 아이콘 박스 까지를 헤더로 잡았어요. 아이콘이 들어갈 이미지가 필요할거예요. 전 일단 gpt에게 부탁해서 만들어봤어용!그리고 이미지를 사용하려면 expo-image 설치해줘야 한다네요! 같이 설치해봅시다.npm i expo-image 사용법은 아래 사이트에 잘 나와있습니다. Image - Expo Documentation ImageA cross-platform and performant React component that loads and renders images.docs.expo.dev 전체 코드를 보여드릴게요!impo..

퀴즈앱(7일차) 회원가입, 로그인(+로컬 백엔드 사용하기)

오늘은 어제 만든 로그인을 테스트해보겠습니다. axios로 로컬로 백엔드랑 연결해볼게요 우선 axios를 설치합니다. npm i axios 일단 지금은 간단하게만 axiosInstance를 만들어볼게요 import axios from "axios";export const axiosInstance = axios.create({ baseURL: "http://localhost:3000", headers: { "Content-Type": "application/json", },});axiosInstance.interceptors.request.use(async (config) => { return config;});axiosInstance.interceptors.response.use(async ..

퀴즈앱 6일차

오늘은 간단하게 디자인중입니다. 디자인에 자신이 없기 때문에 인터넷의 도움을 받아봅시다. 우선 아래 링크에서 원하는 색상조합을 골랐습니다. 색상 팔레트: #850F8D #C738BD #E49BFF #F8F9D7 - 컬러 헌트 (colorhunt.co) Color Palette: #850F8D #C738BD #E49BFF #F8F9D7 - Color HuntDiscover the newest hand-picked color palettes of Color Hunt. Get color inspiration for your design and art projects.colorhunt.co  다음으로는 아래 사이트에서 우주관련된 이미지를 받아왔습니다. 20+ 우주 사진 및 이미지 [HD] | Unsplash에서..

퀴즈앱 5일차(Expo router 사용법)

오늘은 이력서 수정한다고 시간을 많이 사용해서 간단하게 expo 설치 및 router 사용해보기로 했습니다~ 앱을 만드는데 react-router-dom 처럼 사용할 수 있지 않을까 해서 찾아보니 Expo router가 있다고 하네요! 우선 expo먼저 설치해줍니다. npx create-expo-app@latest --template 저는 Blank (typescript) 로 설치했습니다. expo go 앱을 통해 테스트 해봅니다. npm run start 이제 라우터를 설치해봅시다. 참고로 아래 링크에 잘 나와 있습니다! Install Expo Router - Expo Documentation Install Expo RouterLearn how to quickly get started by creati..

퀴즈앱 백엔드 4일차 (cogntio, 코드 재전송, 비밀번호 찾기)

아무래도 모든 과정을 블로그에 쓰다보니 개발 속도가 너무 느려지는 것 같아서 개발 먼저하고 블로그 쓰는 형식으로 가게 될 것 같습니다. 오늘은 우선 나머지 cognito에서 사용되는 이메일 인증 코드 재전송, 비밀번호 찾기(코드요청하기), 비밀번호 재설정하기 정도 개발 해보겠습니다. 전체 코드가 필요하신 분들은 아래 링크로 이동해주세요.SiWooJinSeok/Quiz-Galaxy-Planet-BackEnd (github.com) 이메일 인증 코드 재전송하는 기능부터 시작해봅시다. 서비스 코드입니다. // @aws-sdk/client-cognito-identity-provider에서 임포트 하면 됨async resendConfirmEmail(EmailDTO: EmailDTO) { const { ema..

뉴비개발자의 퀴즈앱 3일차 스웨거 만들기!

안녕하세요 뉴비개발자입니다. 오늘은 스웨거를 만들어 볼까 합니다. 보통 이런 건 nest 공식문서에 많이 있습니다.검색해도 나오지만 아래 링크를 둘게요!OpenAPI (Swagger) | NestJS - A progressive Node.js framework Documentation | NestJS - A progressive Node.js frameworkNest is a framework for building efficient, scalable Node.js server-side applications. It uses progressive JavaScript, is built with TypeScript and combines elements of OOP (Object Oriented Progra..

백엔드 퀴즈앱 2일차! cognito 로그인, 회원가입, 이메일 인증 간단 구현!

저는 auth 모듈, 서비스, 컨트롤러를 만들겠습니다.아래처럼 차례대로 터미널에 입력하시면 됩니다.// g = generate, co = controller, s = service, mo = module로 사용해도 됨.nest g co auth nest g s authnest g mo auth 혹시 저처럼 이렇게 되는 분이 계시면 귀찮지만 파일 생성할 때마다터미널에 아래처럼 입력해주시면 됩니다.npm run format 자 이제 코드를 작성해봅시다. auth 폴더 안에 설치한 친구들이 있습니다. 우선 controller부터 해봅시다.참고로 auth.controller.spec.ts는 jest인 테스트 코드입니다.import { Controller, Post } from '@nestjs/common';im..

aws cognito 생성하기

오늘은 aws cogntio를 생성해 봅시다. 우선 aws의 로그인 해서 congito 탭에 들어갑니다. 그럼 아래처럼 보일 겁니다.  우측 상단에 지역을 잘 체크해주세요. 지역마다 사용자 풀을 생성할 수 있어서 참고 해주세요. 이제 사용자 풀 생성 버튼을 눌러주세요.   그럼 이렇게 뜰겁니다.  저는 이메일만 사용할 거라 이메일만 체크해줍니다. 다음 버튼을 누르고  저는 간단한 앱을 만들거여서 암호요구는 간단하게 가겠습니다.  멀티 펙터 인증은 없이 가겠습니다. 나머지는 그대로 하고 다음을 누릅니다. 전 3단계도 따로 설정해줄게 없으니 다음을 누릅니다.  저는 cognito를 사용해서 메일을 보내도록 하겠습니다. 사용자 풀 이름을 짓습니다.  저는 클라이언트 보안키를 생성하지 않겠습니다. 고급 앱 클라..

퀴즈 앱 백엔드부터 시작하기(1일 차)

시작하기(1일 차)chatGPT를 이용하여 이름 짓기추천 해 달라고 해서 사용 중이지 않은 이름으로 추천 받음. 개인적으로 맘에 드는 이름을 발견Quiz Galaxy Planet : 퀴즈 은하 행성 - 다양한 퀴즈가 있는 거대한 은하 같은 공간을 의미합니다.Quiz Galaxy Planet로 결정!ERD 설계하기아래 링크로 들어가 설계할 수 있음.https://www.erdcloud.com/ ERDCloudDraw ERD with your team members. All states are shared in real time. And it's FREE. Database modeling tool.www.erdcloud.com 간단하게 아래처럼 설계함.(처음 설계해서 이상할 수 있음)nest + prisma..