[자바스크립트] module.export, exports 들어가며 모듈을 만들고 활용하면서 module.export, exports에 대한 명확한 이해 없이 개념을 활용하고 있다는 것을 알았습니다. 이번 기회에 이 개념들을 명확하게 이해해야겠다고 생각했습니다. module.exports, exports 는 무엇일까? 개발을 하다보면, 특정 코드를 모듈화 할 때 module.exports, exports, export, export default를 사용하곤 합니다. 뭐가 이렇게 많아? 생각하실 수 있습니다. 먼저 module.exports와 exports에 대해 차근차근 알아보겠습니다. 예를 들어 아래와 같은 코드가 있다고 보겠습니다. // app.js var Person = function(name) { this.name = name; } Person.prot.. [자바스크립트] 비동기 작업의 시간을 줄여보기 들어가며 본격적으로 개발을 하면서, 다양한 API를 개발하곤 합니다. 한 번은, 검색 API를 개발하면서, 응답속도가 3초 이상이 걸리는 로직이 있었습니다. 간단한 로직이었음에도 왜 3초씩이나 걸리는지 제대로 알지 못했습니다. 지금 생각해보면, 비동기에 대한 이해가 없어서 생긴 문제였습니다. 지금부터라도 비동기에 대해 더 자세히 공부해야겠다고 생각했습니다. 아래 글은 이 글을 바탕으로 작성됐습니다. await의 숨은 병목 async, await을 활용하면 비동기 처리를 동기적으로 처리하게끔 코드를 작성할 수 있습니다. 하지만, 이 과정에서 await을 마구잡이로 사용하게 된다면, 코드를 처리하는 시간이 오래 걸릴 수 있습니다. const book = await read(param); // 1000ms c.. [자바스크립트] 비동기 작업을 순서대로 처리하기 들어가며 본격적으로 개발을 하면서, 다양한 API를 개발하곤 합니다. 한 번은, 검색 API를 개발하면서, 응답속도가 3초 이상이 걸리는 로직이 있었습니다. 간단한 로직이었음에도 왜 3초씩이나 걸리는지 제대로 알지 못했습니다. 지금 생각해보면, 비동기에 대한 이해가 없어서 생긴 문제였습니다. 지금부터라도 비동기에 대해 더 자세히 공부해야겠다고 생각했습니다. 아래 글은 이 글을 바탕으로 작성됐습니다. forEach는 순차처리가 왜 안되는가? 만약 이런 질문을 받게 된다면 어떻게 답할 수 있을까요? Q. 지금 아래의 코드는 result가 1초 후 한꺼번에 10개가 출력되는데, 이걸 1초 간격으로 10번 출력되게 코드를 고쳐주세요. function test() { const promiseFunction = (.. [자바스크립트] async와 await 들어가며 저는 async, await만 쓰면 비동기가 되는 줄로만 알고 있었습니다. 그래서 async, await을 왜 써야 하는지 생각하지도 않고 무지성으로 사용하곤 했습니다. 하지만 모든 함수에 await를 쓴다면, 처리 속도가 상당히 지연될 수 있다는 것을 배우고서는 async, await을 어떻게 써야 할지에 대한 고민을 할 수 있었습니다. 그렇다면, 내가 정말 비동기에 대해 자세히 알고 있는가? 반문해봤을 때, 제대로 알지 못한다는 것을 알았습니다. 이번 기회에 이 부분을 제대로 정리해보고자 합니다. 다음 글은 캡틴 판교님의 자바스크립트 async와 await 글을 바탕으로 정리했습니다. 글에 대해 더 자세히 보고 싶으신 분은 여기를 참고해주세요. async, await란? async와 awai.. [자바스크립트] Promise 들어가며 저는 async, await만 쓰면 비동기가 되는 줄로만 알고 있었습니다. 그래서 async, await을 왜 써야 하는지 생각하지도 않고 무지성으로 사용하곤 했습니다. 하지만 모든 함수에 await를 쓴다면, 처리 속도가 상당히 지연될 수 있다는 것을 배우고서는 async, await을 어떻게 써야 할지에 대한 고민을 할 수 있었습니다. 그렇다면, 내가 정말 비동기에 대해 자세히 알고 있는가? 반문해봤을 때, 제대로 알지 못한다는 것을 알았습니다. 이번 기회에 이 부분을 제대로 정리해보고자 합니다. 다음 글은 캡틴 판교님의 자바스크립트 Promise 쉽게 이해하기 글을 바탕으로 정리했습니다. 글에 대해 더 자세히 보고 싶으신 분은 여기를 참고해주세요. Promise가 왜 필요한가요? 프로미스는.. [자바스크립트] 비동기 처리와 콜백 함수 들어가며 저는 async, await만 쓰면 비동기가 되는 줄로만 알고 있었습니다. 그래서 async, await을 왜 써야 하는지 생각하지도 않고 무지성으로 사용하곤 했습니다. 하지만 모든 함수에 await를 쓴다면, 처리 속도가 상당히 지연될 수 있다는 것을 배우고서는 async, await을 어떻게 써야 할지에 대한 고민을 할 수 있었습니다. 그렇다면, 내가 정말 비동기에 대해 자세히 알고 있는가? 반문해봤을 때, 제대로 알지 못한다는 것을 알았습니다. 이번 기회에 이 부분을 제대로 정리해보고자 합니다. 다음 글은 캡틴판교님의 자바스크립트 비동기 처리와 콜백 함수의 글을 바탕으로 정리했습니다. 글에 대해 더 자세히 보고 싶으신 분은 여기를 참고해주세요. 비동기 처리? 그게 뭔가요? 자바스크립트의 비.. [자바스크립트] Getter와 Setter 들어가며 여행을 떠나보면, 언젠가 왜 이 여행을 하려 했을까 하는 생각이 들 때가 있었습니다. 공부를 할 때도 마찬가지였습니다. 자바스크립트를 활용해서 개발하고 있는데, 자바스크립트에 대한 기본은 알고 있는지, 왜 자바스크립트로 개발을 하려고 했는지 이유가 궁금할 때가 있었습니다. 이 고민에 대한 해답을 찾기 위해서는 자바스크립트, Node.js에 대해 자세하게 알아야겠다고 생각했습니다. 이번 기회를 통해 자바스크립트, Node.js에 대해 이해해야겠다고 생각했습니다. Getter와 Setter ES2015에서는 향상된 객체 리터럴 표기법을 소개했습니다. 그중에서 setter 및 getter 함수를 제공하기 시작했습니다. 그럼 setter 및 getter 구문을 사용할 수 있는 방법을 살펴보겠습니다. c.. [자바스크립트] Map, Set, WeakMap, WeakSet 들어가며 여행을 떠나보면, 언젠가 왜 이 여행을 하려 했을까 하는 생각이 들 때가 있었습니다. 공부를 할 때도 마찬가지였습니다. 자바스크립트를 활용해서 개발하고 있는데, 자바스크립트에 대한 기본은 알고 있는지, 왜 자바스크립트로 개발을 하려고 했는지 이유가 궁금할 때가 있었습니다. 이 고민에 대한 해답을 찾기 위해서는 자바스크립트, Node.js에 대해 자세하게 알아야겠다고 생각했습니다. 이번 기회를 통해 자바스크립트, Node.js에 대해 이해해야겠다고 생각했습니다. Map과 Set ES2015에서는 해시 맵 컬렉션을 활용하도록 Map이라는 새로운 프로토타입을 도입했습니다. 간단히 예를 들어보겠습니다. const profiles = new Map(); profiles.set('twitter', '@ad.. [자바스크립트] var, let, const의 차이를 알아보자 (feat. TDZ) 들어가며 자바스크립트로 개발을 하면서, 호이스팅 이라는 개념을 알고서는 개발은 참 심오하고 어렵구나 생각했던 기억이 있습니다. 변수는 분명 아래에 있는데, 왜 위에서 그 변수를 부르면 코드가 어떻게 이해할 수 있을까 신기해하곤 했습니다. 그러던 중 누군가 저에게 호이스팅에 대해 이야기하면서 TDZ에 대해 이야기한 적이 있습니다. TDZ에 대해 처음 들어본 개념이었기에, 아직 자바스크립트에 대해 제대로 모르고 있구나 라는 생각을 했습니다. 이번 기회에 이 부분을 제대로 정리해봐야겠다고 생각했습니다. 이상한 알 수 없는 에러는 무엇인가? 가끔 개발하다 보면 Cannot access 'X' before initialization과 같은 에러를 받아보곤 했습니다. 초기화 전에는 접근할 수 없다는 뜻인데, 여기서.. [자바스크립트] parseInt와 Number의 차이 들어가며 알고리즘을 공부하면서, 가끔 parseInt를 써야 하는 경우와 Number를 써야 하는 경우는 언제인지 궁금했습니다. 이번 기회에 parseInt와 Number의 차이에 대해 정리해보면서, 언제 각각의 메서드를 사용해야 하는지 알 수 있었으면 좋겠습니다. Number(str) Number 메서드는 문자열을 인자로 받으면 해당 문자열을 숫자로 바꿔줍니다. 아래의 코드는 '1234'라는 문자열을 1234라는 숫자로 형 변환하여 변수 num에 담는 코드입니다. var num = Number('1234'); // 1234 하지만 아래처럼 문자열이 숫자가 아닌 경우 num에는 NaN이 저장됩니다. var num = Number('1000원'); // NaN 만약 소수점은 어떻게 표시가 될까요? 이 경우.. 이전 1 2 다음
