Je개발 일지

1. Promise 를 사용하는 이유 예전에 비동기 작업을 할 때 콜백 함수를 사용했다. 하지만 양이 많아지기 시작하면 코드가 난잡해진다는 단점이 발생한다. 바로 위의 사진처럼 콜백 지옥이라는 걸 볼 수 있다. 그걸 막기 위해 도입된 문법이 Promise 다. 직접 코드를 작성하며 얼마나 깨끗해지는지 확인해보자. 우리는 코드를 통해 초를 세는 함수를 작성해보고자 한다. 1) 콜백 지옥 먼저, 콜백 함수로 비동기를 구현했을 때의 상황이다. function second (sec, callback) { setTimeout(() => { const now = sec + 1 console.log(`${now}초`) if (callback) { callback(now) } }, 1000) } second(0, n ..

1. 비동기적 처리란? 대부분의 함수는 동기적으로 처리된다. 동기적이란 어떤 기능을 실행하고, 그다음의 기능을 실행한다는 의미다. 이건 마치 같은 라인에 선 계주와 같다. 한 선수가 목표한 거리를 다 지나야지만 바통을 넘겨받은 선수가 달릴 수 있다. 대부분의 기능은 이렇게 실현된다. 그런데, 만약에 너무 오래 걸리는 작업이 있다면? 예를 들어 우리가 유튜브를 본다고 하자. 유튜브에서 동영상을 불러들이는 시간은 다른 메뉴바를 불러들이는 시간보다 오래 걸린다. 그런데, 만약 동영상을 불러들이고 나서 다른 기능이 구현된다고 하면 사용자는 아무것도 없는 브라우저의 로딩이 끝나기만을 기다려야 할 것이다. 그러면 사용자들에게 불편을 주고 웹 애플리케이션에 안 좋은 인상만 남길 것이다. 그렇다면, 반대로 동영상을 모..

1. Truthy, Falsy 자바 스크립트에서 논리 연산자에 true와 false 만 들어가야 하는 것은 아니다. true와 false는 아니지만 true처럼 취급 받는 truthy와 false처럼 취급 받는 falsy라는 값이 존재한다. truthy 는 굉장히 많기 때문에 falsy한 값만 알면 falsy 이외에는 모두 truthy라고 생각하면 된다. 대표적인 falsy는 다음과 같다 1. false (false도 넓은 범위에서 falsy) 2. 0 3. '' (빈 문자열) 4. undefined 5. null 6. NaN 한 가지 주의점이 있는데, 빈 객체 { } 나 빈 배열 [ ] 은 falsy 값이 아니다. 간혹, falsy 값을 좀더 정밀하게 false 처럼 사용하고 싶은 분들은 falsy한 ..

2-14) .concat( ) concat은 여러 배열을 하나로 합쳐준다. 원본에는 지장이 없다. concat의 인자로는 합쳐줄 배열이 들어간다. let myFavoriteDrama = ['슬기로운 의사생활', '나의 아저씨', '멜로가 체질'] let herFavoriteDrama = ['비밀의 숲', '멜로가 체질', '동백꽃 필무렵'] console.log(myFavoriteDrama.concat(herFavoriteDrama)) // ["슬기로운 의사생활", "나의 아저씨", "멜로가 체질", "비밀의 숲", "멜로가 체질", "동백꽃 필무렵"] // 중복된 요소라 해도 추가해서 포함된다. console.log(myFavoriteDrama) // ['슬기로운 의사생활', '나의 아저씨', '멜로가..

2. 배열 메소드 2-6) .fiter( 특정 조건 ) fiter는 특정 조건을 만족하는 요소들을 찾아 그것들로 새로운 배열을 만들 때 사용한다. 정리를 해보자면 1. findIndex: 특정 조건을 만족하는 요소를 찾아서 그 인덱스 값을 알아내는 것 2. find: 특정 조건을 만족하는 요소를 찾아서 그 요소를 출력하는 것 3. filter: 특정 조건을 만족하는 요소를 찾아서 그 요소로 배열을 만들어 내는 것 저번 시간에 사용했던 객체 세개를 요소로 갖는 배열을 가져오겠다. const ninetyNinesInfo = [ { name: "이익준", session: 'Electronic Guitar', hasGirlfriend: false }, { name: "안정원", session: 'Drum', h..

1. 배열 기본 const numbers = [1, 2, 3, 4] 배열 안에 있는 것을 요소, 아이템이라고 한다. 즉 1, 2, 3, 4는 numbers라는 배열의 요소, 아이템이다 const objects = [ {name: '패캠'}, {name: '인강'} ] 요소에는 객체도 들어갈 수 있다. console.log(numbers[1]) 이와 같이 배열 안 특정 인덱스에 들어가 있는 요소를 찾으려 하는 과정을 인덱싱이라고 한다. 2. 배열 메소드 2-1) .forEach ( ) 배열 안의 원소를 하나하나 따로 가져올 때 사용한다. const ninetyNines = ['이익준', '안정원', '채송화', '김준완', '양석형'] 만약 forEach를 사용하지 않고 저 요소들 하나하나를 가져온다고 하..