TIL

필요한 파일 vite.config.ts tsconfig.json vite.config.ts import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; export default defineConfig({ plugins: [react()], resolve: { alias: [ { find: "@", replacement: "/src" }, { find: "@page", replacement: "/src/page" }, ], }, }); { find: "@", replacement: "/src" }, 생성되는 파일은 src 아래에 존재할 것 이므로 "@" 는 " /src " 로 지정 { find: "@page", replace..

컴파일 단계에서 타입을 체크 컴파일러? : 타입검사해줌,다른 프로그래밍 언어로 변환하는 도 설치방법(cmder 사용중) yarn yarn create vite 프로젝트이름 --template react-ts yarn create react-app twitter --template typescript npm npm create vite@latest 프로젝트이름 -- --template react-ts 기본타입

hover 마우스가 해당 요소 위에 있을 때만 스타일 요소 적용 See the Pen Untitled by 윤미주 (@yhjbuldw-the-flexboxer) on CodePen. active 마우스가 해당 요소를 클릭하는 순간에만 스타일 요소 적용 See the Pen Untitled by 윤미주 (@yhjbuldw-the-flexboxer) on CodePen. focus 마우스가 해당 요소를 클릭하고 부터 다른 요소를 선택하기 전까지 계속 스타일 요소 적용 See the Pen Untitled by 윤미주 (@yhjbuldw-the-flexboxer) on CodePen.

너무 간단해서 텍스트 쓸게 없지만.. import없이 환경변수 방법으로 가져와서 사용하면 된다!! 공식문서 https://create-react-app.dev/docs/using-the-public-folder/ Using the Public Folder | Create React App Note: this feature is available with react-scripts@0.5.0 and higher. create-react-app.dev

api 데이터를 받는데 시간이 오래걸려 loading중일때 보여줄 수 있는 페이지를 구현해야겠다고 생각했다. 기존에는 단순 이미지와 텍스트로 구현을 해두었었는데 너무 대충 만든 사이트라는 느낌을 주고 있는 것 같았다. 그래서 loadingbar를 만들어보자! 라는 생각으로 만들었다 import { useEffect, useState } from 'react'; import styled from 'styled-components'; export default function Loading() { const [filled, setFilled] = useState(0); useEffect(() => { if (filled setFilled((prev) => (pr..

하나씩 비교하면서 정리해 보겠다.. 먼저 tanstack-query에 대해 알아보아야 하지 않겠는가? 1. Tanstack-query 란? 주로 서버 상태를 관리하기 위한 도구로 사용된다. 서버에서 데이터를 가져올때 데이터를 업데이트할 때 데이터를 동기화할 때 발생하는 복잡성을 줄여준다! 이는 API호출을 통해 데이터를 가져오고, 그데이터를 UI에 표기하고자 할 때 매우 유용하다. 2. Tanstack-query 사용하는 이유 ! 💡 자동캐싱 : 데이터를 자동으로 캐시하고, 캐시된 데이터를 재사용함으로써 네트워크 사용을 최적화 하고 사용자 경험 개선 - 설명 : 성공적으로 패치된 데이터를 자동으로 캐시하고, 이를 통해 동일한 쿼리에 대한 중복 요청 방지 - 사용 방법: 지정된 쿼리 키(queryKey) ..

YouTube API https://developers.google.com/youtube/v3/getting-started?hl=ko 1. Api key 생성하기 노란색으로 표시해둔 Google 계정 글씨의 링크를 타고 들어가서 구글 계정 로그인 해주기! 1-1 셋업해주기 (나는 이미 만들었던 기록이 있음으로.. 이미지 생략) 셋업 해주고 이용약관 확인 후 agree and continue 1-2 프로젝트 생성하기 1-3 프로젝트를 생성하고 나면 Api key를 받을 수 있다. 만약 확인하지 못하고 창을 닫았다면 사용자 인증 정보에서 API key를 받을 수 있다!

1. 주제 정하기 이번 주제는 Outsourcing 이었다. 그래서 이번 우리조는 YouTube API를 가져와 분석 시트템을 만들고자 했다. 주제: 유튜버 광고 분석서비스(조회 수, 구독자 수, 등 비교) 2. 프레임 만들기 주제를 정하고 나서 프레임을 만들었다. https://www.figma.com/file/QBw7my0Sjp5uJdXKF1wsWS/%EC%95%84%EC%9B%83%EC%86%8C%EC%8B%B1-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-10%EC%A1%B0?type=design&node-id=0-1&mode=design&t=dVvkou9cv3TvIb84-0 3. Router 구조 작성하기 프레임들을 만들었기 때문에 어떤 페이지들이 필요한지 어떤 기능들을 만..

1. 변경하고 싶은 branch 로 체크아웃 git checkout 수정할branch이름 2. 변경하고 싶은 branch 설정 git branch -m 변경할branch이름 3. 기존 브랜치 삭제 git push origin --delete수정할branch이름 4. 새 브랜치 이름으로 push git push origin -u 변경할branch이름

에러가 없는 데이터 가져오기 실패와 더불어 해당 에러까지 포함해 2시간을 잡아먹은...!! 물론 환경변수를 불러오는 부분에서도 문제가 있었다. 하지만 그때는 에러없이 axios에서 값 자체를 받아오지 못했다. 원인을 찾다가 환경변수를 사용할 때에 큰따옴표를 사용하지 않아야 한다는 것을 알았다. 그리고 해당 에러는 이후에 발생된 에러이다. 코드공유 import axios from "axios"; import requests from "./request"; const axiosInstance = axios.create({ baseURL: process.env.REACT_APP_SERVER_URL, headers: { "Content-Type": "application/json", }, params: { id..