개발감성

History 코드의 양이 많아짐에 따라 변수명 중복, tight coupling 등의 문제가 생김 script파일을 나눠도 서로 간섭이 가능하여 생기는 side effect가 발생 function scope, IIFE, Closure를 사용해 각 script파일이 개별적인 scope를 보장받도록 하는 module pattern개발 module pattern은 여전히 global scope duplicate, dependency resulution of declared order 등의 문제가 있음 CommonJS, AMD 등의 모듈 시스템 개발 CommonJS // CommonJS var module1 = require("module1"); //.fight var module2 = require("mod..

이번 글인 모듈패턴을 이해하기 위해서는 즉시실행함수(IIFE)와 Scope, Clusure 개념을 이해하고 있기를 권장합니다. Module Scope Global Scope Module Scope function Scope block Scope Scope는 자신만의 고유의 공간을 가지므로 일반적으로 다른 scope에 영향을 끼칠 수도, 받지도 않는다. 이를 이용하여 모듈 또한 scope를 가지게 만들어서 이름이 겹치거나, tight coupling을 방지할 수 있다. IIFE (function (a) {return a+1}) (a)처럼 함수를 괄호로 감싼 형태로 정의되는 즉시실행함수는 함수이기에 function scope를 가진다. 모듈을 IIFE로 정의하여 자신만의 scope를 가지도록 한다. Clos..

Why do we need modules? Tight Coupling user = {}; function signin(user) { var textfield = "text"; } function isHuman(user) { // ... } // ...more extends // tight coupling 만약 위와 같은 signup과 isHuman이라는 user 인자를 받아서 처리를 하는 두 함수가 있다고 보자, user객체에는 두 함수에 필요한 모든 데이터를 저장할 필요가 있을 것이다. 그리고 user를 사용하는 함수가 계속해서 늘어나면 날수록 coupling은 더 높아지게 된다. user객체를 함부로 수정했다가는 연관되는 함수들에서 파생되는 문제가 커지게 되기 마련이다. 그럼 이 문제를 여러 js파일..

콜백 큐 JS 동작원리 5편 - 런타임 (Event Loop, Callback Queue, 비동기) 지금까지 JS가 V8엔진을 통해 어떻게 기계어로 번역되고 실행되는지 알아봤다. 하지만 JS가 브라우저에서 동작할 때는 다른 얘기가 된다. Node.js 위 사진은 노드 js의 전체 시스템 아키텍처이다. JS developefeel.tistory.com 콜백 큐에 대한 기본적인 내용을 알고 있다는 전제하에 글 작성을 한다. 콜백 큐에는 세 종류의 큐가 있는데, Task Queue, Job Queue, Animation Frame이다. Task Queue //1 Callback Queue - Task Queue setTimeout(() => { console.log("1"); }, 0); //not js, w..

allSettled const promise1 = new Promise((resolve, reject) => setTimeout(resolve, 6000)); const promise2 = new Promise((resolve, reject) => setTimeout(reject, 3000)); Promise.all([promise1, promise2]) .then((data) => console.log(data)) .catch(() => console.log("err")); promise 두 개중 하나는 6초 뒤 성공, 하나는 3초 뒤 실패를 하도록 세팅하고 all을 사용해 promise를 실행시키면 catch문만 실행된다. //allSettled Promise.allSettled([promise1, ..

parallel, race, sequencial은 promise 다중처리를 할 때의 정책이다. promise 다중처리 //3 promise const promisify = (item, delay) => new Promise((resolve) => setTimeout(() => resolve(item), delay)); const a = () => promisify("a", 100); const b = () => promisify("b", 5000); const c = () => promisify("c", 3000); api통신들이 시간차를 두고 도착하는 것을 명확하게 보이기 위해서 promise를 setTimeout에 의해 실행되도록 했다. parallel //parallel async function ..

ES9에서 추가된 for await of는 비동기 처리 반복문이다. const urls = [ "https://jsonplaceholder.typicode.com/users/1", "https://jsonplaceholder.typicode.com/users/2", "https://jsonplaceholder.typicode.com/users/3", "https://jsonplaceholder.typicode.com/users/4", ]; //for await of const getData = async () => { try { const [one, two, three, four] = await Promise.all( urls.map(async (url) => { const res = await fetc..

ES9에서 추가된 finally는 promise가 모두 실행된 후 마지막으로 무조건 실행을 시켜주는 기능을 한다. (결과의 성공, 실패에 영향 없음) //finally const urls = [ "https://jsonplaceholder.typicode.com/users/1", "https://jsonplaceholder.typicode.com/users/2", "https://jsonplaceholder.typicode.com/users/3", "https://jsonplaceholder.typicode.com/users/4", ]; Promise.all( urls.map((url) => { return fetch(url).then((peaple) => peaple.json()); }) ) .then..

async await async함수는 ES8부터 비동기처리를 위해 만들어진 함수 형식이다. //async await ES8 fetch("https://jsonplaceholder.typicode.com/users") .then((res) => res.json()) .then(console.log); async function fetchUsers() { const res = await fetch("https://jsonplaceholder.typicode.com/users"); const data = await res.json(); console.log(data); } fetchUsers(); fetch는 response를 promise객체 형태로 리턴한다. 일반 함수에 async를 붙이고 api통신을 기..

Promise promise는 비동기에서 사용되는 연산으로, 리턴하는 프로미스 객체는 대기(pending): 이행하지도, 거부하지도 않은 초기 상태. 이행(fulfilled): 연산이 성공적으로 완료됨. 거부(rejected): 연산이 실패함. 세 가지 형태 중 하나로 나타난다. resolve, reject const promise = new Promise((resolve, reject) => { if (true) { resolve("Worked"); } else { reject("Error"); } }); 프로미스에 성공 시 수행할 연산을 암묵적으로 resolve라 하고 실패 시 수행할 연산을 암묵적으로 reject라 한다. promise는 성공을 하면(resolve가 실행되면) fulfilled 상태..