Frank의 공부 일지

B라는 사람한테 어떠한 메시지를 전달하는 두 가지 경우를 먼저 생각해보면 1. A가 B에게 개인적인 메시지를 전달하기 위해서, 앱을 사용하고, 서비스를 하는 회사의 서버를 거쳐서 B에게 가는 방법( A-> 서버 -> B) 2. 앱에서 사용자에게 무엇인가 홍보하기 위해서, 회사의 서버에서 B에게 메시지를 보내는 방법(서버 -> B) 이 있습니다. 하지만 메시지를 실시간으로 전달받게 하려면, B는 서버에 계속 접속해야 하는데 이러면 배터리나 네트워크 사용으로 인해 문제가 발생할 겁니다. 그래서 중간에 Firebase 서버(혹은 구글 클라우드 서버)가 문제를 해결해줍니다. 모든 앱들은 (1) A -> 서버 -> Firebase 서버 -> B (2) 서버 -> Firebase 서버 -> B 이런 방식으로 실시간..

async await은 Promise를 가독성 좋게 사용하는 한 가지 방법에 불과하다고 합니다. 자바스크립트를 통해 비동기 코드를 처리하는 가장 기본적인 방법은 콜백 함수, 프라미스(Promise), async-await 등이 있습니다. 각각 모두 장단점이 있습니다. 각각의 함수가 중첩되는 상황이 깊어질수록 콜백 함수는 콜백 헬을 만들고, 여러 프라미스가 체이닝이 되어 선언되면 에러를 디버깅하긴 힘듭니다. 여러 개의 비동기 함수를 사용하려 할 때 Promise.all과 async/await을 사용해서 시간을 계산해보면 Promise.all이 훨씬 시간이 단축되는 것을 테스트 해볼 수 있습니다. 그 이유는 async-await 함수는 하나하나 다 기다렸다가 하고, Promise.all은 병렬로 비동기 함..

여러 프로젝트를 진행하다 보면 협업 하는 경우 코드를 공유하거나 라이브러리를 받을 때 node 버전이 다르게 되면 문제가 생기는 부분도 발생할 수 있습니다. 하지만 각 프로젝트 마다 노드 버전을 다르게 쓰는 방법이 있습니다. 우선 제 os는 mac이고 터미널을 zsh를 사용하고 있는데 이제 zsh 설정 파일인 .zshrc에 들어가서 # place this after nvm initialization! autoload -U add-zsh-hook load-nvmrc() { local node_version="$(nvm version)" local nvmrc_path="$(nvm_find_nvmrc)" if [ -n "$nvmrc_path" ]; then local nvmrc_node_version=$(nv..

모듈이 필요한 이유 1. 코드베이스를 나누어 여러 파일로 분할해서 코드를 좀 더 구조적으로 관리. 각각의 독립적인 기능의 조각들을 개발 및 테스트하는데 도움. 2. 다른 프로젝트에 코드를 재사용 가능 3. 은닉성을 제공 4. 종속성을 관리. 필요한 일련의 종속성들을 쉽게 임포트. CommonJS 내부와 모듈 패턴 CommonJS는 Node.js의 첫 번째 내장 모듈 시스템입니다. CommonJS 명세의 두 가지 주요 개념을 요약하면 다음과 같습니다. - require는 로컬 파일 시스템으로부터 모듈을 임포트하게 해줍니다. - exports와 module.exports는 특별한 변수로서 현재 모듈에서 공개될 기능들을 내보내기 위해서 사용됩니다. module.exports vs exports 많은 사람들이 ..

Promise.all - 여러 개의 프라미스를 동시에 실행시키고 모든 프라미스가 준비될 때까지 기다린다고 해봅시다. - 복수의 URL에 동시에 요청을 보내고, 다운로드가 모두 완료된 후에 콘텐츠를 처리할 때 이런 상황이 발생합니다. - Promise.all은 이럴 때 사용할 수 있습니다. let promise = Promise.all([...promises...]); Promise.all 은 요소 전체가 프라미스인 배열(대개는 배열)을 받고 새로운 프라미스를 반환합니다. 배열 안 프라미스가 모두 처리되면 새로운 프라미스가 이행되는데, 배열 안 프라미스의 결괏값을 담은 배열이 새로운 프라미스의 result가 됩니다. 아래 Promise.all 은 3초 후에 처리되고, 반환되는 프라미스의 result는 배열..

자바스크립트 호스트 환경이 제공하는 여러 함수를 사용하면 비동기 동작을 스케줄링 할 수 있습니다. 원하는 때에 동작이 시작하도록 할 수 있습니다. 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..