웹에 대한 것들 끄적끄적

웹 접근성이란? 장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용 할 수 있도록 보장하는 것. ir (Image Replacement) 웹 접근성을 고려하여 대체 텍스트를 써야하지만 숨기고 싶고, 스크린 리더기에는 인식이 되어야 할 필요가 있는 경우 태그의 alt 속성 값으로 표현하기에 대체 텍스트가 길 때 CSS background 속성으로 처리한 의미 있는 이미지일 때 클래스명을 blind로 사용하기도 함 아래의 속성들은 화면에서 영역 자체를 잡히지 않도록 할 수는 있지만, 스크린 리더로 읽히지 않기 때문에 웹 접근성에 좋지 않다. display: none; visiblity: hidden; font-size: 0; line-height: 0; width: 0; ..

.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: 렌더링하려..

얼마 전에 새로 배운 noopener와 noreferrer.. target="_blank"는 새 창으로 링크된 페이지가 열리는데 이 때 보안상 취약점이 생길 수 있다고한다. 이런 위험을 방지하기위해 사용하는 속성이다. noopener : 링크된 페이지에서 링크를 건 페이지(부모)를 참조할 수 없게되어 보안 취약점을 방지할 수 있다. noreferre : 링크를 클릭할 때 링크를 건 페이지(부모)의 정보를 HTTP 리퍼러 헤더가 전송되지 않는다. 사용자의 개인정보를 보호할 수 있고 어떤 사이트로부터 연결되었는지 감출 수 있다. 새 창 열기