UI 구현 연구일지

[React] useInfiniteQuery와 Intersection Observer 이용한 무한스크롤 구현 👀 unsplash 이미지 무한으로 불러오기

개요 먼저 hook과 useInfiniteQuery를 사용하지 않고 순수하게 js와 react의 기능만을 사용해 무한스크롤을 구현한 예제를 소개할 것이다. 그리고 Intersection Observer로 특정 element를 구독하는 과정을 간단하게 할 수 있는 useIntersect hook을 만들어보고, 그 hook의 callback으로 useInfiniteQuery의 fetchNextPage 함수를 줘서 무한스크롤로 API 호출하는 예제를 작성해 볼 것이다. 1. 순수하게 intersect observer 이용해 무한스크롤 구현하기 hook으로 로직 추상화를 하거나 별도의 라이브러리 없이 infinite observer로 target을 구독하는 코드를 직접 구현해봤다. function Infinit..

[React] Debounce(디바운스) 적용한 검색어 자동완성 구현기 (2) - 검색어 키보드로 선택하기

1편 보러가기 [React] Debounce(디바운스) 적용한 검색어 자동완성 구현기 (1) 전체코드 (관련 코드는 SearchPage와 Search 폴더에 있음) 검색어 자동완성 기능은 의외로 자주 사용되는 UI이기 때문에 디바운스 연습할 겸 미국의 도시명을 검색할 수 있는 검색창 및 자동완성 기능 bluepebble25.tistory.com 전체코드 (관련 코드는 SearchPage와 Search 폴더에 있음) GitHub - bluepebble25/react-pieces: react로 자주 구현되는 솔루션 조각들을 모아놓는 저장소 react로 자주 구현되는 솔루션 조각들을 모아놓는 저장소. Contribute to bluepebble25/react-pieces development by creati..

[React] Debounce(디바운스) 적용한 검색어 자동완성 구현기 (1)

전체코드 (관련 코드는 SearchPage와 Search 폴더에 있음) GitHub - bluepebble25/react-pieces: react로 자주 구현되는 솔루션 조각들을 모아놓는 저장소 react로 자주 구현되는 솔루션 조각들을 모아놓는 저장소. Contribute to bluepebble25/react-pieces development by creating an account on GitHub. github.com 키보드로 검색어 선택 기능은 2편에서 [React] Debounce(디바운스) 적용한 검색어 자동완성 구현기 (2) - 검색어 키보드로 선택하기 1편 보러가기 [React] Debounce(디바운스) 적용한 검색어 자동완성 구현기 (1) 전체코드 (관련 코드는 SearchPage와 ..

[React 컴포넌트] 댓글 기능 구현하기

구상 댓글과 관련된 구역을 Comments 컴포넌트를 만들어서 관리할 것이다. 댓글 기능이 필요한 모든 페이지에 Comments 컴포넌트를 넣으면 된다. Comments.js의 하위 컴포넌트 구성은 다음과 같다. Comments.js 댓글 입력창 (textarea, submit 버튼), 그 아래에는 map()으로 SingleComment + ReplyComment의 묶음을 렌더링한다. SingleComment는 댓글 아이템 (프로필, 이름, 내용, 좋아요 버튼 등을 가짐)에 해당하고 토글하면 답글 입력창이 나온다. ReplyComment는 댓글 아이템 (SingleComment)과 ReplyComment를 하위 구성요소로 갖는다. 일종의 재귀적 구성으로 그 아래에 계속 ReplyComment가 달릴 수 ..

[React 컴포넌트] Like, Dislike (좋아요, 싫어요) 기능 만드는 법

React (LikeDislikes.js) Like, Dislike를 누를 때 발생하는 3가지 경우의 수를 생각해보자. 좋아요, 싫어요 둘다 눌리지 않은 상태 -> 둘 중 하나를 누르면 좋아요/싫어요 등록 좋아요가 이미 눌려 있는 상태에서 싫어요를 누른다면 -> 좋아요 삭제 후 싫어요 등록 싫어요가 이미 눌려 있는 상태에서 좋아요를 누른다면 -> 싫어요 삭제 후 좋아요 등록 과정 Like, Dislike (좋아요, 싫어요 숫자 개수를 저장)와 LIkeAction, DislikeAction(좋아요, 싫어요가 눌렸는지 여부)를 저장하는 state를 준비한다. API 호출을 할 때 정보를 전달할 변수 variables를 준비한다. Like, Dislike를 포스팅과 댓글 모두에 사용할 수 있게 설계했기 때문에..

[React 컴포넌트] Favorite(찜, 좋아요) 버튼 만드는 법

API model 생성 (models/Favorite.js) 좋아요라는 것은 '어떤 게시글'에 대해 '특정 유저'가 누르는 것이다. 그러므로 좋아요 테이블은 postId, userId 컬럼을 가져야 한다. userId, postId가 이미 생성해 둔 'User', 'Post' 모델을 참조하도록 해서, 데이터를 조회하는 로직에서 필요하다면 populate() 메소드로 JOIN을 할 수 있다. timestamps 속성을 주면 데이터가 기록될 때 자동으로 시간도 기록된다. const mongoose = require('mongoose'); const favoriteSchema = mongoose.Schema({ userFrom: { type: mongoose.Schema.Types.ObjectId, ref: ..

[React 컴포넌트] 더 보기(Load More) 버튼 만드는 법

우리가 더 보기 버튼을 만들어줄 페이지는 useEffect()로 초기 데이터를 불러와 데이터를 state에 저장하고, map()으로 해당 데이터들을 화면에 보여주고 있는 페이지이다. 더 보기 버튼을 만들려면 JSX로 더 보기 버튼을 만든다. 현재 페이지 수를 저장할 state를 준비한다. API에 (현재 페이지 + 1) 에 해당하는 데이터를 요청할 때 사용할 것이다. loadMore 함수를 작성해서 onClick으로 등록한다. 버튼을 클릭할 때마다 (페이지 + 1)의 데이터를 fetch하고 기존 데이터가 저장된 state에 새 데이터들을 덧붙인다. (destrcturing 문법 혹은 concat() 이용) 그러면 state가 변경되면서 자동으로 loadMore로 불러온 데이터들도 화면에 덧붙여서 보이게 ..

[JS 컴포넌트] 캐러셀 이미지 슬라이드 만들기

잘 설명한 분들이 많으므로 원리는 아래의 블로그, 코드는 유튜브 영상을 참고하길. 근데 이 유튜브 영상을 그대로 따라해도 문제가 발생할 것이다. 그 때 이 글을 참고하라고 이렇게 적어본다. 결과물과 코드는 github에 올려뒀다. https://github.com/bluepebble25/vanillaJS-UI/tree/main/carousel-slider 여길 참고해서 만들기 코드 - https://www.youtube.com/watch?v=KcdBOoK3Pfw&t=941s 원리1 - https://velog.io/@soyeon9819/React%EC%BA%90%EB%9F%AC%EC%85%80-%EB%A7%8C%EB%93%A4%EA%B8%B01-%EB%AC%B4%ED%95%9C-%EC%BA%90%EB%9..