차곡차곡

1. 라이브러리 설치 $ npm install @react-oauth/google@latest # or $ yarn add @react-oauth/google@latest 2. App.tsx 에서 가장 바깥쪽에 GoogleOAuthProvider 컴포넌트로 감싸주고, 파라미터로 클라이언트 ID를 넣어준다. (현재 나는 라우터를 AppRouter 파일에 따로 작성해서 불러온 상태) (클라이언트 ID는 구글에 어플리케이션을 등로할 때 받을 수 있다 - https://velog.io/@nuri00/Google-OAuth-로그인-구현) import AppRouter from "./routes/AppRouter"; import { GoogleOAuthProvider } from "@react-oauth/googl..

모달 세로 가운데 정렬 top: 50%; -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); transform: translate(0, -50%); 참고 : https://hyunipad.tistory.com/36 css 말풍선 모양 만들기 Bubbler - CSS Speech Bubble Generator - i like pixels

1. 아래 사이트에서 원하는 폰트 선택 눈누 상업용 무료한글폰트 사이트 noonnu.cc 2. 폰트 적용 코드 복사 3. App.css 에 해당 코드 붙여넣기 (이때 App.js에 App.css가 import 되어 있어야 한다.) @font-face { font-family: "Happiness-Sans-Title"; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2205@1.0/Happiness-Sans-Title.woff2") format("woff2"); font-weight: normal; font-style: normal; } + 다운로드하여 로컬 폰트 적용하는 법 src에 폰트가 저장돼 있는 경로를 넣어주면 된다. [React] ..

1. 부트스트랩 설치 yarn add react-bootstrap bootstrap 2. App.js 혹은 index.js에 아래 코드 추가 import "bootstrap/dist/css/bootstrap.min.css"; 3. 컴포넌트 사용 사용할 컴포넌트를 import 하고 태그를 사용하면 된다. React-Bootstrap The most popular front-end framework, rebuilt for React. react-bootstrap.github.io

문제 상황 axios를 이용해서 newsapi로부터 데이터를 받아오는 과정에서 429 에러가 났다. 해결 방법 없음 ㅋㅋ 검색 해보니까 429 에러는 요청을 너무 많이 보내서 그렇다고 한다. How to Fix 429 Too Many Requests Error The HTTP 429 error is returned when too many requests are made to a page within a short period of time. Find out more about the causes and fixes. kinsta.com 며칠 뒤에 다시 해보니까 잘 돌아간다 ! 요청 너무 많이 해서 그런 거 맞는 듯. 기다리는 게 답

문제 상황 axios.get 으로 데이터를 받아오는 과정에서 계속해서 타입 에러가 났다. TypeError: Cannot read properties of undefined (reading 'get') 해결 방법 상단에 axios를 import 해주는 코드가 잘못됐었다. 자동 완성 되는 대로 냅뒀더니 import { axios } from "axios"; 이렇게 작성 돼 있었는데, 괄호가 없어야 한다! import axios from "axios"; 수정했더니 잘 돌아간다.

외부 API를 연동하여 뉴스 뷰어 만들기 To-do sohy.notion.site 참고 자료 : https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/, https://amor-fati.tistory.com/105?category=937110

SPA SPA는 Single Page Application의 약어로, 말 그대로 한 개의 페이지로 이루어진 애플리케이션을 의미한다. 페이지로 구성된 웹 애플리케이션을 만들 때 페이지별로 컴포넌트들을 분리해가면서 프로젝트를 관리하기 위해 필요한 것이 바로 라우팅 시스템이다. 기존에는 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아 오고, 페이지를 로딩할 때마다 서버에서 CSS, JS, 이미지 파일 등의 리소스를 전달받아 브라우저 화면에 보여주었다. 사용자 인터랙션이 별로 없는 정적인 페이지에서는 이러한 방식이 적합하지만, 사용자 인터랙션이 많고 다양한 정보를 제공하는 모던 웹 애플리케이션에서는 적합하지 않다. SPA의 경우 html을 한 번만 받아와서 웹 애플리케이션을 실행시킨 후, 그 이후에..