본문 바로가기
Promise 프로미스 사용하기 Promise 프로미스는 비동기 작업의 최종 완료 또는 실패를 나타내는 객체, 콜백을 첨부하는 방식의 객체이다. 프로미스 장점 콜백은 자바스크립트 Event Loop이 현재 실행중인 콜 스택을 완료하기 이전에는 절대 호출되지 않는다. 비동기 작업이 성공하거나 실패한 뒤에 then() 을 이용하여 추가한 콜백의 경우에도 위와 같다. then() 을 여러번 사용하여 여러개의 콜백을 추가 할 수 있으며 각각의 콜백은 주어진 순서대로 하나 하나 실행되게 된다. chaining Promise.then() then() 메서드는 Promise를 리턴하고 두 개의 콜백 함수를 인수로 받는다. 하나는 Promise가 이행했을 때, 다른 하나는 거부했을 때를 위한 콜백 함수이다. const promise1 = new Pr.. 2020. 9. 23.
비동기 Asynchronous 이해하기 Asynchronous 비동기 보통 코드는 한번에 한가지 사건만 발생하면서 순차적으로 진행된다. 만약 어떤 함수의 결과가 다른 함수에 영향을 받는다면, 그 함수는 다른 함수가 끝나고 값을 산출할 때까지 기다려야 한다. 그리고 그 과정이 끝날 때 까지, 유저의 입장에서 보면, 전체 프로그램이 모두 멈춘 것처럼 보이게 된다. 기다리는 동안 다른 작업을 수행할 수 있는것, 이것이 비동기 프로그래밍의 기본이다. Blocking code 웹 앱이 브라우저에서 특정 코드를 실행하느라 브라우저에게 제어권을 돌려주지 않으면 브라우저는 마치 정지된 것처럼 보일 수 있다. 이러한 현상을 blocking 이라고 부른다. Threads 쓰레드는 기본적으로 프로그램이 작업을 완료하는데 사용할 수 있는 단일 프로세스이다. 각 스.. 2020. 9. 23.
JS Module 모듈 import, export export 모듈 내보내기 Named Export 모듈 밖으로 내보내려는 항목 앞에 export 를 붙인다. 각 항목(function, const 등)은 export 할 때 이름으로 참조되었으며, import 할 때에 이 이름을 참조하여 사용한다. export const name = 'square'; export function draw(ctx, length, x, y, color) { ctx.fillStyle = color; ctx.fillRect(x, y, length, length); return { length: length, x: x, y: y, color: color }; } 여러 항목 내보내기 export { name, draw, reportArea, repo.. 2020. 9. 23.
GET & POST 메서드 GET 메서드 HTTP GET 메서드는 특정한 리소스를 가져오도록 요청한다. GET 요청은 데이터를 가져올 때만 사용해야 한다. GET /index.html 성공 시 XML이나 JSON과 함께 200 (Ok) HTTP 응답 코드를 리턴한다. 에러 발생시 : 404 (Not found) 에러 or 400 (Bad request) 에러가 발생한다. 주요 특징 안전함, 멱등성, 캐시 가능 데이터를 읽거나 검색시 사용 (수정시 사용X) 데이터의 변형의 위험없이 사용 가능 같은 요청을 여러 번 하더라도 항상 같은 응답 리턴 GET을 데이터를 변경하는 등의 안전하지 않은 연산에 사용 불가 application/x-www-form-urlencoded 콘텐츠 유형을 사용하는 간단한 형태의 양식 제출 POST / HTT.. 2020. 9. 23.
디자인 시스템과 컴포넌트 Collection of design systems & creating reusable design systems 디자인 시스템 모음 & 재사용 가능한 디자인 시스템 만들기 디자인 시스템 Design System A Design System is a set of interconnected patterns and shared practices coherently organized to aid in digital product design and development of products such as apps or websites. It may contain, but is not limited to, pattern libraries and design language, style guides, coded .. 2020. 9. 23.
Refactoring javascript 2 Clean coding in JavaScript 2 리팩토링 자바스크립트, 클린 코드 작성하기 2 Refactoring js example code destructuring, spread operator, async-await, template literals, optional chaining example code 디스트럭처링, 스프레드 오퍼레이터, 어싱크 어웨이트, 템플릿리터럴, 옵셔널 체이닝 활용하기 Optional Chaining 옵셔널 체이닝 연산자 ?. 는 체인의 각 참조가 유효한지 명시적으로 검증하지 않고, 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽을 수 있다. 만약 참조가 nullish (null 또는 undefined)이라면, 에러가 발생하는 것 대신에 표현식의 리턴 값은 und.. 2020. 9. 23.

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.