woo.oing

아래 강의를 수강하며 배운 내용을 정리한 글입니다[한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편 - 이정환] https://inf.run/SbJ8w 인증 vs 인가인증사용자의 신원을 확인하는 과정인가인증된 사용자의 권한을 확인하는 과정 세션 방식 vs 토큰 방식 세션 기반 인증 방식토큰 기반 인증 방식개념세션 객체를 통해 인증을 처리하는 방식토큰을 이용해 인증을 처리하는 방식서버 상태서버 상태 저장서버 상태 저장 X상태 저장 위치서버클라이언트 토큰 방식의 JWT(JSON Web Token)토큰 기반 인증 방식에서 대표적으로 사용되며 점(.)을 구분으로 Header.Payload.Signature 세 부분으로 구성된다

아래 강의를 수강하며 배운 내용을 정리한 글입니다[한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편 - 이정환] https://inf.run/SbJ8w 프로젝트에 supabase를 설치하고 사용까지 해보겠습니다 1. 계정 생성아래 사이트에 접속하여 계정을 만들어줍니다 https://supabase.com/ Supabase | The Postgres Development Platform.Build production-grade applications with a Postgres database, Authentication, instant APIs, Realtime, Functions, Storage and Vector embeddings. Start for free.supabase.com 2. 프로..

아래 강의를 수강하며 배운 내용을 정리한 글입니다[한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편 - 이정환] https://inf.run/SbJ8w 캐시 정규화 적용 예제1. 현재 동일한 데이터가 두 번 중복으로 저장되어 있는 상태 ["todo","list"] 쿼리[ { id: "1", content: "Todo 1", isDone: true }, { id: "2", content: "Todo 2", isDone: true }, { id: "3", content: "Todo 3", isDone: false },]; ["todo","detail","1"] 쿼리{ id: "1", content: "Todo 1", isDone: true } 2. 정규화 적용 후["todo","list"] 쿼리..

아래 강의를 수강하며 배운 내용을 정리한 글입니다[한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편 - 이정환] https://inf.run/SbJ8w ← 이전 글 보기 [React] Tanstack Query 사용해 보기아래 강의를 수강하며 배운 내용을 정리한 글입니다[한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편 - 이정환] https://inf.run/SbJ8w 가장 대표적인 서버 상태 관리 라이브러리인 tanstack query를 사용해보woooing.tistory.com 데이터 조회(get)를 관리하는 useQuery 외에도 데이터 수정(post..) 시에는 useMutation 을 사용합니다 const { mutate, isPending } = useMutation({ mut..

아래 강의를 수강하며 배운 내용을 정리한 글입니다[한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편 - 이정환] https://inf.run/SbJ8w 가장 대표적인 서버 상태 관리 라이브러리인 Tanstack Query를 사용하여 프론트엔드에서 API 조회를 디테일하게 제어할 수 있습니다기존에 react query라는 이름으로 알고 있었는데 리액트 뿐만 아니라 다른 프레임워크도 지원하게 되면서 tanstack query라는 이름으로 변경되었습니다 https://tanstack.com/query/latest TanStack QueryPowerful asynchronous state management, server-state utilities and data fetching. Fetch, cache,..

아래 강의를 수강하며 배운 내용을 정리한 글입니다[한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편 - 이정환] https://inf.run/SbJ8w 이전 글에 이어서 이번에는 zustand의 middlewares를 사용해 보겠습니다 ← 이전 글 보기 [React] 전역 상태 관리 Zustand 사용해보기가볍고 배우기 쉬운 간단한 사용법으로 react 상태 관리 라이브러리로 가장 많이 사용한다는 zustand를 처음 사용해 봤습니다react 프로젝트에 설치부터 사용까지 작성해 보겠습니다! https://zustand.docwoooing.tistory.com 1. combine상태와 함수를 합쳐주며 타입 자동 추론을 제공합니다create( combine({ count: 0 }, (set, get..

아래 강의를 수강하며 배운 내용을 정리한 글입니다[한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편 - 이정환] https://inf.run/SbJ8w 가볍고 배우기 쉬운 간단한 사용법으로 react 상태 관리 라이브러리로 가장 많이 사용한다는 zustand를 처음 사용해 봤습니다react 프로젝트에 설치부터 사용까지 작성해 보겠습니다! https://zustand.docs.pmnd.rs/getting-started/introduction Introduction - ZustandHow to use Zustandzustand.docs.pmnd.rs 1. 설치하기터미널에 아래 명령어 입력npm install zustand 2. 사용해 보기create에서 set, get을 사용하여 값을 가져오고 설정..

리액트 프로젝트 때마다 거의 필수로 사용하는 것 같은 react-router를 공식문서 참조하여 설치해 보겠습니다 https://reactrouter.com/home React Router Home | React Router reactrouter.com 1. 아래 명령어를 터미널에 입력해 설치해 줍니다npm i react-router 2. main.tsx 파일에 다음과 같이 코드를 추가합니다import React from "react";import ReactDOM from "react-dom/client";import { BrowserRouter } from "react-router";import App from "./app";const root = document.getElementById("roo..

본 문서는 2025.10.23 기준으로 작성되어 적용 시점의 공식문서 확인이 필요합니다 실제 실무 프로젝트에서도 도입하여 잘 사용하고 있는 tailwindcss를 순서대로 설치해 보겠습니다tailwindcss 뿐만 아니라 함께 사용하면 좋을 확장팩과 플러그인까지 함께 설치를 추천드립니다 1. tailwindcss 설치https://tailwindcss.com/ Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.t..