프론트 회원기능은 components 폴더의 user폴더의 AuthModal파일에서 전부 작성되고 있습니다. 로그인과 회원가입을 위한 상태 관리실시간 유효성 검사전화번호 인증 코드 발송 및 검증서버와의 API 통신으로 인증 처리로그인 성공 시 Recoil을 사용해 글로벌 상태 관리리코일을 통해서 백엔드에서 했던 세션을 통해 받아왔던 내용을 상태관리를 통해 세션을 통한 isAuthenticated을 true값을 받아와서 인증처리를 적용할 수 있습니다. userAtoms.jsxexport const authState = atom({ key: "authState", default: { isAuthenticated: false, isLoading: false, showAuthModal: fa..

우선 프론트 코드를 보기전에 설계부터 알아보겠습니다. 우선 상태관리를 해주기 위해 리코일을 이용하여 state폴더안에  이런식으로 나눠서 관리를 해주기로 하였습니다.https://codingbasics.tistory.com/314 리코일이란1. Atom의 본질Recoil의 핵심은 Atom입니다. Atom은 Recoil 상태 관리 시스템에서 가장 기본적인 단위로, React 애플리케이션 내에서 전역 상태를 관리하는 컨테이너 역할을 합니다.Atom의 특징초기값:Atomcodingbasics.tistory.com 지금 회원가입을 하기 위해서는 userAtoms.jsx 파일을 보면import { atom } from "recoil";export const authState = atom({ key: "authS..

1. Atom의 본질Recoil의 핵심은 Atom입니다. Atom은 Recoil 상태 관리 시스템에서 가장 기본적인 단위로, React 애플리케이션 내에서 전역 상태를 관리하는 컨테이너 역할을 합니다.Atom의 특징초기값:Atom은 기본값(default)을 가지며, 이는 빈 깡통에 첫 번째로 채워지는 내용과 같습니다.초기값은 상태가 아직 설정되기 전의 기본 상태를 정의합니다.예를 들어, 로그인 상태 관리라면 isAuthenticated: false, 사용자 정보는 비어 있는 문자열이나 null로 설정됩니다.상태 저장소:Atom은 React 컴포넌트들 간의 데이터를 공유하기 위해 사용됩니다.여러 컴포넌트에서 Atom을 구독할 수 있으며, 한 곳에서 상태를 업데이트하면 모든 구독 컴포넌트가 동일한 값을 공유..

우선 로그인 기능을 이용해서 접근 제어를 할 수있는 방법은 세션 기능과 JWT토큰을 이용하는 방법들이 있습니다. 1. 세션 기반 인증이란?작동 방식사용자가 로그인하면 서버는 세션을 생성하고, 세션 ID를 클라이언트의 쿠키에 저장합니다. 이후 요청마다 클라이언트는 이 세션 ID를 서버에 보냅니다. 서버는 세션 ID를 확인해 사용자를 인증합니다.흐름로그인 요청사용자가 ID와 비밀번호를 서버에 보냅니다.서버에서 세션 생성서버는 사용자가 맞는지 확인한 후, 고유한 세션 ID를 생성하고 이를 저장합니다.(예: Session ID: abc123)세션 ID를 클라이언트에 전달클라이언트는 서버로부터 받은 세션 ID를 쿠키에 저장합니다.인증된 요청클라이언트는 요청을 보낼 때마다 쿠키에 저장된 세션 ID를 서버에 보냅니다..

각 테이블 구조는 이런식으로 되어있습니다.usersid (PK), username, password, email, full_name, phone_number, created_at, reset_password_token, reset_password_expiryrestaurantsrestaurants_id (PK), restaurants_name, address, phone, opening_hours, rating, spicy, sweet, sour, salty, food_type, image, latitude, longitude, category, food_menureviewsid (PK), username, contents, date, rating, restaurant_id (FK), author_id ..

1. CORS가 대체 뭐길래?CORS(Cross-Origin Resource Sharing)는 서로 다른 도메인 간 요청을 허용하거나 차단하는 규칙입니다.동일 출처 정책(Same-Origin Policy)브라우저는 기본적으로 보안 때문에 **동일 출처(Same-Origin)**가 아닌 요청을 차단합니다. 여기서 동일 출처란, URL의 스키마(프로토콜), 도메인, 포트 번호가 모두 같아야 한다는 뜻입니다.예시프론트엔드: http://localhost:3000백엔드(API 서버): http://api.example.com이 경우, 두 URL의 도메인이 다르기 때문에 브라우저는 보안상 요청을 차단합니다. 하지만 우리는 보통 이런 요청을 허용해야 하죠. 여기서 CORS가 등장합니다!2. CORS가 필요한 이유C..