콜백함수를 좀더 깔끔하게 쓸려고 Promise가 나왔지만 이 역시 어려운 부분이 있다.그래서 Promise보다 훨씬 쉽게 쓸 수 있는 ES8 문법이 나왔다.’async, await’ 문법을 알아보자  asyncasync function returnPromise() { return '그냥 Promise 반환해줌';} 위 코드처럼 async를 fuction 앞에 붙여주면new Promise()를 사용한 복잡한 코드 없이도 저절로 Promise 객체가 생성이 된다.위 함수의 return 값은 Promise의 resolve()처럼 작동되는 것이다. async를 사용하여 Promise의 형식을 가지기 때문에이 함수를 실행할 때 then()이나 catch()를 붙일 수도 있다.async function ret..

Promise에 대해 알기전에우선 동기/비동기처리와 콜백함수에 대한 내용부터 알아야 한다.이 내용에 대해 이미 숙지하고 있다면 Promise 설명 부분으로 넘어가자. 동기/비동기 처리 동기 처리는 한 번에 하나의 작업만 순차적으로 처리하는 방식이다.코드가 위에서부터 아래로, 순서대로 실행되며각 작업이 완료되기 전까지는 다음 작업이 실행되지 않는 구조이다.console.log('출근');for (let i = 0; i  우리가 다루는 자바스크립트 역시 ‘동기 처리(synchronous)’ 방식을 취하고 있다.그래서 위 코드는 시간이 걸리더라도 for 반복문이 끝나야 비로소 ‘퇴근’을 출력할 것이다.  비동기 처리는 시간이 오래 걸리는 작업을 기다리지 않고,실행이 바로바로 가능한 다음 작업부터 처리하는 방식..

자바스크립트 ES6 부터는 Class라는 문법이 도입되었는데,이 문법은 자바스크립트에서도 객체지향 프로그래밍을 쉽게 구현할 수 있게 한다.특히 C++ 이나 JAVA에 익숙한 개발자들은 Class 문법이 반갑게 느껴질 것 같다. class 사용법class Info { constructor(name, age){ this.name = name; this.age = age; } sayInfo() { console.log(`나는 ${this.age}살 ${this.name}이야.`) } }var person1 = new Info('Park', 20);person1.sayInfo() // 나는 20살 Park이야. 위 코드는 ‘Info’ 라는 class를 정의한 것이다.constructor에서..

자바스크립트 ‘this’는 동작 방식이 매우 다양해 처음 봤을 땐 조금 어려운 키워드이기도 하다.이번 글을 통해 this를 완벽하게 정복해보자. 일반적으로 객체 내부에서 호출되는 함수의 소유자 객체를 가리키는 키워드인데상황에 따라 this가 가리키는 대상과 뜻이 달라지기 때문에 각 동작을 정확히 이해하는 것이 중요하다.this는 크게 4가지의 각기 다른 뜻을 가지고 있다. 일반 함수 내에서 쓸 떄 - 전역객체 (window)메서드 내에서 쓸 때 - 메서드를 소유하는 객체 (object)생성자(constructor) 내에서 쓸 때 - 새로 생성되는 오브젝트 (object)이벤트 리스너(eventlistener) 안에서 쓸때 - 동작하는 html 요소(e.currentTarget)  1. 일반 함수 내에서 ..

일단 서버가 무엇일까 서버는 쉽게 말해서 '데이터를 주고받을 수 있는 기계'이다.가령 '네이버 뉴스 서버'는 뉴스를 달라고 요청하면 보내주는 기계이고'인스타그램 서버'는 댓글을 작성했으니 가져가라고 요청하면 가져가는 기계이다.물론 아무렇게나 서버와 통신할 수 있는 건 아니고 정확한 규격에 맞추어 서버에 요청을 해야한다. 1. 어떤 데이터인지 (URL형식)2. 어떤 방법으로 요청할지 (GET or POST) 를 잘 기재해야 서버와 데이터를 주고(GET) 받을(POST) 수 있다.  AJAX가 무엇일까 GET, POST 요청을 그냥 날리게 되면 치명적인 단점이 생기는데 바로 브라우저가 새로고침된다는 것이다.그럼 더보기 버튼을 눌러도, 댓글 하나를 작성해도 브라우저 전체가 새로고침 되버리는 불쾌한 상황이 발생..

처음 코딩을 시작할 때 아마 if문을 가장 많이 사용할 것이다. 하지만 if문만 주구장창 쓰다보면 가독성도 떨어지고 디버깅도 어려워진다. 특히 중첩 if문을 계속 쓰면 Nesting이 많아져 코드가 정말 더러워진다. Nesting이 뭐냐면..   그래서 더러운 if 문 대신 코드를 훨씬 더깔끔하게 만들어주는 문법이 하나있다.바로 switch 문법이다.  switch 문법 기본switch 문법은 주어진 표현식의 값을 평가하여 여러 case 중 하나에 해당하는 코드를 실행하는 문법이다.다음은 기본적인 문법 구조다.switch (표현식) { case 값1: // 값1에 해당하는 경우 실행될 코드 break; case 값2: // 값2에 해당하는 경우 실행될 코드..