분류 전체보기340 [Node.js] npm install vs npm ci 차이점 npm(Node Package Manager)이란? 프로젝트에 필요한 라이브러리를 다운로드 또는 관리 할 수 있도록 해주는 프로그램이다. 일반적으로 npm을 사용하게 되면(npm init 시) package.json 파일을 프로젝트 폴더 바로 아래에서 생성하여 모듈과 해당 모듈의 버전을 관리한다. 요즘 CLI를 통해서 프로젝트를 생성하게 되면 기본적으로 함께 포함되어 있다. 또는 그렇지 않은 경우 npm init을 통해 기본 세팅이 가능하다. npm install이란? npm install [ ...] npm install, 또는 npm i는 종속성을 설치하는데 사용된다. 모든 종속성을 설치한다. 종속성 버전을 지정할 때 ^ 또는 ~를 사용하는 경우 npm이 지정한 버전과 동일한 버전을 설치하지 못할 수.. 2022. 8. 9. [Vue.js] v-html 대체하기 v-html이란? v-text(이중 중괄호, mustaches) 디렉티브는 HTML이 아닌 일반 텍스트로 데이터를 해석한다. 따라서 아래 코드는 그대로 텍스트로 보여지게 된다. Using mustaches: {{ rawHtml }} Using mustachs: This should be red. v-html을 사용하면 태그가 포함된 문자열을 HTML로 출력해줄 수 있다. Using v-html directive: Using v-html directive: This should be red. v-html의 문제점 웹사이트에서 임의의 HTML을 동적으로 렌더링하면 XSS취약점으로 쉽게 이어질 수 있다. 따라서 신뢰할 수 있는 콘텐츠에서만 HTML 보간을 사용하고 사용자가 제공한 콘텐츠(유저로부터 입력받는 부.. 2022. 8. 6. [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. 이전 1 2 3 4 5 6 7 ··· 57 다음 반응형
