본문 바로가기

Javascript7

[VS Code] 파일 저장할 때 ESLint 동작하게 하기 예전에는 VS Code의 Extension인 ESLint의 설정메뉴에 Auto Fix On Save라는 메뉴가 있었다. 이 항목을 체크하면 설정이 됐었는데, 최근에 확인해보니 해당 설정 항목이 없어졌다. Auto Fix On Save를 설정하는 방법은 다음과 같다. Mac 기준으로 VSCode에서 Cmd + Shift + P 를 입력하면 명령 팔레트가 등장하는데, Open Settings를 입력한다. 입력으로 열린 settings.json에서 다음 항목을 입력하면 된다. "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "editor.formatOnSave": true, 2022. 1. 27.
첫 Gatsby 사이트 만들고 Gatsby Cloud에 배포하기 사이트를 만드는 과정의 전체 프로세스는 다음과 같습니다. 로컬에서 Github로 소스를 push 합니다. Gatsby Cloud에서 Github에 있는 소스를 빌드하고 배포합니다. 사용자들이 사이트에 접속할 수 있습니다. Gatsby 사이트 만들기 Gatsby 사이트를 만들기위해 Gatsby CLI에서 명령어를 사용해야 합니다. gatsby new 위 명령어를 입력하면 여러 질문들이 터미널에 나타납니다. What would you like to call your site? → 사이트 이름 입력 What would you like to name the folder where your site will be created? → 사이트의 폴더 명 Will you be using CMS? → CMS를 사용할 지.. 2022. 1. 23.
react-router-dom v5, v6 비교 안녕하세요. 이번에 회사에서 react-router-dom의 버전을 업그레이드하는 작업을 진행하면서 v5에서 사용하던 기능들이 v6에서 어떻게 변경되었는지 공유합니다. 1. Switch → Routes 변경 v5에서 사용하던 가 로 변경되었습니다. // v5 // v6 2. exact 옵션 삭제 속성 중, path가 정확히 일치할 때만 사용하는 exact 가 삭제되었습니다. // v5 // v6 3. component 방식 변경 v5에서 사용하던 component, render 속성이 element 속성으로 변경되었습니다. // v5 ( )} /> // v6 4. 중첩 라우팅 방법 변경 4.1 Basic 기존 v5와 동일하게 중첩라우팅을 사용할 수 있습니다. 여기서 차이점은 상위 path에 *가 추가되어.. 2021. 12. 4.
Object Array에서 특정 value의 object를 맨 앞으로 옮기는 방법 Object로 이루어진 배열에서 특정 value가 포함되어있는 object를 배열의 맨 앞으로 옮기는 방법이다. 아래와 같은 데이터가 있다고 가정해보자. const data = [ { index: 1, id: "aaa", name: "aaa", }, { index: 2, id: "bbb", name: "bbb", }, { index: 3, id: "ccc", name: "ccc", } ]; 위 배열에서 name이 bbb인 데이터를 앞으로 하려면 어떻게 해야 할까? 여러 가지 방법이 있겠지만, 가장 간단한 방법으로 spread 연산자를 이용할 수 있다. const newArr = [ ...data.filter(d => d.name === `bbb`), ...data.filter(d => d.name !==.. 2021. 10. 8.
이벤트 버블링과 캡처링 버블링 버블링(bubbling)의 원리는 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작한다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작한다. 3개의 요소가 form > div > p 형태로 중첩된 구조일 경우 가장 안 쪽의 를 클릭하면 순서대로 다음과 같은 일이 벌어진다. 에 할당된 onclick 핸들러가 동작한다. 바깥의 에 할당된 핸들러가 동작한다. 그 바깥의 에 할당된 핸들러가 동작한다. document 객체를 만날 때까지 각 요소에 할당된 onclick 핸들러가 동작한다. 이런 흐름을 "이벤트 버블링"이라고 부른다. 이벤트가 제일 깊은 곳에 있는 요소에서 시작해 부모 요소를 거슬러 올라가며 .. 2021. 5. 27.
2021년에 배워야할 4가지 Javascript ES2021 기능 본 글은 아래 글을 번역한 글입니다. 부족해도 이해해 주세요😆 https://medium.com/dailyjs/4-javascript-es2021-es-12-features-that-you-should-learn-in-2021-d8cd6343bb12 4 JavaScript ES2021 (ES 12) Features That You Should Learn in 2021 The logical assignment operator, Promise.any, and more medium.com 매년 자바스크립에 추가되는 새로운 기능은 4단계 프로세스를 거친다. 살펴볼 새로운 기능은 현재 4단계이고, 마지막 단계이다. 2021년 중반에 출시될 것으로 예상된다. String.prototype.replaceAll Str.. 2021. 5. 27.
업로드한 이미지 압축하기(React/browser-image-compression) Javascript에서 이미지를 업로드 했을 때, 이미지 사이즈를 줄여주는 패키지입니다. 설치 yarn add browser-image-compression or npm install browser-image-compression --save 사용법 주요 사용법입니다. import imageCompression from 'browser-image-compression'; function BrowserImageCompression(){ const compressImage = async (image: File) => { try{ const options = { maxSizeMb: 1, maxWidthOrHeight: 300, } return await imageCompression(image, options.. 2021. 5. 27.