전체 글338 [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. [양방향 통신 방법] Polling vs WebSocket 기존의 양방향 통신 방법 HTML5 표준 기술인 웹소켓 방식 이전에는 마치 실시간인 것처럼 작동하게 하는 방법들이 있었다. Polling(폴링) 클라이언트가 n초 간격으로 request를 서버로 계속 날려서 response를 전달받는 방식이다. 장점 비교적 구현이 쉽다. 단점 서버측에서 보낼 내용이 없어도 클라이언트는 알 수 없기 때문에 계속해서 request를 통한 확인이 필요하다. HTTP는 단발성 통신이기 때문에 header가 매우 무거운 프로토콜 중 하나로 이 프로토콜이 계속해서 requeset를 날리면 서버의 부담이 증가한다. 초 간격을 늘린다면 실시간성이라고 보기 어렵다. Long Polling(롱 폴링) 클라이언트의 요청에 대해 응답을 보내지 않고 timeout이 날 때까지 기다리다가, 이벤.. 2022. 5. 17. [JavaScript] Proxy 객체란? Proxy는 특정 객체를 감싸 프로퍼티 읽기, 쓰기와 같은 객체에 가해지는 작업을 중간에서 가로채는 객체로, 가로채진 작업은 Proxy 자체에서 처리되기도 하고, 원래 객체가 처리하도록 그대로 전달되기도 한다. Proxy는 다양한 라이브러리와 몇몇 브라우저 프레임워크에서 사용되고 있다. Syntax new Proxy(target, handler); target : 기본 동작을 가로챌, 즉 감싸게 될 객체로 함수를 포함해서 모든 객체가 가능하다. handler :동작을 가로채는 메서드인 'trap'을 가지고 있는 객체로, 여기에서 프록시를 설정한다. proxy에 작업이 가해지고, handler에 작업과 상응하는 트랩이 있으면 트랩이 실행되어 proxy가 이 작업을 처리할 기회를 얻게 된다. 트랩이 없으면 .. 2022. 5. 6. 이전 1 2 3 4 5 6 7 ··· 57 다음 반응형
