공부/프로젝트 (16) 썸네일형 리스트형 [팀 프로젝트] 방콕스타일 - 검색 기능 구현 (Debounce) Debounce란? 📖 연속적으로 발생한 이벤트를 하나로 처리하는 방식입니다. 마지막으로 실행된 함수만을 실행합니다. 예를 들어 input에 `hello`를 타이핑하려고 할 때 콘솔을 출력해 보면hhehelhellhello이렇게 한 글자씩 출력이 되는 걸 확인할 수 있습니다. 반면, Debounce delay시간을 1초로 설정할 경우 1초 동안 기다렸다가 화면에 반영하기 때문에 여러 번 출력되지 않습니다.hello 프로젝트 적용 📖useDebounce 커스텀 훅 사용import React, { useEffect, useState } from "react";const useDebounce = (value, delay = 200) => { const [debounceValue, setDebounceVa.. [팀 프로젝트] 방콕스타일 - 좋아요 기능 구현 좋아요 기능 구현 이유 ✨사용자 참여 유도`좋아요` 버튼을 통해 간단한 클릭만으로 콘텐츠에 대한 피드백을 제공할 수 있고 댓글 작성보다 간편해 사용자들이 자주 상호작용할 수 있게 만들기 위해 구현을 하기로 결정했습니다. 구현 📖 `getAllData`메서드를 비동기로 실행해 게시물 데이터를 가져옵니다.const response = await getAllData() `supabase`에서 데이터를 가져올 때 posts 테이블과 likes 테이블을 조인해 사용자가 좋아요를 누른 게시물에 대한 정보를 함께 가져와 반환합니다.const getAllData = async () => { try{ // 전체 게시글 데이터 가져오기 const response = await supabase .f.. [팀 프로젝트] 방콕스타일 - 더보기 기능 구현 더보기 기능 추가 이유 ✨사용자 경험 개선모든 게시물을 한 번에 보여주는 것으로 진행을 했었는데 한 화면에 많은 데이터를 보여주게 되면 사용자가 부담을 느낄 것 같다는 생각을 했습니다. 그래서 `더보기`버튼을 추가해 사용자가 원할 때 더 많은 게시물을 볼 수 있게 하여 가독성을 높였습니다. 구현 📖 화면에 보여주는 데이터보다 전체 데이터가 더 많으면 `더보기`버튼 활성화 하는 방식으로 구현했습니다.// 더보기 클릭 const handleLoadMore = () => { const postDisplay = debounceValue ? filteredSearchTermData(LIMIT_NUMBER, filteredPosts, displayedPosts) : filteredDisp.. [개인 과제] 포켓몬 도감 회고 개인 과제 소개 📖react, styled-components, context API를 이용한 포켓몬 도감입니다.배포 링크 : https://pokemon-app-sepia-nine.vercel.app/깃허브 주소 : https://github.com/smu06030/pokemon-app 요구 사항 📌필수 구현 사항✅ Git 브랜치 전략 사용 (props-drilling, context)✅ 페이지 라우팅 구현 (react-router-dom)✅ 도감 페이지 구현각 포켓몬 카드의 추가 삭제버튼클릭 시 디테일 페이지 이동✅ 디테일 페이지 구현뒤로 가기 버튼 클릭 시 기존 리스트 유지✅ 알림 기능 구현 (sweetalert2)✅ styled-components 스타일링 사용 기술 🛠️컴포넌트 기반의 구조.. [팀 프로젝트] 영화 검색 사이트 팀 프로젝트 소개 📖TMDB API를 이용한 영화 검색 사이트입니다.Github 주소 : https://github.com/smu06030/movie-app-team12배포 링크 : http://movie-app-team12.s3-website.ap-northeast-2.amazonaws.com/ 요구 사항 📌필수 구현 사항✅ TMDB 오픈 API 이용✅ 영화 정보 상세 페이지 구현✅ 상세 페이지 영화 리뷰 작성 기능 구현 ✅ 비밀번호 암호화✅ github PR 사용한 협업✅ UX를 고려한 validation check 도전 과제✅ CSS flex, grid, 반응형 UI 구성✅ 상세 페이지 리뷰 수정 및 삭제 기능✅ 메인 페이지 정렬 기능 (이름, 별점, 개봉일 등) 추가 기능 ✅ 홈 화면.. [팀 프로젝트] 영화 검색 사이트 회고 Keep (현재 만족하는 부분) 😁적극적인 피드백모르는 부분이나 로직이 생겼을 때 팀원들과 공유해 문제를 해결해 나아가는 모습이 좋았습니다. 역할 분담역할 분담이 잘 된 것 같아 기능 개발을 순탄하게 진행했던 것 같아서 좋았습니다! 네이밍 컨벤션 및 주석네이밍 컨벤션을 정하고 시작해서 변수명이나 함수명에서 충돌이 발생하지 않아서 좋았습니다! 그리고 주석을 적재적소에 잘 사용해 코드를 이해하는데 도움이 많이 됐습니다! 마감 시간 준수제시간에 제출하는 게 다하지 못 하더라고 중요한 것이었는데 프로젝트 구현사항에 버그가 없이 완벽하게 구현사항을 해결하고 제출했다는 점에서 좋았습니다! Problem (불편하게 느꼈던 부분) 😥초기 세팅각자 다른 prettier를 사용하여 공백이나 여백이 달라 머지 시 문제.. [개인 과제] 영화 검색 사이트 프로젝트 회고 개인 과제 소개 📖TMDB API를 이용한 영화 검색 사이트입니다.Github 주소 : https://github.com/smu06030/movie-app배포 링크 : https://smu06030.github.io/movie-app/ 요구 사항 📌필수 구현 사항✅ 순수 바닐라 자바스크립트 사용✅ TMDB API 인기 영화 데이터 가져오기✅ 영화 정보 카드 리스트 UI 구현✅ 영화 검색 UI 구현✅ javascript 문법 요소를 이용해 구현document.getElementById()document.querySelector()document.createElement()setAttribute()addEventListener()appendChild()preventDefault() 선택 구현 사항✅ CS.. 미니 프로젝트 회고 Keep (현재 만족하는 부분) 😁문제 발생 시 함께 해결하기 위해 노력하기!한 명에게 생긴 문제 혹은 한 명만 알고 있는 지식 등을 모두가 공유하고 함께 해결해 나가는 과정이 매우 만족스러운 프로젝트였습니다! 팀 규칙과 컨벤션!프로젝트 초반에 코딩 컨벤션, git 컨벤션, 팀 규칙을 잘 세웠기 때문에 git 관련 문제들이 크게 발생하지 않았습니다! 적극적인 피드백!코드를 병합하는 과정에서 항상 피드백을 주고 받은 것이 만족스러웠습니다! Problem (불편하게 느꼈던 부분) 😥어색어색,,서로 친해지는 데 시간이 생각보다 너무 많이 걸렸던 것 같습니다ㅠㅠ 그래서 그런지 프로젝트 관련 대화 외의 대화를 많이 나눠보지 않아 너무 아쉬웠습니다! 역할 분담기획 단계가 많이 부실했다는 생각을 했습니다. 와이.. 이전 1 2 다음
