HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🐣
프론트엔드 데브코스 4기 교육생/
🍏
김나영팀/
앙골라 ANGOLA
앙골라 ANGOLA/
차세진

차세진

Date
Sep 5, 2023 02:22 PM
Tag
설계
생성자

컴포넌트 구조 (+route)

notion image

Menu

검색 활성 여부, 로그인 유무를 props 로 받아서 상단 메뉴를 렌더링해주는 컴포넌트
  • 검색 활성
    • O : 검색 버튼 + 기능
    • X : 검색 버튼 안보여줌
  • 로그인 유무
    • O : 오른쪽 버튼 = 작성 / 마이페이지 / 알림
    • X : 오른쪽 버튼 = 로그인 / 가입

Main

Header 와, Route 를 담고 있는 컴포넌트 (container 역할)

Header

뒤로가기, PageName 보여주기, Sort 기능.
사용자가 정렬기준을 선택하면 route 의 queryString 바꿔줌

Routes

실질적으로 바뀌는 부분이기 때문에 여기에 Routes 활용
search 페이지의 경우, queryString 을 참조하여 keyword 와 sort 로 기능할 수 있음
 

Router

ㅤ
path
ㅤ
홈 (포스트 피드)
/
ㅤ
회원가입
/signup
ㅤ
로그인
/login
ㅤ
검색
/search/*
ㅤ
정렬 sort 발생 시 기존 route 에 param 추가
/search?sort=${정렬기준} /search/post?keyword=${검색어}&sort=${정렬기준} /search/user?keyword=${검색어}&sort=${정렬기준}
ㅤ
포스트 검색 (default)
/search/post
search 페이지 안에서 따로 Route 생성해야 함
유저 검색
/search/user
search 페이지 안에서 따로 Route 생성해야 함
포스트 검색 submit 후
/search/post?keyword=${검색어}
ㅤ
유저 검색 submit 후
/search/user?keyword=${검색어}
ㅤ
포스트 자세히 보기
/post?id=${postId}&show_comment=${true}
ㅤ
포스트 하나 보기
/post?id=${postId}
ㅤ
투표 완료 시 vote 발생 시 기존 route 에 param 추가
/post?id=${postId}&show_comment=${true}&voted=${true}
ㅤ
마이페이지
/mypage
ㅤ
유저페이지
/userpage?id=${userId}
ㅤ
 

Data fetching

카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유 | 카카오페이 기술 블로그
카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유에 대해 설명합니다. 이 글은 연작 중 1편에 해당합니다. 1편: 카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유, 2편: React Query와 함께 선언적 UI를 구성하는 방법
카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유 | 카카오페이 기술 블로그
https://tech.kakaopay.com/post/react-query-1/
카카오페이 프론트엔드 개발자들이 React Query를 선택한 이유 | 카카오페이 기술 블로그
Web: React Query 알아보기(등장 배경, 장점, 기초 개념)
React Query의 등장 배경과 Query Client, useQuery, useMutation 등에 대해 알아보자
Web: React Query 알아보기(등장 배경, 장점, 기초 개념)
https://medium.com/hcleedev/web-react-query-알아보기-등장-배경-장점-기초-개념-e82a3733036c
Web: React Query 알아보기(등장 배경, 장점, 기초 개념)
const {data: userList, isLoading} = useQuery(
  'UserListQueryKey', 
  fetchPost(..),
  {}
);
  1. React-query 사용해서 useQuery 훅 호출 시 콜백으로 axios 인스턴스 감싼 함수 넣어주기
      2. 인스턴스는 요청에 뭘 넣어 보내는가에 따라서 생성해주기
      • fetchPost
      • fetchUser
      • fetchNotification
      • …
  1. useQuery 대신 비동기 작업 담당하는 훅 작성하기
    1. useQuery 처럼 비동기를 아예 담당할건지
    2. 각 작업별로 hook 작성해서 (아예 안에 데이터 패칭 함수까지 넣어서) 각자 호출할건지
        3. const { data } = useFetchPost('GET',)
const { data } = useFetchPost('POST',{...})
        요런식..?