본문 바로가기
반응형

프로젝트/나무(나누고 나눔받는 무한 지식 품앗이)

 (18)
모달 / 스켈레톤 UI 디자인 리팩토링 1. 모달 Height 반응형 적용 및 디자인 통일 프로젝트 내 모달 디자인을 통일하고, vw/vh를 사용하도록 수정하였다. 2. 스켈레톤 UI 디자인 수정 기본 컴포넌트와 최대한 비슷한 느낌이 들도록 수정하였다. 살짝 맞지 않던 간격도 바꿔주었다. 훨씬 보기 좋아졌다. 반응형도 적용되도록 vw,vh를 사용하였다. 수정 전) 수정 후) 리팩토링은 계속 된다!!
[회고] 프론트엔드 2인 팀 프로젝트 '나무' 회고 프로젝트 명 : 나무(나누고 나눔 받는 무한 품앗이) 프로젝트 기간 : 2023.06.19 ~ 2023.07.28 프로젝트 소개 : 1:1 실시간 채팅 지식 공유 플랫폼 참여 인원 : 프론트엔드 2 기술 스택 : React, React-Query, Javascript, Styled-Components, Recoil, Firestore, Vercel, Mui 담당 기능: 나무 요청 실시간 데이터 업데이트 로직 구현 메인 페이지 - 캐러셀 컴포넌트 UI 및 기능 구현 검색, 게시글 작성, 태그 수정 페이지 UI 및 기능 구현 마이 페이지 - 목패 변경 컴포넌트 UI 및 기능 구현 공통 컴포넌트 구현(modal, 스켈레톤 UI, input 등) 배포 링크 : https://namu.vercel.app/ 깃허브..
[React] 로딩 스피너에서 스켈레톤 UI로 리팩토링 이번 프로젝트에서는 서버 데이터 관리에 리액트 쿼리를 사용했다. 리액트 쿼리를 사용하면 쉽게 로딩 처리를 해줄 수 있다. 이전 포스팅에서도 알 수 있듯이, 로딩 상태일 때 좋은 사용자 경험을 위해 로딩 스피너 라이브러리를 사용했었다. https://bbeeyaks-moment.tistory.com/entry/React-%EB%A1%9C%EB%94%A9-%EC%8A%A4%ED%94%BC%EB%84%88-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0 [React] 3분 컷 로딩 스피너 라이브러리 사용하기 예전에 '맛피' 프로젝트를 할 때 아쉬웠던 점이 몇 개 있었다. 그 중 하나가 로딩 인디케이터를 적용하지..
[React] React tooltip 간단하게 적용하기(hover 시 부가 설명) 마이페이지에서 목패 쪽 기능을 맡게 되었다. 그냥 목패 아이템만 보여주기엔 상하 간격이 너무 아까워서 목패 취득 기준을 볼 수 있는 기능을 추가해보았다. 전체 코드는 다음과 같다. import styled from 'styled-components'; import { useRecoilValue, useSetRecoilState } from 'recoil'; import { useQuery, useMutation } from 'react-query'; import { useEffect } from 'react'; import { Tooltip } from 'react-tooltip'; import Swal from 'sweetalert2'; import { WhiteButton } from '../UI/b..
[React & React-Query] 가만히 있어도 데이터 실시간 업데이트 되도록 하기 오늘은 가장 중요한 부분을 구현했다. 사용자에게 전송된 요청 리스트를 실시간으로 업데이트되도록 하는 부분이다. 이 기능을 위해 react-query를 도입했다고 말해도 과언이 아니다. 물론 isLoading도 무지 잘 썼지만! 내가 만들고 싶었던 건, 촉매 없이 가만히 있어도 요청 리스트가 자동으로 업데이트 되는 것이다. 마치 주식 거래 앱처럼 내가 아무것도 하지 않아도 같은 화면을 보고 있어도 알아서 데이터가 촤라라락 변하는 그런 실시간 업데이트를 도전하였다. 어제와 마찬가지로 오늘도 다양한 방법을 시도하고 가설을 세워가며 진행하였다. 간단히 남겨보자. 처음 시도한 것은 리액트 쿼리 문만 수정하는 것이였다. 리액트 쿼리에는 refetch를 위한 다양한 기능이 있어 내가 원하는 조건에 따라 새로운 데이터..
[React & Recoil] a태그로 인한 새로 고침 + 새로 고침 시 리코일 전역 데이터 날라가는 현상 마이페이지에 탭 메뉴로 로그인한 유저가 보낸 요청 리스트와 작성한 글 리스트를 보내는 기능이 있다. 로그인한 유저의 데이터는 리코일을 통해 관리하고 있었다. 문제가 있었다. 원하는 대로 데이터가 뿌려지지 않았다. 아래부터 위로 거슬러 올라가며 다양한 가설들을 제기해보고 테스트해보기를 반복했다. 어제 밤부터 오늘 오후 3시 반까지 지속되었던 인고의 시간들을 기록해보고자 한다. 문제 1. 전역에서 관리되는 로그인 유저의 정보가 느리게 가져와진다. 즉, 컴포넌트가 렌더링 되고 전역 데이터가 가져와지기 전까지 delay가 있다. 그러면 탭 메뉴를 감싸고 있는 부모 컴포넌트에서 전역 데이터를 가져와 탭 메뉴에 props로 보내주면 괜찮아질까? => NO. 똑같은 에러만 보인다. 문제 2. 에잇..그러면 하는 수 ..
[React] 3분 컷 로딩 스피너 라이브러리 사용하기 예전에 '맛피' 프로젝트를 할 때 아쉬웠던 점이 몇 개 있었다. 그 중 하나가 로딩 인디케이터를 적용하지 못한 것이였다. 좋은 사용자 경험을 위해 꼭 필요한 로딩 처리, 간단하게 적용시켜 보았다. 로딩 처리에는 대표적으로 스켈레톤 UI, 로딩 스피너가 있다. 처음에는 스켈레톤 UI를 적용하려고 했지만, 프로젝트 데이터 특성 상 게시글 리스트가 자주 바뀌는 것이 아니기 때문에 로딩 컴포넌트가 보이는 시간이 짧아 스켈레톤 UI를 적용한다고 한 들 큰 의미가 없다는 생각이 들었다. 그래서 간단한 로딩 스피너를 추가하기로 결정했다. 로딩 스피너 컴포넌트는 gif로 적용하는 방법과, 라이브러리를 사용하는 방법이 있다. 우리 프로젝트에는 디자이너 분이 따로 없는 관계로 라이브러리를 사용하기로 했다. 사용법이 정말 ..
[Warning] React does not recognize the x prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `x` instead. If you accidentally passed it from a parent component, remove it from the DOM el.. 햄버거 메뉴를 만들다가 저런 warning을 발견했다. custom component에 props를 전달해주니 뜨는 오류였다. DOM 요소에 있는 내가 만든 prop(isMenuOpen)을 리액트가 이해하지 못해 뜨는 warning 인 것 같다. 스택 오버플로우에 검색하여 해결책을 찾았다. 위의 글을 참고하여 다음과 같이 수정했더니 더 이상 warning이 뜨지 않는다. 참고한 글) https://stackoverflow.com/questions/54468535/how-to-solve-warning-react-does-not-recognize-the-x-prop-on-a-dom-element How to solve Warning: React does not recognize the X prop on a ..
반응형

티스토리툴바