choijming21 님의 블로그

오늘은 React를 사용하여 구현한 로그인 컴포넌트에 대해 살펴보겠다. 이 컴포넌트는 회원가입, 로그인, 로그아웃 기능을 모두 포함하고 있어 실제 애플리케이션에서 활용도가 높을 것이다! 다만 supabase 연결하기 전 단계라 데이터 저장은 안된다는 제약이 있다.      시연 영상     1. 현재 구현 상태  현재 이 로그인 컴포넌트는 프론트엔드 로직만을 구현한 상태이다. 실제 데이터베이스나 인증 서비스와의 연동은 아직 이루어지지 않았다. 대신 setTimout을 사용하여 비동기 작업을 시뮬레이션하고 있다.const handleSubmit = (e, action) => { e.preventDefault(); setLoading(true); setTimeout(() => { setLoad..

오늘은 특별한 이야기를 하려고 한다. 바로 일주일 동안 몰두했던 리액트 숙련 과제, '나만의 포켓몬 도감' 프로젝트에 대한 이야기이다.포켓몬 도감 마스터를 향한 7일간의 여정이다. 이번 과제는 단순한 코딩 연습이 아닌, 기능 구현에 심혈을 기울이는 것은 물론이고, CSS 디자인에도 내 창의력을 쏟아부었다. 그 결과, 나름 그럴싸한 포켓몬 도감이 탄생했다!  7일간의 여정이 순탄했던 것만은 아니다. 수많은 오류와 난관에 부딪혔고 좌절도 느꼈다. 하지만 그 모든 과정에 내게는 값진 경험이 되었다. 어떤 문제들을 만났고, 그것을 어떻게 해결해 나갔는지 이야기를 이 블로그에 담아보려고 한다🌟  포켓몬의 세계로의 여행 지금 시작합니다!🚀🌈   # 사진  # 시연 영상시연 영상      🚀 포켓몬 도감 개발..

오늘은 Redux를 이용해서 나만의 todolist를 만들어보겠다! 배포는 netlify를 이용해서 배포하였다.    # 완성본        #시연영상         오늘의 중요한 내용은 Redux를 이용하는 것이니 Redux 코드에 대해서 설명해보겠다! 먼저 크게 순서는 이렇게 진행된다. 1. Redux store 설정2. action 정의3. reducer 생성4. 컴포넌트와 Redux 연결      1. Redux store 설정src 폴더 안에 store 폴더를 만들어서 index.js파일을 생성한 후 store를 생성한다.// 1. store 생성import { createStore } from "redux";// 6. 리듀서 함수 스토어에 연결해주기import todoReducer from "..

오늘은 내가 최근에 과제를 하면서 겪었던 props drilling 문제와 이를 리액트 Context API로 해결한 경험을 공유하려고 한다.  포켓몬들의 데이터를 컴포넌트 간에 주고 받을 때 'props'를 이용해서 과제를 만들고 있었다. props는 데이터를 컴포넌트간 쉽게 전달할 수 있지만 'props-drilling'이라고 불리는 문제가 발생한다. 'props-drilling'이란 데이터를 전달하기 위해 여러 중간 컴포넌트를 거치는 경우를 말한다. 예를 들어, 부모 컴포넌트에서 자식 컴포넌트까지 데이터를 전달할 때, 그 사이에 있는 모든 컴퓨터가 'props'로 데이터를 받아야 할 때가 있다. 이건 코드가 길어지고 복잡해지는 원인이 될 수 있다.  그래서 오늘은 'props-drilling'으로 ..

오늘은 하루만에 Olympic-Medal-Traker를 만들어보았다.    시연 영상이다.     이 작업물은 처음부터 끝까지 내가 스스로 만들어보았다. 중간에 막히는 부분이나 오류부분만 검색해서 해결하였다.과제를 하면서 알게된 부분을 이 블로그에 담아보겠다!      이것은 내 코드의 일부분이다. 여기서는 논리 or 연산자(||)를 사용해보았다.  if (existingCountry) { existingCountry.gold = gold || existingCountry.gold; existingCountry.silver = silver || existingCountry.silver; existingCountry.bronze = bronze || existingCountry..

오늘은 나만의 TodoList를 만들어 볼 것이다. 간단한듯 보이지만 초보인 나에게는 조금 어려웠다!    일단 나만의 투두리스트 완성본이다. 기능구현에 집중하느라 디자인은 간단하게 만들어 주었다. 시연 영상이다.     이제 만드는 과정을 이야기 해보겠다! 복습하는 마인드로 쭉 이야기해보겠다!      먼저, 크게 구조를 잡아주었다. 크게 구조를 잡은 다음 중복되는 부분은 나중에 컴포넌트로 분리해줘도 되니깐 크게 세개의 컴포넌트 구조를 생각했다.  1. App.jsx : 부모 컴포넌트로, input창과 '추가' 버튼이 있는 부분이다.2. TodoBoard: 투두리스트가 보여질 공간이다.3. TodoItem: 투두리스트 중 하나의 투두가 차지하는 공간이다. 이렇게 세개의 컴포넌트로 분리했다.      이..