FrontEnd/React.js37 [React.js] https에서 http API request 호출하기 ISSUE Mixed Content: The page at ... was loaded over HTTPS, but requested an insecure script 'http://..' https 웹사이트에서 http request를 시도하면 위와 같은 에러 구문이 발생한다. 해당 에러는 https 환경에서만 발생하는 에러라서 dev 환경에서는 문제없이 잘 동작하지만, 배포 직후 에러가 발생해 당황스러울 수 있다. 위 에러는 git-pages로 정적 파일을 호스팅했을 때 발생한 에러이다. dev 환경에서는 http에서 http를 호출하기 때문에 에러가 발생하지 않지만, git-pages로 배포를 하면 호스팅 주소가 자신의 git repogitory 주소가 되기 때문에 자동으로 https로 배포가 되므로.. 2023. 2. 16. [React.js] Warning: Expected server HTML to contain a matching <div> in <div>. 문제 상황 export default function ExComponent() { const items = window.localStorage.getItem('items'); return ... } Next.js에서 SSR(Server Side Rendering)을 사용한다면 위와 같은 코드 이용 시 아래와 같은 오류가 발생할 수 있다. Warning: Expected server HTML to contain a matching in . 해결 방법 첫 번째 렌더링이 서버의 초기 렌더와 일치해야하기 때문에, 브라우저에서만 실행되어야하는 코드는 useEffect 코드 내부에서 실행되어야 한다. window 객체는 클라이언트 측에서 브라우저의 요소들과 자바스크립트 엔진들을 담고 있는 객체이기 때문에 useEf.. 2022. 7. 16. [React.js] Using target="_blank" without rel="noreferrer" (which implies rel="noopener") is a security risk in older browsers target="_blank" 속성값을 사용해 새로 오픈한 페이지에는 window.opener가 존재한다는 것을 확인할 수 있다. 이는, 새로 오픈된 페이지에서 이전 페이지를 제어할 수 있는 권한이 있다는 것인데, 최악의 경우 window.opener 객체를 사용해 악의적인 동작이 가능하다. 하지만, rel="noopener"를 사용하면 새로 열린 페이지에서 window.opener 객체가 존재하지 않는 것을 확인할 수 있다. 유사한 기능으로 noreferrer는 새로 열린 사이트가 window.opener 객체를 조작하지 못하게 한다. 차이점은 noreferrer는 다른 페이지를 탐색할 때 브라우저가 참조 웹 페이지의 주소를 보내지 못하게 한다. 최신 브라우저의 대부분은 noopener를 지원하지만, n.. 2022. 6. 20. [React.js] 성능 향상을 위한 코드 분할(React.lazy, Suspense) 코드 분할(Code Spliting)이 필요한 이유 렌더링 최적화 도중 lighthouse 성능 측정 점수가 초반보다 현저히 떨어진 것을 알 수 있었다. lighthouse에서 권장하는 방법 중 하나가 사용하지 않는 자바스크립트 줄이기였는데, 서버 측에서 렌더링하지 않는 경우 'React.lazy()'로 자바스크립트 번들을 분할하는 방법을 사용하라는 것이었다. 대부분의 React 앱들은 Webpack, Rollup 또는 Browserify 같은 툴을 사용하여 여러 파일을 하나로 병합한 번들 파일을 웹 페이지에 포함해 한 번에 전체 앱을 로드한다. 아래는 여러 파일이 하나의 파일로 번들링되는 예시이다. App // app.js import { add } from './math.js'; console.log.. 2022. 5. 19. [React.js] React 18의 새로운 기능 React 18의 새로운 기능 1. 자동 배치(Automatic Batching) 배치란, 리액트가 더 나은 성능을 위해 여러 개의 상태 업데이트를 한 번의 리렌더링(re-render)으로 묶는 작업이다. function App() { const [count, setCount] = useState(0); const [flag, setFlag] = useState(false); function handleClick() { setCount(c => c + 1); // 리렌더링 전 setFlag(f => !f); // 리렌더링 전 // 리액트는 오직 마지막에만 리렌더링을 한 번 수행한다. (배치 적용) } return ( Next {count} ); } 위의 handleClick 이벤트 핸들러 함수에서는 상태.. 2022. 5. 18. [React.js] Yarn berry 적용하며 발생한 에러 정리 Failed to load config "react-app" to extend from. .yarnrc.yml에 nodeLinker: node-modules를 제외하여 Plug'n'Play 기능을 활성화하려고 할 때 생기는 오류로 아래와 같이 Create React App에서 사용하는 ESLint 구성 패키지를 추가함으로써 해결했다. yarn add eslint-config-react-app -D 이 방법 이외에도 package.json의 extends에서 react-app를 삭제하는 방법도 사용하는 것 같다. "extends": [ "react-app" ] }, Plugin "react" was conflicted between "package.json » eslint-config-react-app 해.. 2022. 4. 13. 이전 1 2 3 4 ··· 7 다음 반응형
