본문 바로가기

분류 전체보기

 (388)
<JS> 제너레이터 1. 제너레이터 * 제너레이터란 - 일반적으로 함수는 0개 또는 하나의 값을 반환한다. 하지만 제너레이터(generator)는 반환값을 여러개로 만들 수 있다. - 제너레이터는 일반적인 함수가 아닌 제너레이터 함수를 통해 만들게 된다. * 제너레이터 만들기 - 제너레이터는 '*' 키워드와 함께 만들 수 있다. function* test() { yield 1; yield 2; return 3; } const generator = test(); const one = generator.next(); const two = generator.next(); const three = generator.next(); console.log(one); // { value: 1, done: false } console.lo..
<ES10> ES2019 Features 1. 소개 - 이번 ES2019 에서도 크게 새로운 기능은 추가되지 않고, 편의성과 관련된 기능들이 몇가지 추가되었다. 2. 기능 * Object fromEntries const arr = [ ["x", "11"], ["y", "22"], ["z", "33"], ]; const obj = Object.fromEntries(arr); console.log(obj); // { x: '11', y: '22', z: '33' } - Object 에 fromEntires 메서드가 추가되었다. 이는 entries 와 정반대의 기능을 하는 메서드이다. entries가 객체를 2차원배열로 만드는 기능이라면 fromEntires는 2차원배열을 객체로 만드는 역할을 한다. * Array flat const arr = [1..
<ES9> ES2018 Features 1. 소개 - ES9라도고 불리는 ES2018은 2018년에 소개된 ECMA Script의 2018버전이다. - 2015만큼은 아니지만 꽤 유용한 기능들이 추가되었다. 객체에서도 나머지 연산자와 스프레드 연산자를 사용할 수 있게 되었고, 비동기 반복이 편리해졌다. 2. 기능 * Spread Properties const obj = { x: 11, y: 22, z: 33 }; const foo = { a: 9999, ...obj }; console.log(foo); // { a: 9999, x: 11, y: 22, z: 33 } - 기존에 배열에서만 사용되었던 스프레드연산자가 객체에서도 사용가능하게 되었다. - 위를 통해 편리하게 얕은복사가 가능해졌다. * Rest Properties const obj =..
<이벤트루프> 태스크 큐 : 마이크로태스크 큐 & 매크로태스크 큐 1. 소개 * 소개 - 지난 장에서 봤듯이 비동기 작업은 태스크큐에서 대기하다가 콜스택으로 넘어가서 실행된다. - 그렇다면 여러개의 비동기 작업이 들어가면 어떻게 될지 알아보자. - 아래에서 사용되는 이미지와 코드는 이전 포스트의 연장선이므로 이전 포스트를 보지 않았다면 보는 것을 권장한다. 2. 실행 * 태스크 큐 - 먼저 동일한 비동기 동작이 여러 개가 있을 경우를 살펴보자. function myFunc1() { Promise.resolve().then(() => { console.log("promise1"); }); myFunc2(); Promise.resolve().then(() => { console.log("promise3"); }); console.log("bye"); } function m..
<이벤트루프> JS와 이벤트루프 1. 소개 * JS 와 이벤트루프 - 이벤트 루프(event loop)는 태스크가 들어오면 이를 처리하고, 잠들고, 처리하는 일련의 과정을 반복하는 자바스크립트의 루프를 의미한다. 그렇다면 이것이 무슨 의미가 있을까. - 자바스크립트는 '단일 스레드' 기반의 언어이다. 하지만 자바스크립트를 써본 사람들은 이미 알겠지만 여러 작업이 동시에 처리되고 있음을 알 수 있다. 이러한 작업에 필요한 것이 '이벤트 루프'이다. - 정리하면 자바스크립트는 태스크를 처리하는 이벤트 루프를 통해 비동기 방식으로 동시 작업을 지원한다. - 이 때 알아둬야 할 것은 이벤트 루프는 ECMAScript 스펙에 등재된 것이 아닌 브라우저나 노드JS에서 지원하는 것이라는 점이다. 자바스크립트 엔진은 단일 호출 스택(Call Stac..
<ES8> ES2017 Features 1. 소개 - ES2017은 전년도에 발표된 ES2016보다는 많은 기능이 추가되었다. ES8로도 불리는 ES2017의 가장 큰 변화는 역시 async, await의 등장이다. 2. 기능 * Padding a String - 문자열에 패딩 메서드가 추가되었다. const month = "8"; const number = "1.2"; const padMonth = month.padStart(2, "0"); const padNumber = number.padEnd(5, "x"); console.log(padMonth); // 08 console.log(padNumber); // 1.2xx - padStart와 padEnd 모두 첫 번째 인자에 string 길이를 제한하고, 그 길이보다 모자란 부분을 두 번째..
<후기> 부커톤 (부스트캠프 해커톤) 후기 1. 시작 개발을 시작한 이후 막연하게 해커톤에 참여해보고 싶다라는 생각을 했었다. 비전공자에 개발을 시작한지 얼마되지도 않은 나에게는 너무 먼 이야기같았고, 그들만의 행사? 같은 느낌이 강했다. 하지만 이번 추석기간에 현재 참여중인 네이버 부스트캠프에서 해커톤행사가 열리게 되었고, 좋은 기회를 잡을 수 있게 되었다. 해커톤 행사의 이름은 부커톤이다. 부스트캠프 + 해커톤을 의미한다고 한다. 9월 23일부터 24일까지 1박 2일(이라 쓰고 무박 2일이라 읽는다.)동안 진행되었다. 사실 날짜를 보고 고민을 하긴 했었다. 지금까지 열심히 달려왔고 추석기간 꿀같은 1주일 휴식기간이 주어졌기 때문이다. 그래도 꿈꿔왔던 해커톤행사이기에 기분좋게 참가신청을 했다. 참여인원을 보니 절반도 참여하지 않아서 조금 놀랬다..
<Front-end> 쓰로틀링과 디바운싱 1. 소개 - 최근에 수많은 이벤트를 발생시킬 수 밖에 없는 부분을 개발하면서 고민에 빠졌었다. 이 정도로 많은 요청이 있을때마다 이벤트를 발생시키는 것이 옳은건지, 이것을 최적화 할 수는 없는지 고민을 했다. - 예를 들면 사용자가 스크롤을 내릴 때마다 특정 함수를 발생시킨다고 가정하자. 스크롤 좌표가 바뀔때마다 함수가 실행될텐데 정말 이것이 올바른 방법일까? - 이러한 의문에 쓰로틀링과 디바운스에 대해 공부해보라는 조언을 받았고, 이렇게 정리해보려 한다. - 참고로 제목에서는 프론트엔드의 기술이라고 썼지만, 이는 순전히 필자가 웹 프론트엔드 개발자이기 때문이다. 그렇기 때문에 아래에서도 웹을 예시로 들 예정이다. 디바운싱과 쓰로틀링은 프로그래밍 기법 중 하나임을 명심하길 바란다. 2. 쓰로틀링 * 의..
<Level 1> 복서 정렬하기 with JS 문제 설명 복서 선수들의 몸무게 weights와, 복서 선수들의 전적을 나타내는 head2head가 매개변수로 주어집니다. 복서 선수들의 번호를 다음과 같은 순서로 정렬한 후 return 하도록 solution 함수를 완성해주세요. 전체 승률이 높은 복서의 번호가 앞쪽으로 갑니다. 아직 다른 복서랑 붙어본 적이 없는 복서의 승률은 0%로 취급합니다. 승률이 동일한 복서의 번호들 중에서는 자신보다 몸무게가 무거운 복서를 이긴 횟수가 많은 복서의 번호가 앞쪽으로 갑니다. 자신보다 무거운 복서를 이긴 횟수까지 동일한 복서의 번호들 중에서는 자기 몸무게가 무거운 복서의 번호가 앞쪽으로 갑니다. 자기 몸무게까지 동일한 복서의 번호들 중에서는 작은 번호가 앞쪽으로 갑니다. 제한사항 weights의 길이는 2 이상 ..
<월간회고> 08월 | 부스트캠프 멤버십 시작 들어가며 사실 저번 회고에서 부스트캠프 멤버십에 붙으면 계속 주간회고를 쓰리라 다짐했었지만 막상 붙고나니 챌린지처럼 스펙타클하지 않아서 그냥 월간회고를 쓰려고 한다. 사실 매주 쓰는 것이 귀찮아서이기도 하고, 차라리 다른 공부내용을 쓰고 싶어서이기도 하다. 월간회고는 부스트캠프 이전처럼 써보려고 한다. 부스트캠프 회고내용도 들어가겠지만, 그외에 내가 개인적으로 공부하는 것들까지 회고할 예정이다. 이번 달에는 1. 부스트캠프 챌린지 수료 8월 13일, 부스트캠프 챌린지 과정이 끝이 났다. 4주간 매일매일 처음보는 CS 지식들이 가득했고, 그것들을 JS로 구현하는 과정에서 많이 배우고 성장했다. 하루단위로 진행되다보니 너무 빡세고, 새벽2시까지 코딩하는 나날의 연속이었다. 힘들긴 했지만 그만큼 얻는 것도 많..

티스토리툴바