choijming21 님의 블로그

내가 맡은 부분은 작성폼 페이지이다! 오늘은 작성폼 페이지 기능구현에 대해서 블로그를 써보겠다.          1. 상태 관리일단 상태관리는 useState 훅을 사용하여 폼데이터를 관리한다. 각 입력 필드에 대한 상태를 하나의 객체로 관리하고 있다.const [formData, setFormData] = useState({ storeName: '', image: null, address: '', region: '', rating: '', review: ''});     2. Context 사용PostContext를 통해 전역 상태를 관리하고 있다. 이를 통해 게시물 목록을 업데이트할 수 있다.const { posts, setPosts } = useContext(PostContext);   ..

오늘은 알고리즘 코드카타 문제를 풀어보겠다~~!!요즘 팀프로젝트 때문에 바빠서 알고리즘 문제를 풀었어도 블로그에 올리지 못했다ㅜㅜ     Q. 약수의 개수와 덧셈두 정수 left 와 right 가 매개변수로 주어집니다. left 부터 right 까지의 모든 수들 중에서, 약수의 개수가 짝수인 수는 더하고, 약수의 개수가 홀수인 수는 뺀 수를 return하도록 solution 함수를 완성해주세요. 1 ≤ left ≤ right ≤ 1,000 leftrightresult131743242752  다음 표는 13부터 17까지의 수들의 약수를 모두 나타낸 것입니다.수약수약수의 개수131, 132141, 2, 7, 144151, 3, 5, 154161, 2, 4, 8, 165171, 172 따라서, 13 + 14 ..

뉴스피드란?뉴스피드(Newsfeed)는 소셜 미디어나 콘텐츠 폴렛폼에서 사용자에게 최신 정보나 업데이트를 실시간으로 보여주는 기능을 말한다. 페이스북이나 인스타그램의 홈 화면을 떠올리면 된다.     오늘은 리액트 첫 팀프로젝트이다. 바로 뉴스피드를 만드는 것이다. 내가 팀장이라서 떨린다.......>_  뉴스피드 기능을 사용해 우리 8조는 맛있는 경험을 다른 사람들과 공유하고, 새로운 맛집을 발견할 수 있는 플랫폼을 만들 것이다. 사용자들이 올린 최신 맛집 리뷰, 추천, 사진 등이 실시간으로 업데이트되어 피드 형태로 보여지게 된다. 이를 통해 사용자들은 다른 사람들의 맛집 경험을 쉽게 확인하고, 새로운 맛집 정보를 빠르게 얻을 수 있게 된다!     기획안1. 와이어 프레임피그마를 사용하여 대략적인 와..

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

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

Q.  정수를 저장한 배열, arr에서 가장 작은 수를 제거한 배열을 리턴하는 함수, solution을 완성해주세요. 단, 리턴하려는 배열이 빈 배열인 경우엔 배열에 -1을 채워 리턴하세요. 예를 들어 arr이 [4, 3, 2, 1]인 경우 [4, 3, 2]를 리턴하고 [10]이면 [-1]를 리턴합니다.  제한 조건arr은 길이 1이상인 배열입니다.인덱스 i, j에 대해 i ≠ j 이면, arr[i] ≠  arr[j] 입니다. 입출력 예arrreturn[4, 3, 2, 1][4, 3, 2][10][-1]   function solution(arr) { if(arr.length num !== min ); return newArr;} 함수의 동작 방식:먼저 배열의 길이가 1 이하인지 확인하..

오늘은 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'으로 ..

호버(hover)란?호버는 마우스 커서를 특정 요소 위에 올려놓은 상태를 말한다. 사용자 인터페이스에서 중요한 상호작용 방식 중 하나로, 추가 정보를 제공하거나 시각적 피드백을 주는데 자주 사용된다.    CSS에서는 ":hover" 의사 클래스(pseudo-class)를 사용하여 호버 효과를 구현한다. 이를 통해 요소에 마우스를 올렸을 때의 스타일을 정의할 수 있다. 아래는 호버 효과 예시이다..hover-button { padding: 10px 20px; background-color: #3498db; color: white; border: none; cursor: pointer; t..

먼저 React의 CRUD에 대해 알아보겠다.  CRUD 란?CRUD는 리액트를 사용하여 기본적인 데이터 운영 기능을 구현하는 것을 말한다. 다음 네 가지 기본 데이터베이스 운영을 나타낸다.Create(생성): 새로운 데이터를 만들고 추가하는 기능Read(읽기): 기존 데이터를 조회하고 표시하는 기능Update(갱신): 기존 데이터를 수정하는 기능Delete(삭제): 기존 데이터를 제거하는 기능           오늘은 TodoList에 Update를 추가해보겠다!업데이트에 필요한 요소는 Read(현재 값을 가져와야 함)와 Create(현재 값 위에 덮어 씌어야 함)이다.   forEach와 map의 차이 forEach :forEach는 배열을 순회하면서 각 요소를 처리하지만, 새로운 배열은 반환하지 않..