juni

세팅 목표Vite + Typescript 기반 프로젝트 설치zustand, tanstack query, tailwind css(또는 styled-components), react-router-dom 세팅환경변수 세팅 및 폴더구조 구성하기json placeholder를 이용하여 외부 통신 테스트 하기JWT 기술분석 : access, refresh token의 개념과 관리전략 blog 작성회원가입, 로그인, 마이페이지 페이지 컴포넌트 구현필수기능 : 회원가입, 로그인, 프로필 변경tailwind 또는 styled-components를 이용한 스타일링JWT 인증서버를 활용하여 access token 기반 페이지 권한 처리(라우팅 제어) vite를 ts로 설정yarn create vite . --template..

SSR 에서는 url을 절대적으로 입력해야해서 CSR처럼 입력 시 오류가 발생함 -> 전체 주소 입력export const getPokemon = async (id: string) => { try { const response = await axios.get( `http://localhost:3000/api/pokemons/${id}` ); return response.data; } catch (error) { console.error(`Error fetching pokemon with id ${id}:`, error); throw new Error("Failed to fetch pokemon"); }}; 전체 코드📦src ┣ 📂app ┃ ┣ 📂(pokemon) ┃ ┃ ┗ 📂_components ..

📦src ┣ 📂api ┃ ┗ 📜countryAPI.ts ┣ 📂assets ┃ ┗ 📜react.svg ┣ 📂components ┃ ┣ 📜CountryCard.tsx ┃ ┣ 📜CountryList.tsx ┃ ┗ 📜Layout.tsx ┣ 📂pages ┃ ┗ 📜Home.tsx ┣ 📂routes ┃ ┗ 📜Router.tsx ┣ 📂types ┃ ┗ 📜country.ts ┣ 📂zustand ┃ ┗ 📜countryStore.ts ┣ 📜App.css ┣ 📜App.tsx ┣ 📜index.css ┣ 📜main.tsx ┣ 📜QueryClientSetup.tsx ┗ 📜vite-env.d.ts import axios from "axios";import { Country } from "....

import { useEffect, useState } from 'react';import { useAddVideo } from '../lib/supabase/videoApi';import { searchYouTubeVideos } from '../lib/api/youtubeAPI';import { ToastContainer, toast } from 'react-toastify';import { supabase } from '../lib/supabase/supabase';const MainPage = () => {  const [query, setQuery] = useState('');  const [searchResults, setSearchResults] = useState([]);  const [p..

import { useEffect, useState } from 'react';import { useAddVideo } from '../lib/supabase/videoApi';import { searchYouTubeVideos } from '../lib/api/youtubeAPI';import { ToastContainer, toast } from 'react-toastify';import { supabase } from '../lib/supabase/supabase';import { useInView } from 'react-intersection-observer';import { useInfiniteQuery } from '@tanstack/react-query';const ITEMS_PER_PAG..

import { useState } from 'react';import { useAddVideo } from '../lib/supabase/videoApi';import { searchYouTubeVideos } from '../lib/api/youtubeAPI';import { ToastContainer, toast } from 'react-toastify';const MainPage = () => {  const [query, setQuery] = useState('');  const [searchResults, setSearchResults] = useState([]);  const addVideoMutation = useAddVideo();  const searchVideos = async (e)..

"dependencies": {    "@tanstack/react-query": "^5.44.0",    "@tanstack/react-query-devtools": "^5.45.0",    "autoprefixer": "^10.4.19",    "axios": "^1.7.2",    "immer": "^10.1.1",    "json-server": "^1.0.0-beta.1",    "postcss": "^8.4.38",    "react": "^18.2.0",    "react-dom": "^18.2.0",    "react-router-dom": "^6.23.1",    "react-toastify": "^10.0.5",    "styled-components": "^6.1.11",    "ta..

금요일 발표 진행