본문 바로가기
반응형

전체 글

 (501)
[회고] 프론트엔드 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. 에잇..그러면 하는 수 ..
[리트코드] 230. Kth Smallest Element in a BST - js 1. 문제 https://leetcode.com/problems/kth-smallest-element-in-a-bst/submissions/ LeetCode - The World's Leading Online Programming Learning Platform Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com 2. 코드 /** * Definition for a binary tree node. * function TreeNode(val, left, right) { * this.va..
[React] 3분 컷 로딩 스피너 라이브러리 사용하기 예전에 '맛피' 프로젝트를 할 때 아쉬웠던 점이 몇 개 있었다. 그 중 하나가 로딩 인디케이터를 적용하지 못한 것이였다. 좋은 사용자 경험을 위해 꼭 필요한 로딩 처리, 간단하게 적용시켜 보았다. 로딩 처리에는 대표적으로 스켈레톤 UI, 로딩 스피너가 있다. 처음에는 스켈레톤 UI를 적용하려고 했지만, 프로젝트 데이터 특성 상 게시글 리스트가 자주 바뀌는 것이 아니기 때문에 로딩 컴포넌트가 보이는 시간이 짧아 스켈레톤 UI를 적용한다고 한 들 큰 의미가 없다는 생각이 들었다. 그래서 간단한 로딩 스피너를 추가하기로 결정했다. 로딩 스피너 컴포넌트는 gif로 적용하는 방법과, 라이브러리를 사용하는 방법이 있다. 우리 프로젝트에는 디자이너 분이 따로 없는 관계로 라이브러리를 사용하기로 했다. 사용법이 정말 ..
[리트코드] 136. Single Number - js 1. 문제 https://leetcode.com/problems/single-number/submissions/ LeetCode - The World's Leading Online Programming Learning Platform Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com 2. 코드 /** * @param {number[]} nums * @return {number} */ var singleNumber = function(nums) { let map = new Map()..
반응형

티스토리툴바