코드스테이츠 SEB FE 41기/Main-Project(MatP) (21) 썸네일형 리스트형 [react & typescript] 무한스크롤 구현하기(feat. 팀원 분) 도메인 페이지에 나오는 '오늘의 맛포스트' 컨테이너를 무한 스크롤로 구현한 부분을 정리해보자. 도메인의 ui나 데이터 실시간 렌더링 등은 내가 맡아서 하였지만 무한 스크롤 기능은 다른 팀원분이 하셔서 프로젝트 종료 이후 코드를 보고 구글링을 해가며 따로 공부했다. 왠지 무한 스크롤은 나중에 분명 다시 찾을 일이 있을 것 같기 때문에! 이번 기회에 정리를 해보자! :) 먼저 무한 스크롤을 구현하기 위해 알아야 할 개념에 대해 간단히 짚고 넘어가자. clientHeight 현재 화면에서 보이는 높이라고 생각하면 편하다. scrollHeight 스크롤을 포함한 전체 요소의 높이를 말한다. 스크롤이 생겨서 뷰포트에 보이지 않는 아래의 요소들의 높이까지 전부 포함한다. scrollTop top 속성이므로 세로의 .. [react]Custom axios 만들기(회원/비회원 열람, 사용가능 기능 구분) 우리 애플리케이션은 회원/비회원 모두 사용할 수 있기 때문에 회원이 이용가능한 기능과 비회원이 이용가능한 기능을 구분하여야 했다. 이 때 axios를 Custom하여 header에 토큰이 있는 요청과 그렇지 않은 요청을 구분하여 사용할 수 있다. 다른 팀원분이 작성해주신 로직이였는데, 나중에 참고하면 좋을 것 같아 남겨본다. 간단하게 사용 방식을 살펴보자. 회원만 이용 가능한 기능에는 요청헤더에 토큰을 넣는 custom axios를 사용한다. import axios from "axios"; const instance = axios.create({ baseURL: "https://matp.o-r.kr/", headers: { Authorization: `Bearer ${localStorage.getItem.. [react] 반응형 모달 만들기 내가 만든 모달이 내 모니터에서는 내가 원하는 위치에 뜨지만 다른 팀원분들의 모니터에서는 그렇지 않다는 것을 발견했다. 프로젝트에서 사용되었던 반응형 모달을 만드는 코드를 간단하게 살펴보자. 나중에 또 볼 수도 있으니까! 핵심은 viewport 이다! 먼저 모달 컨테이너의 사이즈와 위치가 viewport에 따라 달라질 수 있도록 수정한다. width: 80vw; height: 90vh; position: fixed; top: 5vh; left: 10vw; 모달을 닫는 x 버튼도 수정한다. > span.close-btn { position: absolute; top: 1vh; right: 1vw; cursor: pointer; font-size: 30px; } 모달 컨테이너 내부 컨텐트의 사이즈도 수정한다.. [react & typescript]리코일 찍먹(?) 사용기 - 로그인한 유저 정보 저장하여 전역 상태로 관리하기(feat. recoil) 상태관리 라이브러리를 프로젝트에서 사용해본 것은 이번이 처음이였다. 이전에 redux는 잠깐 배워봤었으나 사용법이 간단하지만은 않아(?) 상태관리와는 친하지않은 상태였다. 그래서 이번 프로젝트에서도 가끔씩 props 드릴링을 하며,,, 상태관리와는 데면데면한 사이를 유지하고 있었다. 하지만 상태관리를 써야만하는 상황이 왔으니, 그것은 바로 Post & Comment를 작성자만 수정/삭제가 가능하도록 만들어야하는 것이였다! 우리 프로젝트에서는 구글 및 카카오 로그인을 사용하였다. const [searchParams] = useSearchParams();: useSearchParams는 리액트의 훅으로, 현재 URL의 쿼리 파라미터 정보를 가져올 수 있게 해준다. 이 코드에서 searchParams는 URL.. [회고] Main project '맛P' 회고 소개 맛집에 대한 경험 기록 및 공유를 통해 차원이 다른 맛집 순례 라이프를 즐길 수 있도록 도와주는 나만의 맛집 지도 & 일기 맛피플들의 다양한 후기가 담긴 맛포스트를 통해 증명된 맛집 후기를 얻어 더욱 퀄리티 높은 맛집 탐방 즐기기 방문하고 싶거나 재방문하고 싶은 맛집을 골라 맛픽커 그룹에 저장하여 맛집 지도 만들기 맛집을 방문한 후 해당 맛집에 대한 나의 경험과 후기가 담긴 맛포스트를 작성하여 추억이 담긴 맛집 일기장 만들기 기간: 1월 4일 ~ 2월 1일 (약 28일) 깃허브: http://bit.ly/3YWi3ZI 배포 링크: http://bit.ly/3YBZTg7 기술 스택 Typescript, React, Axios, Mui, Styled-Components, Eslint 담당 기능 맛포스트.. [react] 프로필 이미지 변경하기(feat. typescript) 유저의 프로필 이미지 변경하는 기능은 추후에 참고할 일이 생길 것 같아 기록해본다. 프로필 이미지를 변경해주는 로직은 텍스트 에디터에서 이미지를 핸들링해주었던 방법과 비슷하다. 엔드포인트도 같았다. 간단히 진행 방식을 기록해보자. 1. 파일 업로드를 위한 input 태그를 만들어준다. // 프로필 이미지 수정을 위한 ref const fileInput = useRef(null); 2. 이미지 클릭시 ref가 input 태그를 가리킨 후 파일 업로더가 뜨도록 한다. // 프로필 이미지 클릭시 파일 업로더 뜸 const onClickImg = () => { if (fileInput.current) { fileInput.current.click(); } }; // image uploader const onCh.. [react & typescript] useAxios 커스텀 훅 사용기2 - 데이터 실시간 업데이트해보기 지난번에 useAxios 커스텀 훅을 만들어 네트워크 통신 후 response를 받아오도록 만들고, 네트워크 통신과 관련된 코드는 도메인 별로 나누어 API 문서화를 진행하였다. 이제는 이 useAxios 커스텀 훅과 네트워크 통신 코드를 사용하여 데이터가 바뀌었을 때, 바뀐 데이터를 컴포넌트에 실시간으로 적용을 시켜주어야하는 과정이 필요하다. 이 방식을 알아내기 위해 관련된 블로그를 몇날 몇일을 붙잡고 기본적인 로직의 처리 과정에 대해 이해하려고 노력했다. 노력끝에 정답을 발견하였을 때 정말 유레카를 외칠 뻔했다~ 설날이였는데 설 연휴 내내 이 문제를 해결하기 위해 노트북만 붙들고 있었던 것 같다. 해결방법 발견 후에 글로 정리하여 디스코드에 올려 프로젝트 팀원분들께 공유드렸다. 팀원분들도 결과적으로 .. [react & typescript] MUI Popover 사용기(Delete confirm 기능) 삭제 버튼을 누르면 바로 DELETE 요청이 처리되며 post 또는 comment가 삭제되는 과정에서, 유저가 실수로 삭제 버튼을 눌러 원치않는 삭제를 하게 될 경우가 발생할 가능성이 있겠다는 생각이 들었다. 그래서 버튼 클릭시 유저가 삭제를 원하는지 재확인하여 처리하는 기능을 추가하기로 결심했다. 구글링을 해보니 Delete confirm 기능을 구현하는 데에는 tooltip, window confirm 등 여러 가지 방법이 있었는데, 나는 그 중 MUI의 Popover 라이브러리를 사용하여 구현하게 되었다. https://mui.com/material-ui/api/popover/ Popover API - Material UI API reference docs for the React Popover c.. 이전 1 2 3 다음
