웹에 대한 것들 끄적끄적

.env 파일에 api key를 저장해놓고 REACT_APP_RAPID_API_KEY=발급받은키 js 파일에서 key를 아래와 같이 호출하였다. process.env.REACT_APP_RAPID_API_KEY 에러코드 Rapid API Key를 발급받아서 데이터를 가져오는데 자꾸만 401(UnAuthorized), 429 에러가 떴다. 처음에는 오타가 났나 싶어서 API key와 소스도 계속 복붙해봤는데 해결되지 않았다. 뒤늦게 콘솔에 가져온 api key를 찍어봤는데 Undefined가 떴다, 어라라...? console.log(process.env.REACT_APP_RAPID_API_KEY); 분명 rapidapi.com와 postman에서 테스트했을 때는 잘만 되는데 왜!!!!!! 프로젝트에서는 연..

SEO는 "Search Engin Optimization"의 약어로, 검색 엔진 최적화를 의미한다. 웹사이트나 웹페이지를 검색 엔진에서 높은 순위로 표시되도록 최적화하는 프로세스와 전략을 나타낸다. 웹사이트가 검색 결과 페이지에서 더 높은 순위에 나타나고, 더 많은 유기적(자연적) 트래픽을 확보하려는 목적으로 사용된다. import React from 'react' import { Helmet, HelmetProvider } from 'react-helmet-async' import Header from './Header' import Footer from './Footer' const Main = ( props ) => { return ( {props.title && {props.title}} {pro..

https://react.dev/reference/react/Suspense – React The library for web and native user interfaces react.dev 하위 항목이 로드를 완료할 때까지 대체를 표시할 수 있다. React.Suspense는 React에서 비동기적으로 데이터나 컴포넌트를 불러오는 과정에서 대기 상태를 처리하기 위한 컴포넌트이다. 이 컴포넌트를 사용하면 데이터나 컴포넌트가 로딩되기를 기다릴 수 있으며, 로딩 중에는 대체 컨텐츠(로딩 스피너 또는 로딩 메세지)를 표시할 수 있다. React.Suspense를 사용하면 코드 스플리팅, 데이터 로딩, 서버 사이드 렌더링과 같은 시나리오에서 사용자 경험을 향상시키는데 도움이 된다. children: 렌더링하려..