Prettier .prettierrc 설정하기 🔎 .prettierrc 란 Prettier 설정파일로 프로젝트 상단에 .prettierrc 의 옵션값을 확인하여 코드 포맷팅을 진행한다. 🔎 printWidth 기본값은 80으로 코드 한줄의 갯수를 설정한다. 🔎 tabWidth 기본값은 2로 들여쓰기(tab) 의 너비수를 설정한다. 🔎 useTabs 기본값은 false 로 탭을 사용할 지 스페이스바로 간격을 조정할 지 설정한다. 🔎 semi 기본값은 true 로 코드 마지막에 ;(세미콜론)을 붙일지 설정한다. 🔎 singleQuote 기본값은 false 로 큰따옴표 대신 작은따옴표를 사용할 지를 설정한다. 🔎 quoteProps 기본값은 'as-needed' 로 개체의 속성이 인용될 때 변경한다. as-n..
ESLint .eslintrc 설정하기 🔎 .eslintrc 란 ESLint 설정파일로 JSON, YAML, JavaScript 형식을 지원한다. 항상 이름은 .eslintrc 이어야하고 각 파일 형식에 맞춰 확장자를 사용하면 된다. (ex. .eslintrc.json) 🔎 root Monorepo 와 같이 하나의 repository 에서 여러개의 프로젝트를 관리하는 경우 여러개의 설정파일을 같이 사용할 수 있는데 이럴 때 유용한 옵션이 root 옵션이다. 해당 프로젝트에 .eslintrc 가 없다면 그 상위 폴더를 거슬러 올라가면서 root 가 true 로 설정된 .eslintrc 를 탐색하고 있다면 해당 설정파일로 ESLint 를 적용한다. 🔎 plugins ESLint 에서 기본적으로 제공하는 규칙..
Webpack webpack.conifg.js 설정하기 🔎 webpack.conifg.js란 webpack 4버전 이후로는 따로 설정파일이 없더라도 webpack 이 src.index.js 파일을 dist/main.js 로 번들링 해주기 때문에 설정파일이 필수라고는 할 수 없다. 하지만 모든 프로젝트가 동일한 설정으로 번들링 된다는 것은 불가능하기 때문에 각 프로젝트에 맞는 설정값을 셋팅하는 것이 좋다. 이럴 때 webpack.config.js 파일에 설정값을 셋팅하면 webpack 은 해당 파일을 자동으로 읽고 설정에 맞게 번들링 해준다. 🔎 Entry webpack 이 어떤 파일을 기준으로 번들링 할 지 그 시작점을 나타낸다. 기본값은 아래와 같이 src/index.js 이다. module.expor..
TypeScript tsconfig.json 설정하기 🔎 tsconfig.json 란 tsconfig.json 란 타입스크립트(ts) 파일을 자바스크립트(js) 파일로 변환하는 컴파일 설정 정의해놓은 파일이다. tsc --init 해당 명령어를 통해 tsconfig.json 파일을 자동으로 생성할 수도 있고 직접 tsconfig.json 파일을 만들어도 동일하게 동작한다. 위 명령어로 tsconfig.json 을 생성하면 모든 속성들이 나열되어 있고 주석으로 설명도 적혀있다.(영어) 이 후부터는 자주 사용되는 속성들에 대해 알아보자. 🔎 files 프로젝트에서 타입스크립트를 컴파일할 파일들의 목록들을 나타낸다. 이 아래에 include 와 exclude 속성이 나오는데 files 는 이 2개 속성보다 우..
Node.js package.json 설정하기 🔎 package.json 란 package.json 란 npm(또는 yarn, pnpm) 으로 관리되는 node.js 기반의 프로젝으에 대한 상세 이자 해당 프로젝트에서 관리하는 module 의 의존성에 대한 상세를 모아놓은 파일이다. 즉, 해당 프로젝트에 대한 전반적인 상세를 기술해 놓은 파일이라 할 수 있다. package.json 은 파일명에서도 알 수 있지만 json 형식의 파일이고 필수적인 항목으로 name, version 이 있으며, 그 외에도 다양한 항목이 있다. 이 후부터는 package.json 의 여러 항목에 대해 알아보도록 하자. 🔎 name name 이란 단어에서 알 수 있듯이 프로젝트의 고유한 이름을 나타낸다. 위에서 언급한 내용처럼..
문자열 관련 메소드(String Method) javascript에서 문자열을 사용할 때 자주 사용하는 methods charAt : index에 해당하는 위치의 문자를 반환 const str = 'Hello World' console.log(str.charAt(0))// H console.log(str.charAt(5))// ' ' console.log(str.charAt(10))// d console.log(str.charAt(11))// '' indexOf : 인자로 전달된 문자 or 문자열이 처음 나타나는 위치의 index를 반환 const str = 'Hello World' console.log(str.indexOf('H'))// 0 console.log(str.indexOf('l'))// 2 ..
JAVASCRIPT 코드 품질을 높여주는 JS 함수 🔎 Debounce debounce 함수는 일련의 빠른 이벤트가 반복적으로 함수를 활성화 하는 것을 방지하는 역할을 한다. 이벤트가 실행되지 않은 채로 일정 시간이 경과할 때까지 이벤트를 실행시키지 않고 함수의 실행을 연기하는 방식으로 동작한다. debounce 함수는 사용자가 버튼을 빠르게 클릭했을 때 함수들이 실행되는 것을 방지하여 성능을 향상하는 방식으로 아주 유용한 해결책이다. // JS에서 debounce 구현 function debounce(func, delay) { let timeout return function() { const context = this const args = arguments clearTimeout(timeout) t..
JAVASCRIPT Event Loop 자바스크립트는 싱글 스레드로, 한 번에 한 가지 일만 할 수 있다. 일반적으로 이는 큰 문제가 되지 않지만 30초가 걸리는 일을 수행한다고 생각했을 때 이는 30초동안 아무것도 할 수 없는 상태가 된다는 것이다. 다행히, 브라우저는 자바스크립트 엔진에서는 제공하지 않는 Web API (DOM API, setTimeout, HTTP request)를 지원한다. 이러한 Web API들은 비동기, non-block 동작을 만드는데 도움을 준다. 우리가 함수를 실행하면, 그 함수는 call stack에 추가된다. 콜 스택은 자바스크립트 엔진의 한 부분이며, 브라우저에만 한정된 것은 아니다. 이것은 선입후출의 스택으로 함수가 값을 반환하면 그 함수는 스택에서 빠져나와 사라진..
JAVASCRIPT this 바인딩 객체지향 프로그래밍 언어들은 this라는 키워드를 사용한다. 이 때 this는 해당 코드를 실행하는 클래스의 인스턴스를 나타낸다. JavaScript에도 this라는 키워드가 있는데 JS에서 사용되는 this 는 기존 객체지향 프로그래밍 언어에서의 this와는 다른점이 있기 때문에 객체지향 프로그래밍 언어에 익숙한 사람들은 이해하지 못하는 경우가 있다. function foo() { const a = 10 console.log(this.a) } foo() // ??? JS를 처음 접할 때 해당 코드에서 출력값은 10일 것이라 기대한다. 하지만 실제로는 10이라는 값이 출력되지는 않는다. JS에서 this가 참조하는 것은 함수가 호출되는 방식에 따라 결정되는데 이것을 t..
JAVASCRIPT Map 객체 기존 객체와는 다르게 메소드만을 이용하여 값을 넣고 뺄 수 있다. 객체(Object)와 다르게 문자열이 아닌 값도 키로 사용 가능하며 추가된 순서대로 반복이 가능하다. const testMap = new Map([ [1, '숫자'], ['1', '문자'], [true, 'boolean'] ]) console.log(testMap.get(1))// '숫자' console.log(testMap.get('1'))// '문자' console.log(testMap.get(true))// 'boolean' for (const [key, value] of testMap) { console.log(key + " : " + value) } // 1 : 숫자 // 1 : 문자 // true..
