프라이D
프라이Develog(❁´◡`❁)
프라이D
전체 방문자
오늘
어제
  • ALL (378)
    • TDD, Cleancode with JavaScr.. (5)
    • 프로젝트 (32)
      • work (3)
      • 직접 만드는 기술 블로그 (2)
      • 데일리 옥션 (19)
      • 모락모락 (8)
    • Computer Science (1)
    • Algorithm & 자료구조 (94)
      • 알고리즘 w.JavaScript (53)
      • 자료구조 (5)
      • (인프런) 자바스크립트 알고리즘 문제풀이 (34)
    • JavaScript (45)
      • JavaScript (41)
      • 모던 자바스크립트 Deep Dive (4)
    • WEB (13)
    • 회고 (12)
    • TIL (109)
    • WIL (7)
    • Stacks (20)
      • React.js (6)
      • Next.js (1)
      • Redux (3)
      • Node.js (2)
      • GIT (2)
      • SAP (1)
    • 15일 메이킹 프로젝트 (15)
    • 이전 기록 (14)
    • ETC. (5)
    • ---------------2021 (6)
      • 내일배움단-웹개발 5주 (2)
      • 정보처리기사 (4)

블로그 메뉴

  • 홈
  • 태그
  • 미디어로그
  • 위치로그
  • 방명록

공지사항

인기 글

태그

  • JavaScript
  • 스파르타코딩클럽
  • 내일배움카드
  • 코딩프로젝트
  • nomadcoder
  • 자바스크립트알고리즘
  • 자바스크립트비트마스크
  • 알고리즘
  • 국비지원
  • 내일배움단
  • 투포인터알고리즘
  • MySQL
  • nomadcoders
  • 2023 인프콘 후기
  • 비트마스크
  • vanilaJS
  • 코드스테이츠
  • Til
  • 자바스크립트
  • 모던자바스크립트딥다이브

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
프라이D

프라이Develog(❁´◡`❁)

# 작업일지 6 / query parameter 에 접근하기
프로젝트/데일리 옥션

# 작업일지 6 / query parameter 에 접근하기

2023. 2. 10. 14:19

내가 담당하게 된 검색 및 검색 결과 페이지.

검색 페이지에서 입력한 카테고리와 검색 키워드를 토대로, 검색 결과를 요청해 이를 렌더링 해주어야 한다. 다른 페이지로 이동이 필요하기 때문에 카테고리 값과 키워드 값을 어떻게 관리해야하나 고민이 되었음. 

 

페이지 이동시에도 값을 기억하려면 전역 상태를 활용하면 되는데, 이러면 링크를 다른 사람에게 공유했을 때 제대로 동작하지 않는 오류가 발생할 수 있음. 따라서 uri 의 쿼리 파라미터를 가지고 검색을 하도록 구현했다.

 

쿼리 파라미터를 가져오는 훅을 만들었다.

이를 검색 결과 페이지에서 아래와 같이 활용한다.

검색 결과는 리스트이기 때문에, 각 리스트 item 에게 해당 response를 뿌려서 렌더링을 해줘야 함. 뭔가 이번 프로젝트에서는 데이터를 요청하는 코드를 어디에 위치하게 할 것인지도 나름 고민하면서 진행중이다. 왜냐면 지난 프로젝트에서 너무 중구난방이었어서.. 처음부터 잘 고민해야겠다고 생각했음. (props로 내려줬다가, 컴포넌트에서 호출해줬다가 섞여있어서 지금 다 정리하는 중이다.) 

 

뭔가 어떤 방식이 좋을지 고민만 하다 시간이 훌쩍 흘러가 버렸던 하루.

저작자표시 (새창열림)

'프로젝트 > 데일리 옥션' 카테고리의 다른 글

#8 작업일지 / interval함수 리팩토링, 게시글 상세페이지 통신 로직 작성  (0) 2023.02.15
# 작업일지 7 / 카운트다운 함수 만들기  (0) 2023.02.13
# 작업일지 5 / 알림 페이지와 검색 페이지 구현, 리액트 쿼리 어떻게 써야하징  (0) 2023.02.09
# 작업일지 4 / 모달창 작업, 캐러셀(?) 구현, relative absolute, 유니온타입 활용  (0) 2023.02.08
# 작업일지 3 / Tailwind CSS 로 글로벌 스타일 적용하기 w.@layer가 뭐징  (0) 2023.02.06
    '프로젝트/데일리 옥션' 카테고리의 다른 글
    • #8 작업일지 / interval함수 리팩토링, 게시글 상세페이지 통신 로직 작성
    • # 작업일지 7 / 카운트다운 함수 만들기
    • # 작업일지 5 / 알림 페이지와 검색 페이지 구현, 리액트 쿼리 어떻게 써야하징
    • # 작업일지 4 / 모달창 작업, 캐러셀(?) 구현, relative absolute, 유니온타입 활용
    프라이D
    프라이D
    틀린내용 정정 및 개선사항은 언제든지 댓글 달아주세요 :D

    티스토리툴바