귀여운 눈높이에서 작성된, 🐰

하루 한 걸음씩, 성장 하는 중 입니다 🫶🏻

2025/05/09 3

리액트 - 회원가입, 로그인 창 구현하기 (백엔드 없이 화면 구현 먼저)

또 한번의 시련 ~ 공부해야지.. 익숙해져야지.. 🐇 로그인 / 회원가입 페이지 UI지금은(처음엔) 백엔드가 없으니, 가짜 데이터를 이용한 UI/UX 설계부터 먼저 해! 4-1. 로그인 UI 흐름const handleLogin = () => { if (email === "test@test.com" && password === "1234") { alert("로그인 성공"); navigate("/"); } else { alert("아이디 또는 비밀번호가 잘못되었습니다."); }}; - 일단은 임시 조건문으로 로그인 성공/실패 처리를 하고, - 후에 Supabase 같은 백엔드 연동 시 실제 인증 로직을 연결하면 돼. 4-2. 회원가입 UI 흐름const..

Studying/React 2025.05.09

리액트 공부하기 - 파일구조

프로젝트를 했을 때 컴포넌트나 페이지의 파일을 어떻게 나뉘어야 하지 ?에 대한 고민이 있었고앞으로 더 다양한 프로젝트를 할 때 관리해야 할 파일이 늘어남에 따라, 효율적으로 직관적으로 파일을 분류해야 할 필요가 생기겠지..어떻게 파일을 나누면 좋을까? 에 대한 정답은 없지만, 우선 리액트 공식 문서에서 권장하는 방식은 아래와 같다. 파일 구조 – ReactA JavaScript library for building user interfacesko.legacy.reactjs.org참고하면 좋을 블로그 [React] 리액트의 폴더 구조프로젝트를 진행하다 보면 크기가 커질수록 관리해야할 파일은 늘어나고 이에 따라 각 파일들을 용도에 맞게 분류해야할 필요가 생깁니다.velog.io 🗂️ 리액트에서 자주 쓰..

Studying/React 2025.05.09

리액트 공부하기 - 전역 상태 vs 로컬 상태

"전역 상태"와 "로컬 상태"는 어디에서, 얼마나 넓게 상태(state)를 공유하고 관리할지에 따라 나뉘는 개념 👩🏻‍💻전역 상태 (Global State)앱 전체에서 공유되는 상태여러 페이지나 컴포넌트에서 공통으로 필요한 정보라면 전역 상태로 관리예: Redux, Zustand, Recoil, Context API 등을 사용해 관리함. ✓ 예시:로그인 여부: 로그인했는지 아닌지는 모든 페이지에서 알아야 함 → 전역 상태유저 정보: 이름, 이메일 등은 여러 페이지에서 필요함 → 전역 상태찜한 영화 리스트: 사용자가 마이페이지든 메인페이지든 언제든 볼 수 있음 → 전역 상태 👩🏻‍💻로컬 상태 (Local State)특정 컴포넌트(또는 페이지) 안에서만 필요한 상태딱 그 컴포넌트 안에서만 사용되고..

Studying/React 2025.05.09