본문 바로가기

Front-end/Vanilla JS24

JS 근본 공부 - async & await 1. async와 await란? - async와 await는 지난 포스팅에서 설명한 promise를 더욱 간결하고 동기적으로 실행되는 것처럼 보이게 만들어 주는 기능이다. - 지난 포스팅에서 then을 사용하여 promise chaining을 구현했는데, 직관적이고 사용하기 편하지만 코드 자체를 봤을 때에는 복잡해 보인다는 것이 단점이다. - 이러한 단점을 보완할 수 있도록, promise를 동기적으로 실행하는 것처럼 보이게 하는 역할이 async와 await다. - 프로그래밍 용어로, async와 await같은 기능들을 sytactic sugar라고 한다. *syntactic sugar - async와 await처럼, 기존에 존재하는 기능을 더욱 사용하기 편하도록 제공되는 API를 가리킨다. 2. as.. 2020. 11. 9.
JS 근본 공부 - Promise 1. Promise란 무엇인가? - Promise라는 단어의 뜻처럼, 코드가 동작하는 순서를 약속하는 약속의 객체라고 표현할 수 있다. - JavaScript에서 제공되는 Object(=객체) 중 하나로, 콜백을 사용하지 않고 비동기식 처리를 구현하는 방법이다. a) 어떻게 사용되는가? - 요즘은 맛집을 가보면 promise가 사용되는 것을 볼 수 있다. 대기손님이 많을 경우, 번호표를 나눠주는 것이 아니라 웨이팅 리스트에 자신의 정보를 등록하고 자리가 나면 시스템에 의해 자동으로 문자를 받는 것을 경험한 적이 있을 것이다. → 영업시간동안(정해진 시간동안) 자리가 비워지면 대기순서대로 알림이 가는 기능을 promise로 구현한 것이다. - 인터넷 강의에서도 promise가 사용되는 것을 볼 수 있다. .. 2020. 11. 6.
JS 근본 공부 - 콜백(Callback) - 콜백은 비동기 처리방식을 구현하기 위해 기본적으로 이해 해야하는 개념이다. - 콜백은 무엇인지, 비동기/동기처리는 무엇인지 알아보자. 1. Sync & Asnyc a) Sync(동기) - 기본적으로 JavaScript는 동기적(synchronous)으로 작동하는 언어이다. - 이는 코드를 읽을 때, 자바스크립트의 hoisting 과정 이후 코드가 작성된 순서대로 실행된다는 의미다. - 즉, 순서대로 작동한다는 것은 동기적으로 처리된다는 뜻이다. * hoisting: var 변수, function의 선언부가 몇번째 줄에 작성 되었는지와 상관없이 가장 먼저 읽혀 수행되는 것 b) Async(비동기) - 동기적 처리와 반대되는 개념으로, 코드의 작성 순서와 상관없이 개발자가 순서를 지정하여 동작하는 것을 .. 2020. 11. 5.
JS 근본 공부 - JSON 1. JSON이란 무엇일까? - JSON을 이해하기 위해 웹이 어떻게 서버에게 data를 요청하고 받는지, 그 구조에 대한 전반적인 이해가 필요하다. a) HTTP(Hypertext Transfer Protocol) HTTP란, client(웹사이트 또는 웹App)가 server와 통신하는 방법 또는 규칙, 규약을 정의한 것이다. Hypertext를 이용하여 client는 server에게 원하는 data를 request하고, 이 request를 기반으로 server가 client에게 response하는 방식으로 통신한다. HTTP를 이용하여 요청한 data를 server에게 받아오는 방법으로 AJAX가 있다. * Hypertext - 웹사이트에서 흔하게 볼 수 있는 하이퍼링크 뿐만 아니라 이미지, 문서 .. 2020. 11. 4.
JS 근본 공부 - 배열 API 연습문제 1. 배열 API 연습문제 - 배열을 사용할 때 함께 유용하게 쓰일 수 있는 API를 연습해보자. [연습문제] "use strict"; // Q1. make a string out of an array { const fruits = ["apple", "banana", "orange"]; fruits.join(); } // Q2. make an array out of a string { const fruits = "🍎, 🥝, 🍌, 🍒"; const result = fruits.split(","); } // Q3. make this array look like this: [5, 4, 3, 2, 1] { const array = [1, 2, 3, 4, 5]; } // Q4. make new array with.. 2020. 11. 3.
JS 근본 공부 - 배열(Array) - 배열은 프로그래밍에서 가장 많이 사용되는 자료구조다. - 배열의 개념과 활용방법을 익혀보자. 1. 배열은 무엇인가? - 배열이란 자료구조 중 하나로 여러개의 데이터를 묶어서 저장하는 방식이다. - 일반적으로 배열은 동일한 자료형의 데이터 끼리만 묶어 저장할 수 있지만, JavaScript에서는 자료형과 상관없이 데이터를 배열에 저장할 수 있다. 하지만, 이런 방식의 사용은 권장하지 않는다. 2. 자료구조와 object는 무엇이 다른가? - object는 연관된 속성과 행동이 모여서 하나의 존재를 이룬다. - 자료구조란 데이터를 저장 및 정렬하는 형식/방식을 의미하는 것이다. 3. 배열의 특징 - 동일한 자료형의 데이터를 저장한다. - 데이터가 순차적으로 저장된다. - 저장된 데이터는 index가 부여.. 2020. 11. 2.
JS 근본 공부 - Object 1. 왜 object를 사용할까? - 개발자는 값을 저장하기 위해 변수를 생성한다. 변수 1개당 하나의 값(value)만 저장할 수 있다는 특성이 있다. - 그러나 개발을 하다보면 여러 변수들을 매번 함께 사용하는 경우가 발생하며 해당 변수들을 묶음으로 관리하기가 쉽지 않다. - 여러 변수들을 묶어서 효율적으로 관리하는 방법 중 하나가 바로 object이다. 아래 코드 예시를 살펴보자. const name = "Raphael"; const age = 20; function print(name, age) { console.log(name); console.log(age); } print(name, age); - 위의 함수에서 보이는 name과 age 라는 매개변수 이외에 address와 phoneNumbe.. 2020. 11. 1.
JS 근본 공부 - class & object(객체지향) 1. class란 무엇일까? - 클래스는 현실의 대상을 데이터화 시키기 위해 연관된 정보 또는 데이터를 하나의 그룹으로 묶는 것을 의미한다. - 클래스는 속성(= fields, 변수)과 행동(= method, 함수)으로 구성되어 있다. - 그러므로 클래스는 어떤 현실의 대상을 데이터화 시키기 위한 설계도 또는 청사진이다. - 속성만으로 구성되어있는 클래스가 있는데, 이를 데이터 클래스라고 부른다. [Class 선언방법] class Person { // construcor: 해당 클래스를 이용하여 객체를 생성할 때 // 객체의 초기값을 설정하기 위해서 사용되는 생성자 함수이다. constructor(name, age) { // fields this.name = name; this.age = age; // .. 2020. 10. 31.
JS 근본 공부 - function 1. function이란 무엇일까? - function이란, 프로그램 안에서 하나의 기능을 수행하는 역할을 한다. 여러개의 function들이 모여 하나의 프로그램을 구성하기 때문에 function을 sub-program이라고 부르기도 한다. - JavaScript와 같이 절차적 언어에서는 이 funciton의 역할이 매우 중요한데, 코드가 순차적으로 실행되기 때문에 function과 function이 맞물려 작동하기 때문이다. - 그렇다면 function이란 무엇일까? function이란, 입력값(input 또는 parameter)을 받아서 각 function에 할당된 연산을 수행한 뒤 그 결과값(output 또는 return)을 반환하는 과정을 의미한다. 2. JavaScript 함수 선언 - fun.. 2020. 10. 30.

티스토리툴바