본문 바로가기

타입스크립트로 함께하는 웹 풀 사이클 개발(React, Node.js)/TIL60

useSearchParams, URLSearchParams, locaton (with 카테고리 동기화) 수정할 부분: 사진 업로드하기 (필요한 이유에) 필요한 이유 맨 위 카테고리와 중간의 컨텐츠 부분 두 군데서 카테고리를 설정할 수 있다. 이럴 때, 두 카테고리를 동기화하고, 활성화된 카테고리를 관리하여 활성화된 색을 보여주도록 할 것이다. react-router-dom에서 제공하는 location과 useSearchParams를 사용할 것이다. 1. useSearchParams react-router-dom 패키지에서 제공되는 훅으로, 현재 URL의 쿼리 문자열을 읽고 쓰기 위해 사용 const [searchParams, setSearchParams] = useSearchParams(); 참고로 url 쿼리 문자열을 읽기만 할 때는 다음도 가능하다. const params = new URLSearchP.. 2024. 3. 3.
api 요청 플로우 , params 처리 View => 화면에 데이터 사용 Hooks => api마다 가공 및 useEffect등 설정 Fecher => api 통신 요약해보면 위와 같다. 다음으로 api 로직 예시와 여러가지 params를 붙여 api 통신을 하는 경우를 살펴보겠다. api 로직 예시 axios를 이용해서 api를 요청해보겠다. npm i axios --save component/ common/ header.tsx const { category } = useCategory();​ => hook과 연결하는 부분 , category 받아와서 화면에 사용 hooks/ useCategory.ts import { useEffect, useState } from "react"; import { fetchCategory } from ".... 2024. 3. 1.
화면 테스트하기 @testing-library/react를 통해 테스트를 할 수 있다. render와 expect를 이용한다. npm test 명령어를 통해 만들어둔 "컴포넌트".spec.tsc를 검사할 수 있다. 예시 Button.spec.tsx import { render, screen } from "@testing-library/react"; import Button from "./Button"; import { BookStoreProvider } from "../../context/themeContext"; describe("button 컴포넌트 테스트", () => { it("렌더 확인", () => { // 1. 렌더하기 render( 버튼 ); // 2. 확인 expect(screen.getByText("버.. 2024. 3. 1.
다크모드 만들기 themeContext.tsx import { ReactNode, createContext, useEffect, useState } from "react"; import { ThemeName, getTheme } from "../style/theme"; import { ThemeProvider } from "styled-components"; import { GlobalStyle } from "../style/global"; const DEFAULT_THEME_NAME = "light"; const THEME_LOVALSTORAGE_KEY = "book_store_theme"; // 테마상태와 토글 함수 interface 정의 interface State { themeName: ThemeName; tog.. 2024. 2. 29.

티스토리툴바