전체 글(85)
-
회원관리 - Part2 로그인 with JWT 토큰
로그인 기능은 사용자가 이메일과 비밀번호를 입력하면 서버에서 이를 확인하고, JWT(JSON Web Token)를 발급하여 인증을 수행합니다. JWT 토큰을 사용하여 현재 로그인된 유저 정보를 가져오는 방법도 함께 다룹니다.필요 개념 설명 JWT 토큰이란?JWT(JSON Web Token)는 JSON 객체를 사용하여 양쪽 간에 정보를 안전하게 전송하기 위한 컴팩트하고 자가 포함된 방식입니다. JWT는 주로 인증 및 정보 교환에 사용됩니다. 다음과 같은 세 가지 주요 부분으로 구성됩니다:Header : 토큰의 유형과 해싱 알고리즘을 정의합니다.Payload : 토큰의 주된 데이터가 포함됩니다.Signature : Header와 Payload의 무결성을 확인하기 위해 사용됩니다.프론트엔드 : 로그인 페이지..
-
회원관리 - Part1 회원가입
회원가입 과정에서는 사용자가 이메일, 비밀번호, 닉네임 등의 정보를 입력하고, 이 정보를 데이터베이스에 저장합니다. 데이터베이스 스키마 모델 - users 테이블model users { user_id Int @id @default(autoincrement()) email String @unique password String nickname String profile_image String @default("default_image_url") isInitialSetupComplete Boolean ..
-
Next.js와 Prisma를 이용한 데이터베이스 연결 및 관리
Pisma란?프리즈마(Prisma)는 ORM(Object-Relational Mapping) 도구로, 데이터베이스와 상호작용하는 것을 단순화하고 타입 안전성을 제공하는 TypeScript 및 Node.js 프로젝트에서 사용되는 라이브러리입니다.프리즈마는 데이터베이스 스키마를 정의하고, 타입안전성에 도움이 됩니다.프리즈마 사용 방법1. 프리즈마 설치npm install @prisma/clientnpm install prisma --save-dev 2. 프리즈마 초기화프로젝트 루트 디렉토리에서 프리즈마를 초기화하여 기본 설정 파일을 생성합니다.npx prisma init생성되는 설정 파일prisma>schema.prisma : 데이터베이스 스키마를 정의하는 파일.env : 데이터베이스 연결 문자열을 포함하는..
-
PicShare WepApp 데이터베이스 구조 정리
1. ERD 2. 데이터 CRUD 회원관리회원가입const registerMember = (newMember) => { kuwazawa_memberDB.push(newMember);};회원 정보수정const updateMemberInfo = (userKey, userInfo) => { kuwazawa_memberDB.child(userKey).update(userInfo);};회원 탈퇴const deleteMember = (userKey) => { kuwazawa_memberDB.child(userKey).remove();};로그인const loginMember = () => { kuwazawa_memberDB.on("value", (snapshot) => { const membersObj ..
-
검색 기능 - 회원 검색(닉네임으로 검색), 피드 검색(해시태그로 검색, 날씨 및 장소 정보로 검색)
검색 기능은 사용자가 ID로 회원을 검색하거나, 해시태그, 날씨 및 장소 정보로 피드를 검색할 수 있도록 도와줍니다. 이를 위해 Redux 설정, 검색 컴포넌트 작성, 그리고 필요한 유틸리티 함수들을 작성합니다.1. Redux 설정 1-1 모든 회원 목록 fetch - Redux Slice: 회원 상태 관리import { createSlice } from "@reduxjs/toolkit";import axios from "axios";const serverUrl = import.meta.env.VITE_API_URL;const memberSlice = createSlice({ name: "member", initialState: { user: null, // 현재 로그인한 사용자 정보 us..
-
좋아요 기능 - Part2 좋아요 리스트
특정 피드를 좋아하는 유저 목록과 내가 좋아하는 피드 목록을 보여주는 기능을 구현합니다.프론트엔드 1. 좋아요 유저 목록 모달 (LikedUsersModal)// LikedUsersModal 컴포넌트const LikedUsersModal = ({ likedUsers, onClose }) => { return ( e.stopPropagation()}> 좋아요 누른 사용자 {likedUsers.map((user) => ( {user.userNickname} ))} 닫기 );};export def..