맨동이

넷스케이프 커뮤니케이션즈와 마이크로소프트가 자사 브라우저의 시장 점유율을 높이기 위해 자사 브라우저에서만 동작하는 기능을 추가하고, 이로 인해 브라우저에 따라 웹페이지가 정상적으로 동작하지 않는 크로스 브라우징 이슈가 발생하기 시작했다. 이러한 문제점을 방지하기 위해 자바스크립트의 표준화가 필요했다. 버전 출시 연도 특징 ES1 1997 초판 ES2 1998 ISO/IEC 16262 국제표준과 동일한 규격 사용 ES3 1999 정규 표현식, try...catch ES5 2009 (HTML5와 함께 출현한 표준안) JSON, strict mode, 접근자 프로퍼티, forEach, map, filter, reduce, some, every ES6 2015 let/const, 클래스, 화살표 함수, 템플릿 ..

EEXIST: file already exists npm i react-router-dom을 하는데 오류가 떴습니다. react-router-dom 뿐만아니라 npm install 시 이런 오류가 날 수 있는데요! 오류는 이미 사용중이다 존재한다 라고 해서 권한 문제일까 싶어 cmd 창을 관리자 권한으로 실행해서 npm install 을 해도 마찬가지였습니다. 해결책 node_modules 폴더 삭제 npm install npm audit fix 그리고 실행했더니 성공하였습니다!

JSX에서 for 오류 Waring 코드 Warning: Invalid DOM property `for`. Did you mean `htmlFor`? 이유 JSX는 javaScrit이기 때문에 for은 반복의 의미를 가지고 있어서 HTML 상에서는 htmlFor을 써줘야 한다. 해결방법 for대신 htmlFor을 써야한다. // warning

Warning 코드 Warning: React does not recognize the computedMatch prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase computedmatch instead. If you accidentally passed it from a parent component, remove it from the DOM element. react-router-dom을 사용할 때 위와 같은 오류가 뜰 때가 있었다. 기능에 문제는 없지만 오류 코드가 뜨는것이 불편했다. 검색 결과 해결 방법으로는 {isLoggedIn ? ( ):..

개인 프로젝트를 여느 날과 똑같이 작업을 하고 커밋&푸시를 했는데 rejected 메시지가 뜨면서 푸시가 되질 않았다.. push 도중 만난 라는 에러 메시지였다. 푸시할 때 개인 이메일 주소를 게시한다는 에러가 떴다. 친절하게 아래에 나와 있는 링크에 들어가서 확인해보니 위의 설정이 체크되어 있었다. 이메일 설정을 변경하다 자동(?) 으로 체크 되었던것 같다. 내용은 내이메일을 노출하는 명령줄 푸시 차단 (작성자 이메일로 비공개 이메일을 사용하는 커밋을 푸시하면 푸시를 차단하고 비공개 이메일 노출에 대해 경고합니다.)

렌더링이 두 번 발생하는 이유는 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 해당 명령어를 ..