맨동이

렌더링이 두 번 발생하는 이유는 React.StrictMode 때문입니다. npx create-react-app 으로 생성하면 자동 설정이 되있습니다. 따라서 index.js 에서 이 Wrapper를 제거해주면 컴포넌트가 두번씩 호출되지 않습니다. ReactDOM.render( , document.getElementById('root') ); StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구입니다. Fragment와 같이 UI를 렌더링하지 않으며, 자손들에 대한 부가적인 검사와 경고를 활성화합니다. Strict 모드는 개발 모드에서만 활성화되기 때문에, 프로덕션 빌드에는 영향을 끼치지 않습니다. 리액트 공식문서 StrictMode는 아래와 같은 부분에서 도움이 됩니다. 안전하지 ..

자바스크립트로 웹 개발을 할 때, 데이터를 저장하고 싶은데 저장해야할 데이터가 별로 중요하지 않거나, 유실되도 무방할 데이터라면 서버 단에 데이터를 저장하는 것이 낭비일 수가 있습니다. 로컬 스토리지 vs. 세션 스토리지 이 두 개의 차이점은 데이터가 어떠한 범위 내에서 얼마나 보존되느냐에 있습니다. 세션 스토리지는 웹페이지의 세션이 끝날 때 저장된 데이터가 지워지고, 로컬 스토리지는 웹페이지의 세션이 끝나더라도 데이터가 지워지지 않습니다. 브라우저에서 같은 웹사이트를 여러 탭이나 창에 띄우면, 여러 개의 세션 스토리지에 데이터가 서로 격리되어 저장되며, 각 탭이나 창이 닫힐 때 저장해 둔 데이터도 함께 소멸합니다. 반면에, 로컬 스토리지의 경우 여러 탭이나 창 간에 데이터가 서로 공유되며 탭이나 창을 ..

ES11 에서 추가된 기능들에 대해서 알아보겠습니다. 1. Optional Chaining(?.) 2. globalThis 3. Nullish coalescing Operator(??) 4. Dynamic import 5. BigInt 6. String.prototype.matchAll 7. Promise.allSettled 1. Optional Chaining (?.) 옵셔널 체이닝(optional chaining) ?.을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있습니다. ?.은 ?.'앞’의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환합니다. const data = { user: { name: 'foo', getName() { retu..

1. 번들러의 개념 웹사이트에서는 HTML, CSS, JavaScript가 동작을 합니다. React, SCSS, TypeScript 등의 여러 라이브러리나 프레임워크를 사용하여 코딩을 진행하고 프로젝트를 제작합니다. 그리고 번들러를 통해 변환하는 과정을 거쳐 HTMl, CSS, JavaScript로 웹에서 동작시킬 수 있도록 합니다. 물론, 번들러가 직접적으로 변환시키는 것은 아닙니다. 예를 들어, SCSS 문법을 CSS로 변환시킬 때 parcel-bundler가 Sass라는 외부 패키지를 설치하여 이로부터 도움을 받아 완료한 것입니다. 3. parcel VS webpack 3.1 parcel parcel 번들러는 별도의 구성이 없는 단순 자동 번들링을 제공해줍니다. 매우 편리한 번들러이지만 webpa..

ESLint 1. ESLint 개발을 진행하면서 코딩 스타일을 공통적으로 맞추어 진행할 수 있어야 서로 쉽게 이해를 하며 업무를 할 수 있습니다. 이를 도와주는 도구가 바로 ESLint입니다. ESLint 혹은 Lint라 불립니다. 1.1 패키지 설치 npm 명령어로 프로젝트를 시작하고 ESLint 패키지를 설치해보도록 하겠습니다. 개발용 의존성 패키지로 설치하겠습니다. 이는 아시다시피 개발하는 상황에만 필요하며, 웹브라우저에서 동작할 시에는 필요하지 않음을 의미하는 옵션입니다. 더보기 $ mkdir eslint-test $ cd eslint-test $ npm init -y $ npm i eslint -D // 패키지 설치 1.2 패키지 초기화 더보기 $ npx eslint --init 해당 명령어를 ..