Chapter 13 자바스크립트 13. 비동기의 꽃 JavaScript async 와 await 그리고 유용한 Promise APIs | 프론트엔드 개발자 입문편 (JavaScript ES6) 이번 챕터에서는 비동기 3번째 방식 await + async 방식에 대해서 알아보겠습니다. async와 await는 지난 강의에서 다룬 Promise를 조금 더 간결하고 간편하고 그리고 조금 더 동기적으로 보이게 만들어주는 친구입니다. 저번 강의에서 Promise를 여러 개 체인형식으로 묶을 수 있었는데 Promise마다 then을 여러 개 chaining을 하게 되면 코드가 난잡해줄 수 있습니다. async + await는 마치 동기식으로 순서대로 작성하는 것처럼 간편하게 작성할 수 있게 도와줍니다. Promis..

Chapter 12 자바스크립트 12. 프로미스 개념부터 활용까지 JavaScript Promise | 프론트엔드 개발자 입문편 (JavaScript ES6) 대표적인 비동기는 1️⃣Callback 2️⃣Promise 3️⃣Async + Await 가 있습니다. 지난 강의에서는 그 첫번째 '콜백'에 대해서 알아보았습니다. 이번 강의에서는 두 번째 방법 Promise에 대해서 알아보겠습니다. 프로미스는 자바스크립트에서 비동기를 간편하게 처리해주는 오브젝트입니다. 프로미스는 정해진 임무를 수행하고 나서 정상적으로 기능이 수행되었다면 성공의 메시지와 함께 처리된 결과값을 전달해줍니다. 만약 임무를 수행하다 정상적으로 수행되지 못하면 에러를 발생시킵니다. 예를들어 엘리선생님이 학생들을 위해 강의를 만들고 있습니..

Chapter 11 자바스크립트 11. 비동기 처리의 시작 콜백 이해하기, 콜백 지옥 체험 😱 JavaScript Callback | 프론트엔드 개발자 입문편 (JavaScript ES6) ㅁㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 짤보자마자 터졌네요 ㅋㅋㅋ 선임분이 많은 생각이 드셨을 듯 합니다. 자바스크립트는 동기적으로 작동합니다. 이 말은 호이스팅이 된 이후부터 우리가 작성한 코드 순서대로 하나하나씩 동기적으로 실행된다는 말입니다. 그렇다면 비동기는 무슨 말일까요? 바로 동기와 다르게 언제 실행될 지 예측할 수 없는 코드들을 말합니다. console.log("1"); setTimeout(() => console.log("2"), 1000); console.log("3"); resu..

Chapter 10 자바스크립트 10. JSON 개념 정리 와 활용방법 및 유용한 사이트 공유 JavaScript JSON | 프론트엔드 개발자 입문편 (JavaScript ES6) 서버 통신의 시작 JSON 브라우저 위에서 동작하는 웹사이트 또는 웹 어플리케이션 즉, 클라이언트들이 어떻게 서버와 통신할 수 있는지를 정의한 것이 바로 HTTP이다. HTTP는 클라이언트가 서버에게 데이터를 request(요구)하고 서버는 클라이언트의 요구에 맞게 그에 따른 response(응답)하는 것을 의미합니다. HTTP를 통해 서버에게 데이터를 받아올 수 있는 방법은 바로 AJAX이다. Asynchronous JavaScript And XML의 약자로 웹페이지에서 동적으로 데이터를 받아올 수 있는 기술을 의미합니다...

Chapter 09 자바스크립트 9. 유용한 10가지 배열 함수들. Array APIs 총정리 | 프론트엔드 개발자 입문편 ( JavaScript ES6) Arrays APIs 총 정리! Join Join api 문서를 찾아보면 배열의 모든 엘리먼트들을 더하고 string으로 return 한다고 한다. 또한 우리가 설정해준 seperator를 통해 문자열을 각각 구분한다고 한다. 그런데 seperator는 ?가 들어가 있는데 포함해줘도 되고 안시켜줘도 상관없다는 의미이다. 어쨋든 결과는 string으로 return이 된다고 하니 한 번 실험해보자. const fruits = ['apple', 'banana', 'orange']; const result = fruits.join(); console.log(..

Chapter 08 자바스크립트 8. 배열 제대로 알고 쓰자. 자바스크립트 배열 개념과 APIs 총정리 | 프론트엔드 개발자 입문편 (JavaScript ES6 ) 토끼와 당근이 있습니다. 만약 토끼와 당근이 너무 많다면 분류하기 위해 바구니 같은 것을 사용할 것이다. 위와 같이 프로그래밍 언어에서 비슷한 데이터 종류들끼리 묶어서 한 곳에 보관해 놓는 방법을 자료구조라고 합니다. 그렇다면 저번 강의에서 객체 역시 비슷한 종류의 데이터들을 묶어놓는 역할을 한다고 했는데 객체와 자료구조의 차이점은 무엇일까? 객체는 위의 사진에서 토끼 OR 당근이 될 수 있다. 토끼는 동물이며 귀가 2개라는 field와 먹는다와 뛴다라는 method를 가질 수 있습니다. 당근 역시 채소, 비타민c 라는 field를 가질 수 ..