coding- w00se

env .eslintrc.json의 env 스크립트의 실행 환경을 명시하는 곳으로, 실행 환경에 맞는 전역 변수들을 사전에 정의할 수 있습니다. 예를 들어 아래의 예시 코드처럼 jest: true를 설정하면 jest 파일에서 describe, test, expect 등의 함수들이 no-undef 규칙에 걸리지 않는 것을 확인했습니다. env: { jest: true } env에 설정할 수 있는 옵션은 여기서 확인 가능합니다. es2021 옵션 공식 문서에 의하면 es2021: true 옵션을 사용하면 ECMAScript 2021의 전역 변수들을 사전에 정의하고 ecmaVersion parser option도 12로 설정한다고 합니다. parserOption eslint에서 사용하는 parser의 opti..

호출 스케줄링 - 함수의 실행을 예약하는 방법 타이머 함수를 이용하면 일정 시간이 지난 후 특정 함수를 실행 가능하다. 타이머 함수 javascript에서는 대표적인 타이머 함수는 setTimeout과 setInterval 가 있다. setTimeout - 일정 시간이 지난 후 콜백 함수를 한번 호출 setTimeout은 단 한번 동작하는 타이머 생성 타이머가 만료되면 전달받은 콜백 함수를 호출 MDN - setTimeout setTimeout의 반환 값은 생성한 타이머에 대한 고유 id 값 타이머 고유 id 값은 실행 환경에 따라 다르다. 반환 값에 대한 예시 코드 및 결과 const firstTimerId = setTimeout(() => { console.log('first callback 함수 호..

Javascript 에러는 어떤 것들이 있나? MDN - Erorr 대표적으로 Erorr 생성자가 있고 그 이외 주요 오류는 SyntaxError, ReferecneError, TypeError, RangeError, URIError, EvalError 등이 있다. 에러 처리를 하지 않으면? → 프로그램이 강제 종료된다. 에러를 처리한 경우 try { const arr = null; arr[0]; } catch (err) { console.log('에러: ', err); // TypeError 발생 } console.log('여기까지 실행이 되나?'); // 실행됨 에러를 처리하지 않는 경우 const arr = null; arr[0]; // 여기서 코드 실행 종료 conso..

정보 은닉을 하는 이유 모던 Javascript Deep Dive에 의하면 정보 은닉은 아래와 같은 효과가 있다. 정보 은닉은 외부에 공개할 필요가 없는 구현의 일부를 외부에 공개되지 않도록 감추어 적절치 못한 접근으로부터 객체의 상태가 변경되는 것을 방지해 정보를 보호하고, 객체 간의 상호 의존성, 즉 결합도를 낮추는 효과가 있다. - 모던 Javascript Deep Dive 24장 중 간단히 정리를 하면 아래와 같습니다. 객체의 상태를 안정적으로 관리(예상하지 못한 변화를 예방) 객체 간의 결합도를 낮춤 Javascript에서 정보 은닉을 하는 방법 javascript에서는 # 접두사를 이용해서 클래스에 private 속성을 만들 수 있습니다. 과제를 수행하면서 정보 은닉을 연습했던 예시 코드는 아..

얼마 전에 Vanilla Javascript로 탭 메뉴와 탭 전환 기능을 구현할 일이 있었습니다. 구현을 할 때는 느끼지 못했지만, 돌이켜 생각을 해보니 비효율적으로 구현을 한 게 아닌가 생각이 들었습니다. 따라서 해당 기능에 대해 다시 연습을 해보았고, 이번 글에서는 탭 메뉴와 탭 전환 기능을 구현하는 방식에 대해 정리하려 합니다. 연습 예시 연습 예시 화면은 아래와 같습니다. 구현 방법 연습 화면은 위 이미지와 같습니다. 빨간색 영역: 버튼 목록 영역으로 각 버튼을 누르면 파란색 영역에 변화가 생깁니다. 파란색 영역: 탭의 내용을 나타는 영역으로, 클릭된 버튼에 따라 '탭 1 페이지', '탭 2 페이지', '탭 3 페이지'로 변하게 됩니다. 전체 코드 1. 각 button 태그에 데이터 속성으로 se..

최근 vscode에서 eslint를 사용하면서 extension이 제대로 동작하지 않는 에러를 만나 불편함을 겪었습니다. 다행히 vscode-eslint repository의 issue에서 해결 방법을 찾아 잘 해결이 됐습니다. 이번 글에서는 eslint와 prettier의 설치법과 설정, 그리고 vscode에서 eslint extension 사용 시 만났던 에러에 대해 정리를 하려 합니다. eslint와 prettier란? eslint 린트(lint)는 소스 코드에서 문제가 될 만한 점을 찾는 작업이고, 린터(linter)는 이를 도와주는 소프트웨어이다. eslint는 javascript에서 대중적으로 사용되는 linter이다. prettier code formater의 일종으로, 정해진 규칙에 따르도..

오늘 linter를 이용해서 컨벤션의 어긋난 코드를 수정하면서, Airbnb Javascript Style Guide에서 아래의 규칙을 발견했습니다. 3.6 Only quote properties that are invalid identifiers. eslint: quote-props 해당 규칙은 객체(object) 내의 프로퍼티의 이름과 관련된 규칙으로, Javascript 식별자 네이밍 규칙을 준수하는 프로퍼티 이름은 '(따옴표)를 쓰지 않아도 된다는 규칙입니다. 해당 영어 구문의 indentifiers을 보고 식별자가 매칭이 안돼서 번역기를 돌렸습니다. 따라서 'identifier === 식별자'를 각인시키는 겸, 이번 글에서는 Javscript의 용어인 식별자와 프로퍼티에 대해 정리하려 합니다. ..

얼마 전 코드 리뷰를 해주시는 팀원으로부터 '구조 분해 할당 준수 필요!'라는 내용의 피드백을 받았습니다. 덕분에 '구조 분해 할당'이라는 키워드도 알게 됐고, 이번 글에서는 '구조 분해 할당'에 대해 찾아본 내용을 정리하려 합니다. 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 값들을 개별 변수에 저장하는 Javascript의 표현식입니다. 사용 예시 구조 분해 할당 - 배열 예시 // 구조 분해 할당 - 배열 예시 // 구조 분해 할당 - 기본 사용 예시 let arr = [1, 2, 3, 4, 5] let [ first, second, ...rest ] = arr; console.log("frist: ", first); // first: 1 console.log("second: ", sec..

Webpack이란 무엇인가? At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles. 위는 webpack 공식 문서에 나온 webpack에 대한 설명이다. webpack은 module bundler(모듈 번들러)이며 webpack은 프로젝트에 사용된 module의 의존성 그래프를 바탕으로 하나 이상의 bundle을 생성한다. '실전 ..

Babel이란 무엇인가? Babel은 자바 스크립트 컴파일러다! 즉, Javascript 파일을 입력으로 받고 출력으로 Javascript 파일을 반환한다. Babel은 왜 필요한가? Javascript만 생각했을 때 브라우저 종류와 그것의 버전 별로 지원하는 javascript 최대 버전이 있다. 즉, 어떤 환경(브라우저 종류와 버전)에서 최신 javascript 문법을 지원하지 않는 경우가 발생한다. *IE(Internet Explore)는 자동 업데이트가 안돼서 주로 위와 같은 문제는 IE에서 발생한다고 한다. 때문에 작성된 javascript 파일을 브라우저가 이해할 수 있는 javascript 버전에 맞게 변환시킬 필요가 있고 babel을 통해 javascript 변환을 할 수 있다. 대표적으로..