프로젝트 개요기간: 2024.05 ~ 2024.06 (약 4주)주제: 동네 이웃과 함께 나누는 식재료 및 공동 장보기목표: 이전과 다른 이웃과의 소통 문제 완화 및 늘어난 1인가구에 대응하는 식재료 나눔 플랫폼역할: 팀원, UI 디자인, DB 모델링, 채팅 시스템 구현, 3D 나눔함 페이지 구현배포 : https://www.sik-share.com/기술 스택Frontend: Next.js, TypeScript, react-three/fiber, shadcn-ui, tailwind css,Backend: postgreSQL, Prisma, Node.js, Next.js기획 의도와 주제 선정 과정이전까지는 뭔가를 만드려고 할때 단순히 편리한 것이나 하고 싶은것에 집중했다면, 이번에는 조금 더 사회적으로 가치..

1. 배포된 URL이번에는 githubio를 사용해서 배포를 진행했습니다.https://harang-dev.github.io/Poke-Dict.io/ Poke-Dict harang-dev.github.io클라우드 타입과 다르게 따로 건들지 않아도 24시간 동작합니다 ㅎㅎ2. 어려웠던 점 & 아쉬웠던 점이전에는 useInfiniteQuery를 사용해서 무한스크롤만 구현했었습니다.이번에는 포켓몬의 상세한 정보까지도 알기 쉽게 하고 싶었는데, 처음에 제가 요청한 엔드포인트에서는 한글로 반환을 해주지 않았습니다.그래서 구글링 및 여러 가지 엔드포인트를 건드리다 보니 어떤 조건의 맞는 값을 반환하는 코드를 작성할 수 있었습니다.const koreanNameObj = (await axios.get(`${API}/p..

1. 프로젝트 소개프로젝트 소개: 포켓몬 목록을 불러와 화면에 무한 스크롤로 표시하는 애플리케이션입니다. React와 React Query, Ant Design, Styled-components를 사용해 데이터를 비동기적으로 가져오고, 화면을 스크롤할 때마다 포켓몬 목록을 추가로 로드합니다.목표: Poke API에서 데이터를 가져와 무한 스크롤 기능을 구현하고, React Query를 통해 효율적인 데이터 fetching을 학습합니다.2. 기술 스택 및 환경사용한 기술:React: UI 구성 및 상태 관리React Query: API 요청과 상태 관리Styled-components: 스타일링Ant Design: UI 구성 요소useInView: 화면에 들어온 요소만 렌더링하여 성능 최적화개발 환경:VSC..

※ youtube의 코딩알려주는 누나 영상을 참고하였습니다 ! ※ 1. 프로젝트 소개간단하게 무한스크롤(Infinity-Scroll) 구현을 해보았습니다. 유튜브의 코딩알려주는누나의 영상을 참고하여 만들어 보았습니다.영화 데이터를 기반으로 한 무한 스크롤 영화 리스트를 구현한 프로젝트입니다. React와 React Query를 활용하여 데이터를 불러오고, 사용자가 스크롤할 때마다 새로운 페이지를 불러오는 기능을 구현했습니다. 특히, useInfiniteQuery를 사용하여 페이지네이션을 처리하고, react-intersection-observer로 화면에 영화 목록이 보일 때마다 데이터를 추가로 불러오도록 했습니다.2. 기술 스택 및 환경사용한 기술: React, styled-components, Rea..

1. 프로젝트 소개간단한 To-Do List 앱을 React와 JavaScript로 구현한 프로젝트입니다. 이 프로젝트에서는 특히 props를 제대로 이해하고 사용하려는 목표를 가지고 진행하였습니다.2. 기술 스택 및 환경사용한 기술: React, styled-components개발 환경: VSCode3. 프로젝트 기능 설명핵심 기능: 할 일을 추가하고, 완료한 일정은 삭제할 수 있도록 할 수 있습니다.UI/UX:사용자는 할 일을 입력하고, 등록 버튼을 누르면 해당 항목이 목록에 추가됩니다.완료된 일정을 삭제 버튼을 통해 제거할 수 있습니다.4. 코드 설명App.js: useState로 상태를 관리하여 할 일 목록을 저장하고, 사용자가 입력한 값을 처리합니다. AddItem 함수로 할 일을 추가하고, R..