Front-end/Javascript
-
[Javascript] async & await?Front-end/Javascript 2020. 6. 14. 16:17
본 글을 스터디 목적으로 작성한 글입니다 :-) github.com/Moka-react/SharingStudy Preface 흔히 생각하는 도큐먼트의 목적을 가진 정적인 문서에서, 다양한 요소들이 다이나믹하게 상호작용하는 지금까지, 모던 웹어플리케이션은 지난 몇 년 동안 큰 발전을 해왔습니다. 다이나믹한 웹의 끝판왕을 보여주는 듯한 Apple의 웹사이트가 대표적인 예시입니다. 수요가 있으면 공급이 있듯이, 우리의 수요에 따라 Javascript도 발전을 이루어왔습니다. 비동기적인 요청을 위한 큰 흐름을 보자면 XMLHttpRequest부터 Ajax, Promise, fetch, async&await까지 선택지가 다양해졌습니다. 주로 Promise로 코드를 짜오던 습관을 코드의 간결함과 가시성을 위해서 E..
-
[Javascript] sort() 함수의 함정Front-end/Javascript 2020. 5. 17. 23:38
Array.sort() 프로그래머스 알고리즘을 풀던 중 한 가지 사실을 알게 되었다. const array1 = [1, 30, 4, 21, 100000]; array1.sort(); console.log(array1); 다음 코드의 결과는 [1, 4, 21, 30, 100000] 일 것 같았다. 하지만 [1, 100000, 21, 30, 4]를 리턴하게 된다. 그 이유는 javascript의 sort 함수는 아스키 코드를 기준으로 정렬하기 때문에 위와 같은 결과가 나오게 된다. Compare Function MDN 설명에 따르면, compare function을 제공하지 않으면 위에서 언급했던 것처럼, 아스키코드를 기준으로 정렬한다. 따라서 원하는 정렬을 위해서는 compare function을 제공해야..
-
[Javascript] es6 함수들 도중 break?Front-end/Javascript 2020. 5. 5. 18:03
Javascript와 es6 최근 node.js와 Vuex기반 프로젝트 기능을 개발하고 테스트 하던 중, 생각하지도 못한 버그가 발생하였다. es6의 Array.map, Array.filter, Array.reduce 등의 함수들은 많은 개발자들의 수고를 덜어주고 있다. for loop으로 했어야 할 코드가 훨씬 가독성 있고, 깔끔해지기 때문에 나 또한 선호하는 편이다. 이 함수들이 어떻게 만들어졌는지 보지 않고 쓰다가 결국 삽질을 하게 되었다. 시작된 삽질 다음과 같은 코드를 작성하면 어떤 결과를 보여줄까? const testArray = [{"A": "a"}, {"B": "b"}, {"C": "c"}] //Case1 testArray.map(item => { const key = Object.keys..
-
[Javascript] Eventloop(이벤트루프)Front-end/Javascript 2020. 5. 5. 12:01
대부분 김동우님, thms200님의 글을 통해 이해의 목적으로 작성하였습니다. Javascript와 단일스레드 Javascript는 타 프로그래밍 언어와 다르게 '단일 스레드' 기반이다. 즉, 동시에 하나의 작업만 처리할 수 있다는 의미인데, 사용자들이 보는 웹은 전혀 그래보이지 않는다. Javascript 다른 무언가가 있는걸까? 운영체제(Operating Systems)를 공부해보면 프로세스 스케쥴링(CPU 프로세스를 효과적으로 사용하기 위한 스케쥴링)에서도 이번 포스트의 예와 비슷하게 비유할 수도 있을 것 같다. 프로세스들을 스케쥴링을 통해 아주 잘 처리하면 동시에 처리하는 듯한 느낌이 들기도 한다. 다단계 큐에 기반한 스케쥴링은 우선 순위에 따라서, 처리해야할 태스크(task)들을 큐(Queue)..
-
[Javascript] var, let, const 차이는?Front-end/Javascript 2020. 5. 4. 13:51
var 변수 선언시 사용되는 var는 아래 링크에서 설명하였다. https://daniel-park.tistory.com/5 [Javascript] Hoisting(호이스팅) Hoisting이란? 요즘 웹 개발하는 환경은 bolierplate를 쓰는 경우가 많다. 내장된 eslint와 같은 syntax 검사 모듈의 도움을 받기 때문에, 개발자는 var 대신 let, const를 쓰면서 hoisting의 개념을 알기 쉽지.. daniel-park.tistory.com 요약하자면, var을 통해 변수를 선언 및 초기화 할 수 있다. function scope에서 조건에 따라 hoisting이 이루어진다. es2015 사용 환경에서는 var 대신 let과 const를 사용한다. (추가) 아래 코드처럼 변수를 ..
-
[Javascript] Hoisting(호이스팅)이란?Front-end/Javascript 2020. 5. 4. 12:16
Hoisting이란? 요즘 웹 개발하는 환경은 bolierplate를 쓰는 경우가 많다. 내장된 eslint와 같은 syntax 검사 모듈의 도움을 받기 때문에, 개발자는 var 대신 let, const를 쓰면서 hoisting의 개념을 알기 쉽지 않다. eslint가 엄격할 때는 성가실 때가 많지만 경고 또는 에러를 내주는 이유는 바로 hoisting 때문이지 않을까 생각이 된다. Hoisting(호이 스팅)이란, 함수 또는 변수의 선언을 각각의 유효 범위의 최상단에 선언해주는 것을 말한다. - 유효 범위란 함수 블록{}을 말한다. - JS Parser가 유효 범위 내의 코드를 SSG 훑은 후, 이를 기억했다가 실행시킨다. - 함수와 변수의 선언과 초기화를 분리하는 과정이라고 생각할 수 있다. - 메모..