juni

📦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 "....

터미널에서 ts-node 사용법 : yarn global add ts-node -> 전역적으로 설치 ->  ts-node 파일명 function sum(a: number, b: number): number {  return a + b;}function objSum({ a, b }: { a: number; b: number }): string {  return `${a + b}`;} type Person = { id: number; age: number; height: number };async function getPerson(): PromisePerson[]> {  const res = await fetch(`http://localhost:5008/people`);  if (!res.ok) {    t..

object literal ( 객체 리터럴 ) : const , let 사용 가능 -> 키+값 페어로 구성된 객체 정의 방식예시 코드 -> 어떤 타입의 값도 대입 가능 -> 코드 사용 전 값이 할당 되어야하므로 런타임 에러 방지 가능const obj = {  a: [1, 2, 3],  b: "b",  c: 4,};enum과 사용 구별enum은 간단한 상수 값 그룹 관리 시 적합 / 상수이므로 각 멤버의 값이 변하면 안됨객체 리터럴은 멤버의 값이나 데이터 타입 변경 가능 / 복잡한 구조와 다양한 데이터 타입 사용 시 사용 유틸리티 타입Partial : 타입 T(제네릭)의 모든 속성을 선택적으로 만듦 -> 기존 타입의 일부 속성만 제공하는 객체 생성예시 코드// interface는 TS에서 객체의 구조 정의..

간단한 성적표 만들기순서 : yarn init -y ( package.json 생성 )-> tsc --init --rootDir ./src --outDir ./dist --esModuleInterop --module commonjs --strict true --allowJS true --checkJS true 입력 ( tsconfig.json 설정 하는 것 ) / 권한때문에 안 될 시 Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass 입력으로 해당 폴더(위치)에서 권한 부여 가능-> package.json에 코드 추가 (scripts부분임)-> src폴더 생성 후 시작-> yarn run build ( 프로젝트 빌드 , 컴파일 에러시 에러남 )-> ..

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..