희락코딩

1편과 2편에서 비동기 프로그래밍에 대해서 학습하였습니다!!! 이번에 학습한 비동기 프로그래밍은 프론트개발자라면 꼭 알아야할 필수 개념이기에 3편으로 나눠 정리를 하였습니다!!! 이번 블로깅은 비동기와 async/await에 대해 간단한 정리와 fetch에 대해 정리를 해보고자 합니다! Let's get it~! # 비동기 처리 비동기란 코드의 연산이 끝날 때까지 코드 실행을 멈추지 않고 다음 코드를 먼저 실행하는 특성을 말합니다! 가장 흔한 사례는 어떠한 서버에서 데이터를 요청할 때 받아오기 까지 시간이 걸리지만 나머지 코드는 실행한 코드를 기다려 주지 않고 나머지 코드를 먼저 실행시켜줍니다. 이를 비동기 처리라고 합니다. 1 2 3 4 5 6 7 8 9 console.log("1"); setTimeo..

1편에 이어서 Promise Chaining , Promise all, /async/await에 대해 학습해 봅시다!!! # Promise Chaining Promise의 특징중 하나인 Chaining은 여러 개의 프로미스를 연결하여 사용할 수 있습니다! 후속 메서드 then()을 호출하고 나면 새로운 프로미스 객체가 반환됩니다. 여기서 중요한 포인트는 Chaining을 할때 then() 메서드를 통해서 값을 바로 전달 하여 연결할수가 있고 혹은, return을 통해 Promise를 전달해서 사용 할 수 있습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 //Promise chaining const testPromise = new Promise(function(resol..

# 동기와 비동기 동기식 처리 모델 동기식 프로그래밍은 직렬적으로 일을 처리합니다. 즉 순차적으로 실행 되며 도중에 어떤 작업이 수행 중이면 다음에 일처리해야 될 일들은 대기상태가 됩니다. 비동기식 처리 모델 비동기식 프로그래밍은 병렬적으로 일을 처리합니다. 일처리가 종료되지 않은 상태라 하더라도 대기하지 않고 즉시 다음 일들을 실행합니다. 코드로 알아보는 동기와 비동기 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 console.log(`1`); setTimeout(() => console.log(`2`), 1000); console.log(`3`); // Synchronous(동기식) callback function printImmediately(print) { print();..

앞에서 객체지향에 대한 이론을 알아 봤습니다!!! 이번시간은 객체 지향의 꽃 클래스에 대한 기본 문법을 간략하게 정리하였습니다!!! 클래스 문법의 구조, 틀 위주로 정리하였으니 나중에 응용하고 연습하면 충분히 클래스 문법에 대해 익숙해질거라 생각합니다! Class 자바스크립트는 프로타입 기반의 객체 지향 언어입니다! 옛날에는 클래스 대신 프로토 타입을 이용해서 객체 지향 프로그래밍을 하였는데 ES6가 도입되면서 자바스크립트에 클래스라는 키워드가 생겼고 기존의 프로토타입 기반의 객체 지향 프로그래밍보다 단순하고 간결하게 코드를 작성할 수 있게 되었습니다! Class 생성하기 클래스는 객체명 앞에 class라는 키워드를 이용해 생성할 수 있습니다. 1 2 3 4 5 class Joycoding { const..

# 들어가기 앞서... 공부를 하다보면 객체지향프로그래밍이란 말을 들어본적이 있습니다. 너무 생소하고 어려운 내용이여서 기피 했는데 원리와 개념만 잘파악하면 충분히 할만한 공부인 것 같습니다! 이번 블로깅은 객체지향 프로그래밍에 대해 간단하게 개념정리를 하였습니다. 객체지향 핵심 개념 (Object Oriented Programming) 객체지향? 객체를 지향한다는 말이 다소 난해하고 이해하기 힘든 경우가 있습니다. 그래서 정말 간단하게 핵심만 요약하자면 객체지향 프로그래밍은 객체 데이터의 접근과, 데이터 처리 과정에 대한 관심을 주로 삼는 프로그래밍 방법론이라고 이해 하면 되겠습니다! 객체지향 언어는 "클래스" 라고 부르는 데이터 모델의 청사진을 사용해 코드를 작성합니다. 또한 현대의 언어들은 대부분 ..

스코프 # 스코프 기본 개념 1. 스코프란 ? scope는 쉽게 정의 하자면 변수가 영향을 미치는 유효 범위입니다. 이 스코프는 전역 스코프와 지역스코프로 나뉠 수 있습니다. 우리는 이미 스코프를 경험하고 있습니다. 바로 함수입니다. 함수의 매개변수는 함수 몸체 내부에서만 참조 할 수 있고 몸체 외부에서는 참조할 수 없습니다. 이것은 매개변수를 참조할 수 있는 유효범위, 즉 매개변수의 스코프가 함수 몸체 내부로 한정 되어 있기 때문입니다. 1 2 3 4 5 6 7 8 9 10 function addNum(x, y) // 매개변수는 함수 몸체 내부에서만 참조 // 즉 스코프(유효범위)는 함수 몸체 내부 console.log(x,y) // 3 7 return x + y; } addNum(3,7) consol..

객체 # 객체 기초 1. 배열과 객체 구조에 대한 이해 객체는 배열과 다르게 하나의 단위로 구성한 복합적인 자료구조이며 원시 타입의 값입니다. 즉 원시 값은 변경 불가능한 값이지만 객체 타입의 값이고 객체는 변경 가능한 값입니다. 또한 자바스크립트는 객체 기반의 언어이며 자바스크립트를 이루고 있는 거의 모든 것들이 객체입니다. 객체는 key와 value로 구성된 프로퍼티들의 집합이며 모든 값들을 사용 할 수 있습니다. 1 2 3 4 5 6 7 8 9 //객체의 구조 var troll = { // 객체는 중괄호{}안에 프로퍼티가 있다. name : 'teemo' , // name, age ->> 프로퍼티 키 age : 12 // 'teemo', 12 ->> 프로퍼티 값 }; // 객체는 0개 이상의 프로퍼..

배열 배열array은 여러 개의 값을 순차적으로 나열한 자료구조다. 배열이 가지고 있는 값을 요소(element)라고 부른다. 자바스크립트의 모든 값은 배열의 요소가 될 수 있다. 즉, 원시값은 물론 객체, 함수, 배열 등 자바스크립트에서 값으로 인정하는 모든 것은 배열의 요소가 될 수 있다. 배열의 요소는 배열에서 자신의 위치를 나타내는 0 이상인 정수인 인덱스(index)를 갖는다. 인덱스는 배열의 요소에 접근할 때 사용한다. 대부분의 프로그래밍 언어에서 인덱스는 0 부터 시작한다. 요소에 접근할 때는 대괄호[] 표기법을 사용한다. 대괄호 내에는 접근하고 싶은 요소의 인덱스를 지정한다.배열의 요소의 개수, 즉 배열의 길이를 나타내는 length 프로퍼티를 갖는다. ▶ 배열에서 특정 인덱스의 요소를 조..