개발소발닭발

이번에는 VScode 기준으로 Prettier, TypeScript, ESLint를 설정해 보겠습니다. 스타터 분들은 이 친구들이 생소하게 들릴지도 모릅니다. 간단하게 VScode - IDE Prettier - 자동 코드 정리 TypeScript - 자바스크립트의 슈퍼셋 ESLint - 자바스크립트 코딩 가이드 라고 생각하면 됩니다. 이해가 잘 안가더라도, 일단 세팅하고 사용해 보길 추천합니다. VScode에는 간단한 포맷터가 내장되어 있지만, Prettier를 이용하면 더 깔끔하게 코드를 정리하고 협업할 수 있습니다. 설치 방법은 간단합니다. Extensions 탭으로 가서 Prettier - Code formatter 를 설치합니다. .prettierrc 설정 파일을 만듭니다. 공식 문서를 보시면 쉽..

Javascript array에는 다양한 내장 함수들이 있습니다. ES6에서 새롭게 생긴 함수들은 아니지만, 이른바 선언형 프로그래밍을 하게 될 때 많이 사용하게 되는 Array 함수들입니다. 장황한 설명은 필요치 않은 것 같아, 간단하게 정리해봤습니다. var arr = [1,2,3,4,5] 1. forEach - 전체를 순회할 때 // 전체를 순회. arr.forEach((item, index, array) => { console.log('돈다'); }) 2. map - 원본 배열 안 건들고 새로운 배열을 만들 때 - 이건 전부다 해당 // 모든 배열의 값을 1 증가. arr.map((item, index, array) => { return item + 1 }) 3. some - 원본 배열 중 하나 ..

이번 시간은 ES6에서 Symbol과 함께 나름 고급 개념이라 생각되는 프록시와 리플렉트에 대해 알아보겠습니다. 리플랙트는 이전에도 있었지만 둘 다 처음 듣는 분도 계실겁니다. 먼저 프록시부터 시작하겠습니다. 프론시는 대리자라는 개념입니다. 어떤 의미인지 감이 안 오신다고요? 먼저 인터셉터라는 개념을 먼저 알아야 하는데요. 개발을 진행하다 보면 하나의 레이어를 만들어 어떤 기능을 가상화하는 경우가 생깁니다. 이게 무슨 소리냐! 검정 화면으로 이해해 보겠습니다.

구조 분해 할당 이건 정말 완전 쿨하다. 화살표 함수가 this를 변수에 담아두는 행동(_this, _self의 추억이여...)들을 사라지게 했다면, 이건 더 많은 부분들을 사라지게 해준다. 그렇다면 구조 분해 할당이 무엇인지 바로 검정 화면으로 알아보자. (이름에 어떤 기능인지 설명이 되어 있다는 사실!) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 // #1 구조 분해 사용 케이스 1 var a, b; [a, b] = [10, 20]; // #1 이용 안한 케이스 1 var a, b; a = 10, b = 20; // #2 구조 분해 사용 케이스 2 var a, b, rest; [a, b, ...rest] = [10, 20..

추후 예정

ES6는 자바스크립트의 새로운 버전이다. 오래된 새로움이지만... 우리가 ES6를 써야하는 이유는 '편하다'이다. 공부를 하고 나면 새로운 JS가 편하고 강력하게 느껴지길 바란다. ES6를 제대로 써보려면 두가지 작업 환경을 세팅해야 한다. - Babel : ES6 코드를 ES5 코드로 바꿔준다. - Webpack : 의존 관계에 있는 여러 스크립트 파일들을 하나의 파일로 묶어준다. (이미지와 css까지도!!) 10분이면 끝나니 같이 해보자. 먼저 Babel부터. 먼저 폴더를 하나 만들고 1. package.json 파일을 만들자. npm init -y - 바벨 설치 npm install --save-dev @babel/core @babel/cli 2. 바벨 프리셋 설치 - 기본 바벨 환경 설치. npm..