creamymood의 개발 공부 발자취 💭

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

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

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

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

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

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

리액트 공부하기 - 환경변수, .env 파일

미니 프로젝트에서 api사이트에서 패치 하고 데이터 받아오기 위해, key 값이 필요했는데 그걸 .env 파일에 넣고 .gitignore에서 관리 해줘야 한다는 사실을 망각.. 보안과 관련된 것이니, 특히 주의 해서 다루어야 한다!환경변수란?환경변수는 운영체제나 실행 환경이 프로그램에 전달해주는 설정값이에요.예를 들면:데이터베이스 주소API 키서버 포트 번호개발 모드인지 배포 모드인지이와 같은 내용을 담는 변수 쉽게 예를 들면…우리가 자주 가는 카페에서,네이버 로그인을 쓸 때마다 API Key가 필요하죠?이걸 코드에 직접 박아두면 위험해요. (누가 복사해서 쓰거나 유출될 수 있음)그래서 이런 값들은 .env 같은 환경변수 파일에 저장해두고,필요할 때만 꺼내 쓰는 것 .env 파일:VITE_API_KEY..

리액트 공부하기 - custom hooks? 그냥 함수 차이?

custom hooks를 공부하며 헷갈리게 된 또 기본 개념- 다시 짚고 갑시다.우선 훅(hook)이 뭘까. 리액트(React)에서 **훅(Hook)**은 함수형 컴포넌트에서 **상태(state)**나 라이프사이클(lifecycle) 같은 리액트 기능을 사용할 수 있게 해주는 특별한 함수야.예전에는 클래스형 컴포넌트에서만 상태 관리나 라이프사이클 처리를 할 수 있었는데, 훅이 도입되면서 함수형 컴포넌트에서도 똑같은 기능을 사용할 수 있게 된 것 ___ : 이 부분이 핵심!내가 만드는 훅스라.. 뭔가 그냥 컴포넌트랑 다를게 없잖아 ? 싶었다. 더보기아주 좋은 질문이야, Jane!"그냥 컴포넌트로 만드는 거랑 커스텀 훅으로 만드는 거랑 무슨 차이냐?" 차이를 간단하게 정리해볼게. 핵심 차이: 컴포넌트는 U..

리액트 공부하기 - debounce, throttle (디바운스, 스로틀)

오 생각보다 재밌잖아 . . ?뭔가 실용적인 거라 그런가 .. ? 또욘님 . . 제가 공부해서 알려드릴게욤 기다료~ 🩷scroll, input, mousemove 같은 이벤트는 짧은 시간 간격으로 연속해서 동작하는데이러한 이벤트에 바인딩한 이벤트 핸들러는 과도하게 호출되어, 성능 저하와 관련된 문제를 일으킬 수 있다. 따라서 이렇게 짧은 간격으로 연속해서 발생하는 이벤트를 그룹화 해서 과도한 호출을 방지하는,💖최적화와 관련이 있는 💖debounce와 💖throttle.debounce와 throttle은 이벤트 처리에 매우 유용하며, 구현 시에는 타이머 함수가 사용 된다. 1. Debounce짧은 시간 간격으로 이벤트가 연속해서 발생하면(예를 들어 인풋창에 글 쓰기) 일정 시간이 경과한 후, 이벤..

🎬 현재 선택된 영화 제목을 저장하고, 변경할 수 있는 앱기본 영화 제목은 'Inception'버튼을 누르면 'Interstellar'로 바뀜큰 흐름 : [ 상태 정의 ] → [ 저장소 만들기 ] → [ 앱에 연결 ] → [ 상태 보여주기 & 바꾸기 ] movieSlice store.js index.js App.js1. movieSlice.js : 상태를 어떻게 바꿀지 설정하는 그 컴포넌트 코드인 (movieSlice.js)를 먼저 작성해주고// src/features/movie/movieSlice.jsimport { createSlice } from '@reduxjs/toolkit';// slice를 정의할 때 'movie'라는 이름으로 상태와 액션을 정의con..

공부하다보니, useState는 거의 이제 이해한 것 같아서 편리한데, 전역으로 상태관리 하려면.. context API가 제일 간단하고 쉬워보여서, 이것만 쓰고 싶은데... (리덕스 싫어..) 그런데 역시나 장단점이 있다. 전부 공부하고 적재적소에 써야 할 듯. ~ .. 야호 ~우선 제일 좋아하는 context API를 자세히 알아보자.더보기리액트에서 전역 상태 관리를 할 때 Context API는 가장 기본적이고 간단한 방법 중 하나예요. 특히 앱이 작거나 중간 규모일 때는 굳이 Redux나 Zustand 같은 외부 라이브러리를 쓰지 않아도 되고, Context + useReducer 조합만으로도 충분히 효율적인 구조를 만들 수 있어요.✓Context API의 장점간단하고 가볍다: 외부 라이브러리 설..

JSON을 개념적으로 강의를 들을 땐 그렇구나. 그냥 이런 개념이구나 하고 이해는 하고 넘어갔는데..막상 프로젝트에서 직접 사용하려고 해보니, 그냥 대충 알아서는 도저히 써먹을 수 없겠더라. 다행인건 대략적으로 개념을 공부했었던 기억이 있으니, 다른 강의나 교재를 보니아~ 이게 이거구나. 이래서 이걸 쓴 거구나 했다. 그 땐 왜, parse를 쓰고 stringipy? 이런건 대체 왜 쓰고 했나 했는데 그 때 메모해둔 것들이 지금 보니 다시 새롭고, 이유가 있었네 ~ 싶다. 이렇게 하나 하나 익숙해져가고 쓸 줄 아는 느리지만 천천히 잘 되어 가고 있단 증거 ! 이미 알았지만(?) 정말 머리에 이제 박힌 개념으로는우선 JSON이란건 문자열.. 이지만, 보이는 건 객체처럼 보인다는 것. 따라서..비동기 함수..

프로젝트를 경험하다가, 분명 vs code나, 화면에는 오류가 안뜨는데..렌더링이 안된적이 있었다.아마, 패치 받아오는 과정에서.. 받아오기 전에, 먼저 그 값을 사용하는 걸 적어놔서 그런것 같다.패치 쓸 때는 조건부 렌더링 꼭 적어주기.... 💥 오류는 없는데 화면이 안 나오는 이유?조건부 렌더링이 없어서 "silent fail"이 발생하는 것! 예시: movie가 아직 API 로딩 중이면 undefined.title이 돼서 아무것도 안 보이고, 콘솔에만 warning 날 수도 있고, 심지어 warning도 안 뜨는 경우가 많아.특히 VS Code가 잡아주지 않는 이유는, 타입이 any나 undefined까지 허용되기 때문 (JS는 느슨해서)해결 방법: 조건 넣기예시 1: movie 존재 여부 먼저 ..