홈에서 원하는 노선번호 입력 시 해당 버스 페이지로 이동 const handleNavigateBusPage = useCallback( async (e) => { e.preventDefault(); // form에서 받은 busNumber로 busId 받아오기 let busId; await axios .get(`/api/info/${busNumber}`) .then((res) => { console.log(res.data); busId = res.data.response.msgBody[0].busRouteList[0].routeId[0]; // 해당 노선페이지로 이동하면서 busNumber와 busId 전달하기 navigate(`/${busNumber}`, { state: { busNumber, busId..
React Query의 라이프 사이클 A 쿼리 인스턴스가 mount 된다. 네트워크에서 데이터 fetch 하고 A라는 query key로 캐싱한다. 이 데이터는 fresh 상태에서 staleTime(기본값 0) 이후 stale 상태로 변경된다. A 쿼리 인스턴스가 unmount 된다. 캐시는 cacheTime(기본값 5min) 만큼 유지되다가 가비지 콜렉터로 수집된다. - v4부터는 기본값이 Infinity로 변경될 예정이라고 한다. 만일 cacheTime이 지나기 전에 A 쿼리 인스턴스가 새롭게 mount되면, fetch가 실행되고 fresh한 값을 가져오는 동안 캐시 데이터를 보여준다. staleTime 데이터가 fresh -> stale 상태로 변경되는데 걸리는 시간 fresh 상태일때는 쿼리 인스..
상태(State) 모던 웹프론트엔드 개발 UI/UX의 중요성과 함께 프로덕트 규모가 많이 커지고 프론트엔드에서 수행하는 역할이 늘어났다. 즉,관리하는 상태가 많아지고 상태관리의 필요성이 중요해졌다. 상태란? 주어진 시간에 대해 시스템을 나타내는 것으로 언제든지 변경될 수 있다. 즉 문자열, 배열, 객체 등의 형태로 응용 프로그램에 저장된 데이터 개발자 입장에선 관리해야하는 데이터들이라고 볼 수 있다. 상태 관리는? 상태를 관리하는 방법에 대한 것 ➡️ 프로덕트가 커짐에 따라 어려움도 커진다. 상태들은 시간에 따라 변화한다. React에선 단방향 바인딩이므로 Props Drilling 이슈도 존재한다. Redux와 MobX 같은 라이브러리를 활용해 해결하기도 한다. Client State & Server ..
랜딩페이지 레이아웃 설정 메인 랜딩페이지를 그냥 기본적인 구조로 만들었다. NavBar: 로고와 로그인/로그아웃/내정보 기능 Write: 바로 글 작성 할 수 있는 공간 TopPosts: 좋아요를 많이 받은 순서로 정렬된 글 RecentPosts: 최근에 등록된 순서로 정렬된 글 UsersStatus: 실시간으로 접속하고있는 유저리스트 Footer: 개발자 정보 및 기타 등 크게 이렇게 메인 컴포넌트들로만 나눠놨고 기능을 구현하면서 디테일을 잡아갈 예정이다. 글 작성 기능 추가 메인 랜딩페이지에 글 작성을 바로할 수 있는 컴포넌트를 만들어놨다. 한글로만 작성할 수 있도록 정규표현식과 여러 조건들을 추가했다. const onSubmit = useCallback( (event) => { event.preve..
React Query커스텀hook 추가 유저 로그인 상태 쿼리 키 관리하는 커스텀 훅 import { useQuery } from '@tanstack/react-query'; import axios from 'axios'; const useLoginStatus = () => { const { data, isLoading, error } = useQuery(['loginStatus'], async () => { return await axios .get('/api/users') .then((res) => { if (res.data.isAuth === false) return false; if (res.data._id) return true; }) .catch((error) => { console.log(e..
이번 주말동안 크게 한 것은 로그인 상태관리(서버)를 Redux에서 ReactQuery로 바꿨다는 점 작업하는동안 크게 느꼈던 것 부터 적고가자.. Redux는 클라이언트의 상태관리, React Query는 서버의 상태관리 HTTP 통신 시 요청(requset)과 응답(response)의 데이터를 꼭 확인하면서 작업하자. useQuery의 Promise함수는 꼭 response를 return을 해야 data에 값이 들어온다. const { data, isLoading, error } = useQuery( ['isLoggedIn'], async () => await axios .get('/api/users') .then((res) => { ✅ if (res.data.isAuth === false) retu..
유저 인증용 스키마 작성 MongoDB에 저장할 데이터 구조 즉, schema를 작성하고 외부에서 사용할 수 있도록 export 했다. 일단은 유저 회원가입 및 로그인에 필요한 내용만 작성했다. root에서 model 디렉토리를 만들고 그안에 User.js 파일을 생성했다. const mongoose = require('mongoose'); const saltRounds = 10; /* userSchema */ const userSchema = new mongoose.Schema( { nickname: { type: String, maxlength: 10, trim: true, unique: true, // required: true, }, email: { type: String, trim: true, ..
