퀴즈앱 7

expo 모달 사용해보기

오늘은 모달을 사용해봅시다. 모달 · 네이티브 반응 (reactnative.dev) Modal · React NativeThe Modal component is a basic way to present content above an enclosing view.reactnative.dev여기에 잘 나와있어용! 저는 따로 빼서 base모달을 만들어뒀습니다, import { View, Modal, StyleSheet } from "react-native";import React from "react";interface BaseModalProps { isOpen: boolean; onClose: () => void; children?: React.ReactNode;}export default functio..

퀴즈앱 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..

퀴즈앱 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..

뉴비개발자의 퀴즈앱 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..

퀴즈 앱 백엔드부터 시작하기(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..