async & await (Promise) JavaScript 저번 포스트에서는 Promise에 대해서 정리하였는데 이 개념을 더 쉽게 사용하도록 도와주는 async, await 문법에 대해 정리 해보려고 합니다. 비동기 처리를 활용하기 위해 3개의 글을 포스팅하였는데 이번이 마지막 시리즈입니다. 이전 포스트 링크도 남겨 놓겠습니다. [JavaScript] - Promise(then & catch) - JavaScript async & await 이 문법들을 이용해 비동기적인 코드들을 동기적 처리 코드처럼 작성할 수 있게 됩니다. 쉽게 말하자면 더 간결하게 작성이 가능합니다. 이를 syntactic sugar라고도 부릅니다 그럼 각 기능을 확인해보겠습니다. async async와 await는 항상 같이 ..
Promise (then & catch) JavaScript 이전 포스트에서 설명한 비동기적 처리의 개념을 공부하고 Promise에 대해 공부하는 것이 더 좋은 방향이라고 생각합니다. 이전 포스트를 아직 읽어보시지 않으셨다면 읽고 보시는 것을 추천드려요! [JavaScript] - 동기적, 비동기적 처리, 콜백 함수 - JavaScript Promise는 무엇이고 왜 사용하나요? Promise 문법을 사용하는 이유는 어떠한 작업을 비동기적으로 처리할 때 그 작업이 성공했는지 실패했는지를 쉽게 정리할 수 있도록 해줍니다. (즉 표준화된 처리를 가능하도록해줍니다) Fetch 함수는 비동기적 처리방식을 이용합니다. 또한 Promise를 반환하기 때문에 이를 이용하여 정리해보겠습니다. fetch 함수 fetch..
Synchronous & Asynchronous & Callback function JavaScript 이번 포스트를 작성하게 된 이유는 promise 문법에 대해 정리하던 중 머릿속으로만 이해하고 넘어갔던 내용들이 다른 분들에게 필요할 것이라고 생각하여 작성하게 되었습니다. 동기적 처리(Synchronous) 코드를 위에서 아래로 한 명령이 끝나면 다음 명령을 해결하는 기본적으로 컴퓨터가 명령을 처리하는 방식을 말한다. 어떠한 방식으로 실행될지 예상하여 작성할 수 있다. 비동기적 처리(asynchronous) 자바스크립트의 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미한다. 통신을 하거나, 명령이 언제 끝날지 모를 때, 주..
Cookies & Local Storage & Session Storage JavaScript 브라우저 안에서 데이터를 저장하는 3가지 방법이 있다. 각 Storage들의 차이점에 대해서 정리해보고자 한다. 각 Storage의 특징 Cookies 4kb의 용량을 가지고 있다 Expire Date를 지정할 수 있다. 브라우저뿐만 아니라 서버와도 통신이 가능하다 Local Storage 10mb의 용량을 저장할 수 있다. 인터넷 기록을 삭제하거나 직접 지우지 않는다면 기록이 삭제되지 않는다. Session Storage 5mb의 용량을 저장할 수 있다. 현재 탭에서만 내용을 저장한다. 브라우저를 종료하면 기록은 사라진다. 확인하는 법 브라우저(크롬)의 개발 툴을 열어 Application 탭을 열면 각 St..
Webpack & Babel JavaScript Webpack webpack이란? > webpack은 js를 모듈화 해주는 모듈 번들러입니다. 여러 개의 자바스크립트 파일을 하나로 모아주는 기능을 합니다. 왜 webpack이 필요할까? 웹 애플리케이션의 발전에 따라 규모는 점점 더 커졌습니다. 이로인해 발생한 문제점들을 살펴보면 웹을 구동하기 위해서는 수 많은 파일을 서버에서 가져와 데이터들을 표시하게 됩니다. 즉 규모가 커질수록 응답 시간이 길어져 느려지게 됩니다. 여러 명의 개발자가 함께 프로젝트를 진행하다 보면 변수명이나 함수명이 겹치는 일이 벌어지면 이는 에러를 야기할 수 있습니다. 이를 해결하기 위해 번들러(Bundler)가 나오게 되었습니다. 대표적으로 webpack, parcel, brows..
클래스(Class) JavaScript Class란 클래스는 객체를 생성하기 위한 템플릿입니다. 또한 클래스는 특별한 함수입니다. 예를 들면 붕어빵 틀과 같이 여러 번 반복된 작업을 해야 하고 팥, 슈크림과 같이 내용을 바꾸어 모양은 같지만 다른 붕어빵을 만들 수도 있습니다. 객체를 정리할 수 있도록 도와주는 역할을 합니다. Class 선언 클래스는 생성자를 통한 인스턴스 생성 및 초기화, 메서드로 구분하여 선언합니다. class guy{ //생성자 constructor(name, age) { //인스턴스 생성 및 초기화 this.name = name; this.age = age; } greeting() { console.log(`hi I'm ${this.name}`) } } //인스턴스 생성 const..
🚀 새로운 블로그로 이전했습니다.
살펴보러 가기
