react36 [React][React Pattern] 컴파운드 컴포넌트에 대해 알아보자 목차 컴파운드 컴포넌트란? Compound Components는 React의 강력한 기능 중 하나로 Compound Components를 사용하면 유연하고 재사용 가능한 컴포넌트를 설계할 수 있으며, 코드의 가독성과 유지 보수성을 높일 수 있다.html 요소를 통해 예를 들면 과 가 있다. 둘은 각각 썻을 때 별 기능이 없지만 함께 하면 유용한 기능을 사용할 수 있다. 컴파운트 컴포넌트 리액트 패턴 만들기 Accordion.jsx import { createContext, useContext, useState } from "react";import AccordionItem from "./AccordionItem";const AccordionContext = createContext();export .. 2024. 8. 26. [React][Tanstack Query] 개념과 활용 방법에 대해 알아보자 목차 간단한 설명은 아래 페이지에 있다.참고https://be-senior-developer.tistory.com/94 [React] React-Query 라이브러리가 무엇인지 알아보자목차 오늘은 프로젝트를 하면서 리액트 쿼리에 대해 접하게 되었다. 말하는 감자인 나는 당연히 모르기 때문에 이번 기회에정리해보고자 한다.. 리액트 쿼리의 필요성 캐시동일한 데이터에be-senior-developer.tistory.com 다음과 같이 QueryClientProvider를 사용해 주자useQuery로 데이터 불러오기 main.jsximport { Navigate, RouterProvider, createBrowserRouter,} from "react-router-dom";...import { QueryC.. 2024. 8. 26. [React] 배포 과정에 대해서 알아보자 목차 배포 과정배포 과정은 크게 다음과 같다. 1. 테스트 코딩하기 2. 코드 최적화하기 3. 서버에 업로드할 파일 생성하기 4. 서버에 파일 업로드하기 지연 로딩배포하기 전 최적화 방법 중 하나인 지연 로딩에 대해 알아보자 초기에 모든 페이지의 코드를 로딩하면 첫 페이지의 로딩이 느려진다.따라서 이를 위해서 페이지에 접근했을 때 동적으로 컴포넌트를 로딩하는 것이다.import { createBrowserRouter, RouterProvider } from "react-router-dom";//import BlogPage, { loader as postsLoader } from "./pages/Blog";import HomePage from "./pages/Home";// import PostPage,.. 2024. 8. 24. [React] 로그인 시 토큰 기반 인증 만들어보기 목차 토큰 기반 방식의 로그인 장점서버가 아닌 클라이언트에서 유저의 인증정보를 관리한다는 점이다.서버에서 유저의 상태를 가지고 있지 않아 서버는 무상태적인 아키텍쳐를 구축할 수 있다.하나의 토큰으로 다수의 서버에 인증가능하다는 점에서 확장성을 갖는다.토큰 생성만을 담당하는 인증용 서버를 만들 수 있는 등 어디서나 토큰의 생성이 가능하다. 토큰 기반 인증 방식유저가 인증정보를 담아 서버에 로그인 요청을 보낸다.서버는 데이터베이스에 저장된 유저의 인증정보를 확인한다.인증에 성공했다면 서버는 유저에 대한 권한정보를 서버의 비밀키와 함께 토큰을 생성한다.서버는 Authorization 헤더에 토큰을 담아 클라이언트에 전달한다.클라이언트는 전달받은 토큰을 브라우저의 세션 스토리지 또는 로컬스토리지에 저장한다.클라.. 2024. 8. 24. 이전 1 2 3 4 5 6 ··· 9 다음 728x90
