반응형 React5 [React] 'ref.current' is possibly 'null'. 목차 1. 에러 상황 typeScript를 사용하는 프로젝트 진행 시 상품리스트 중 상단에 추천 상품 영역 슬라이드를 구현하기 위해 useRef로 DOM에 접근하러 했으나, 'ref.current' is possibly 'null'. 와 같은 에러가 발생하였다. ⬇️구현할 기능 : 양쪽 화살표 클릭 시 다른 상품을 보여주기 2. 해당 코드 부분 import React, { useState, useEffect, useRef } from "react"; const ref = useRef(null); const handlePrev = () => { if (ref.current.style.transform === "translateX(0px)") { return; } else { setTranslate(tran.. 2023. 7. 14. [React] Proxy와 Proxy 사용법 Proxy 서버와 클라이언트 사이에 중계기로서 대리로 통신을 수행하는 것 React 라이브러리, 혹은 Webpack Dev Server에서 제공하는 proxy 기능을 통해 CORS 정책을 우회할 수 있다. 별도의 응답 헤더를 받을 필요 없이 브라우저는 React 앱으로 데이터를 요청하고, 해당 요청을 백엔드로 전달하게 된다. 브라우저는 받은 리소스 및 응답과 함께 출처가 같은지 아닌지 확인하고 출처 동일 여부에 따라 4. 응답 파기 여부가 달라진다. React 앱에서 브라우저를 통해 API 요청 시 proxy를 통해 백엔드 서버로 요청을 우회하여 보낸다. 백엔드 서버는 응답을 React 앱으로 보내고 React 앱은 받은 응답을 백엔드 서버 대신 브라우저에게 전달한다. 위 과정으로 출처가 같아지기 때문에.. 2023. 6. 7. [React] 특징과 JSX 문법 React 프론트엔드 개발을 위한 JS 오픈소스 라이브러리 React 3가지 특징 1. 선언형(Decalarative) : 한 페이지를 보여주기 위해 HTML, CSS, JS로 나눠서 적기 보다는 하나의 파일에 명시적으로 작성할 수 있게 JSX(HTML, JavaScript 결합한 문법)를 활용한 선언형 프로그래밍을 지향 2. 컴포넌트 기반(Component-Based) : 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둠 (컴포넌트로 분리하면 서로 독립적이고 재사용 가능, 기능 자체에 집중하여 개발 가능) 3. 범용성 : JavaScript 프로젝트 어디에든 유용하게 적용 (Facebook에서 관리되어 안정적이고, 유명하고, React Native로 모바일 개발도 가능) JSX 주요 문법 JSX (J.. 2023. 4. 27. [React] 리액트에서 아이콘 사용하기 목차 React Icons 1. 설치하기 설치할 폴더로 이동 후 아래 명령어를 통해 설치한다. yarn add react-icons // yarn npm install react-icons --save // npm 2. 사용하기 https://react-icons.github.io/react-icons React Icons React Icons Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using. Installation (for standard modern pro.. 2023. 3. 27. 이전 1 2 다음 반응형
