Frank의 공부 일지

자바스크립트 호스트 환경이 제공하는 여러 함수를 사용하면 비동기 동작을 스케줄링 할 수 있습니다. 원하는 때에 동작이 시작하도록 할 수 있습니다. setTimeout은 스케줄링에 사용되는 가장 대표적인 함수입니다. 실무에서 맞닥뜨리는 비동기 동작은 아주 다양합니다. 스크립트나 모듈을 로딩하는 것 또한 비동기 동작입니다. src에 있는 스크립트를 읽어오는 함수 loadScript(src)를 예시로 비동기 동작 처리가 어떻게 일어나는지 살펴보면 function loadScript(src) { // 태그를 만들고 페이지에 태그를 추가합니다. // 태그가 페이지에 추가되면 src에 있는 스크립트를 로딩하고 실행합니다. let script = document.createElement('script'); scrip..

개발을 하다 보면 자체 에러 클래스가 필요한 경우가 종종 있다. 네트워크 관련 작업 중 에러는 HttpError, 데이터베이스 관련 작업 중 에러는 DbError, 검색 관련 작업 중 에러가 발생했다면 NotFoundError를 사용하는 것이 직관적이다. 직접 에러 클래스를 만든 경우, 이 에러들은 message나 name, 가능하다면 stack 프로퍼티를 지원해야 한다. HttpError 클래스의 객체에 statusCode 프로퍼티를 만들고 404나 403, 500 같은 숫자를 값으로 지정할 수 있을 것이다. Error를 상속받아 커스텀 에러 클래스를 만들게 되면 obj instanceof Error를 사용해서 에러 객체를 식별할 수 있다는 장점이 있다. 애플리케이션 크기가 점점 커지면 우리가 만들게 ..

에러가 발생하면 스크립트는 즉시 중단되고, 콘솔에 에러가 출력된다. 그러나 try..catch 문법을 사용하면 스크립트가 중단되는 걸 방지하고, 에러를 잡아서(catch) 더 합당한 무언가를 할 수 있게 된다. try..catch는 오직 런타임 에러에만 동작 - try..catch는 실행 가능한 코드(유효한 자바스크립트 코드)에만 동작한다. try..catch는 동기적으로 동작 - setTimedout처럼 '스케줄 된' 코드에서 발생한 예외는 try..catch에서 잡아낼 수 없다. 에러 객체 에러가 발생하면 자바스크립트는 에러 상세내용이 담긴 객체를 생성하고 그 후 catch 블록에 이 객체를 인수로 전달한다. try{ // ... } catch(err){ -> '에러 객체', err 대신 다른 이름으..

자바스크립트의 this는 다른 프로그래밍 언어의 this와 동작 방식이 다르다. 자바스크립트에선 모든 함수에 this를 사용할 수 있다. function sayHi(){ alert(this.name); } this 값은 런타임에 결정된다.(컨텍스트에 따라 달라진다.) 동일한 함수라도 다른 객체에서 호출했다면 this가 참조하는 값이 달라진다. let user = { name: "John" }; let admin = { name: "Admin" }; function sayHi(){ alert(this.name); } //다른 두 객체에서 동일한 함수 사용 user.f = sayHi; admin.f = sayHi; //this는 점(.) 앞의 객체를 참조하기 때문에 this 값이 달라진다. user.f();..

ECMAScript 코드에서 문제점을 검사하고 일부는 더 나은 코드로 정정하는 린트 도구 중의 하나. * 린트: 소스 코드에 문제가 있는지 탐색하는 작업을 도와주는 소프트웨어 도구를 의미. 코드의 가독성을 높이고 잠재적인 오류와 버그를 제거해 단단한 코드를 만드는 것이 목적. 코드에서 검사하는 항목 - 포매팅 - 코드 품질 설치 및 사용법 npm i -D eslint //.eslintrc.js module.exports = { env: { es6: true, node: true, }, extends: "eslint:recommended", globals: { Atomics: "readonly", SharedArrayBuffer: "readonly", }, parserOptions: { ecmaVersio..

promise 객체를 좀 더 쉽게 다룰 수 있게 고안된 문법. async 기본 예제 async function greet() { return 'hello'; } greet().then(console.log); async 함수에서는 promise가 아닌 값을 리턴하더라도 resolved promise가 반환된다. await 기본 예제 function greet() { return new Promise(function(resolve){ setTimeout(function() { resolve('hello'); }, 1000); }); } (async function() { var result = await greet(); //resolved 될 때까지 대기 console.log(result); })(); 1..

자바스크립트 비동기 작업의 최종적인 결과(또는 에러)를 담고 있는 객체. 작업 결과에 따라 성공 또는 실패를 리턴하며 결과 값을 전달받을 수 있습니다. * 비동기 처리 - 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성 promise의 3가지 상태 및 처리 흐름 - pending(대기): 처리가 완료되지 않은 상태 - fullfilled(이행): 성공적으로 처리가 완료된 상태 - rejected(거부): 처리가 실패로 끝난 상태 이행(fullfillment) 값이나 거부(rejection)와 관련된 에러(원인)를 받기 위해 프라미스 인스턴스의 then() 함수를 사용할 수 있습니다. promise.then(onFulfilled, onRejected) prom..

3.1 ESLint를 사용하라 - ESLint는 발생 가능한 코드 에러를 체크하고 껄끄러운 간격 문제를 식별하는 것부터 프로그래머가 분별없이 에러를 던지는 것과 같은 코드의 심각한 안티 패턴을 감지하여 코드 스타일을 바꾸는 것에 대한 사실상의 표준이다. - ESLint도 자동으로 코드스타일을 고칠 수 있지만 prettier와 beautify같은 수정 부분의 포맷을 맞춰주는 강력한 툴이 있고 ESLint와 함께 작동된다. -> 그렇게 하지 않을 경우: 프로그래머가 쓸데없이 간격과 각 줄의 길이 문제에 집중하고 프로젝트의 코드스타일에 대해 과도하게 생각하느라 시간을 낭비하게 된다. 3.2 Node.js에 특화된 플러그인들 - vanila JS만 지원하는 ESLint의 표준 규칙 위에 eslint-plugin..

2.1 비동기 에러 처리시에는 async-await 혹은 promise를 사용하라 - 비동기 에러를 콜백 스타일로 처리하는 것은 지옥으로 가는 급행열차나 마찬가지다. 평판이 좋은 promise 라이브러리를 사용하거나 훨씬 작고 친숙한 코드 문법인 try-catch를 사용하게 해주는 async-await를 사용하는 것이다. -> 그렇게 하지 않을 경우: Node.js의 function 콜백 스타일은 에러 처리와 일반 코드의 혼합, 코드의 과도한 중첩, 어색한 코딩 패턴 때문에 유지보수가 불가능한 코드로 가는 확실한 길이다. 예) promise를 사용해서 에러를 잡아내는 예제 doWork() .then(doWork) .then(doOtherWork) .then((result) => doWork) .catch..

1.1 컴포넌트 기반으로 설계 - 코드를 컴포넌트로 나누고, 각각의 컴포넌트가 자신의 폴더 혹은 할당된 코드베이스를 안에서 작고 간단한 단위로 유지되도록 해라. -> 그렇게 하지 않을 경우 새로운 기능을 작성하는 개발자가 변경사항이 어떤 영향을 미치는지 알기가 힘들면 의존하고 있는 다른 컴포넌트를 망칠까 두려워 하게 되고, 이는 배포를 더 느리고 더 불안전하게 만든다. 좋은예: 자족적인 컴포넌트 기반으로 설계 나쁜예: 파일을 기술적인 역할별로 모아두기 1.2 컴포넌트를 계층화하고, Express를 그 경계 안에 둬라 - 각각의 컴포넌트는 웹, 로직, 데이터 접근 코드를 위한 객체인 '계층'을 포함해야 한다. 이것은 우려할 만한 요소들을 깨끗하게 분리할 뿐만 아니라 모의 객체를 만들어 테스트하기 굉장히 쉽..