둥글게 둥글게

✨ 회원 프로필 수정 결과물 https://www.youtube.com/watch?v=x3kbfRrf0AM&list=PLR8FoyenzZ0W097_SdzTomj8VL4s6R_nY&index=11 🥬 회원 프로필 수정 💡 회원가입 시 지정한 '닉네임' 재설정 및 찜리스트에서 화면 표시 💡 회원가입 시 지정한 '비밀번호' 재설정 및 재로그인 🌽 onSubmit 함수 const onSubmit = async (e: FormEvent) => { e.preventDefault() setdisplayNameUpdate(true) // displayName 업로드 . . // password 업로드 . . setdisplayNameUpdate(false) } ✅ 닉네임과 패스워드 재설정을 위해 form을 사용하여 함..

✨ 음식 랜덤 추천 결과물 https://www.youtube.com/watch?v=Kwm4SSAPePU&list=PLR8FoyenzZ0W097_SdzTomj8VL4s6R_nY&index=10 🥑 음식 랜덤 추천 💡 랜덤 추천을 위한 상태값 기본 설정 💡 Math.random() 함수를 통한 난수 생성 🫑 상태값 기본 설정 const [randomFoods, setRandomFoods] = useState(null) ✅ 음식의 정보를 받기 위해 filteredData type으로 설정해 주고, 배열로 받음 🥬 음식 검색 캐치 useEffect(() => { if(filteredFood.length === 0) { randomFoodList() } else { setRandomFoods(null) } },..

✨ 테마 기능 추가 결과물 https://www.youtube.com/watch?v=EcK13z1zv7E&list=PLR8FoyenzZ0W097_SdzTomj8VL4s6R_nY&index=9 🥒 Light & Dark 모드 테마 변경 💡 Context API를 통해 테마 기능 코드 구현 💡 localStorage 이용하여 새로고침 시, 현재 적용되어 있는 테마 적용 💡useContext()를 통해 색 변경이 필요한 각 파일에 적용 🌽 상태값 기본 설정 const [isDarkMode, setIsDarkMode] = useState(() => { const localTheme = localStorage.getItem('theme') return localTheme ? JSON.parse(localTheme..

✨ Project 식단어때(How-about-the-diet) 🥦 깃허브 주소 : https://github.com/YouJin-Cho/how-about-the-diet 🥑 유튜브 주소 https://www.youtube.com/watch?v=A6v4SUv-TAo&list=PLR8FoyenzZ0W097_SdzTomj8VL4s6R_nY&index=1 📌 Project '식단어때' 🥒 소개 “건강하게 먹자!” “똑똑하게 먹자!” 내가 먹는 음식이 어디에 좋은지는 알고 먹어야지? 현재 다양한 건강식이 생기면서 소비자가 건강을 챙기며 똑똑하게 먹자는 인식이 강해지고 있습니다. 하지만 대부분 음식을 섭취할 때, 무조건 몸에 좋다고만 생각해 어떤 영양소가 들었는지 확실하게 모른 채 섭취하는 경우가 많습니다. ’식단..

💁‍♀️ 온라인 쇼핑몰을 만들어보자! 간단한 아이템을 판매하는 쇼핑몰을 만들어보고자 한다. 온라인 쇼핑몰에서 흔히 볼 수 있는 테마 변경, 모달 창, 검색 창 등의 기능을 넣어 구현해보고자 한다. ✨ 결과물 💡 오픈 API를 통해 상품 가져오기 (상품 category page, 상품 detail page) 💡 테마 (Dark & White) 변경 기능 💡 상품 검색 기능 💡 캐러셀 구현 💡 BreadCrumb 구현 💡 @media 쿼리를 통해 모바일 화면 구현 💡 기타 기능 (헤더 고정, 모달 창 구현, 별점 구현, localStorage 공간 활용 등) 💜 vite로 react 프로젝트 생성 npm create vite 프로젝트명 --template react-ts ✅ CRA보다 속도가 빠른 VITE를..