꿀 떨어지는 코딩 양봉장

과거 RestAPI에 대해서 설명했던 적이 있었습니다. https://nayoon030303.tistory.com/25 Rest API에 대해서 GraphQL에 대해서 공부하기 이전에 REST API에 대해서 간단하게 알아보겠습니다. 📕REST API란 소프트웨어 간 정보를 주고받는 방식입니다. GraphQL이전부터 사용 '다른' 방식 - 용도와 작업 특성에 따라 nayoon030303.tistory.com 이번 시간에는 GraphQl에 대해서 공부해보도록 해보겠습니다! GraphQL이란 페이스북에서 만든 2012년에 개발되어서 2015년에 오픈소스로 공개된 데이터 쿼리 언어입니다. 기존 데이터로 된 쿼리를 수행하기 위한 서버 측 런타임입니다. GraphQL API는 엔드포인트가 아닌 유형과 필드로 구성..

async와 await async와 await라는 특별한 문법을 사용하면 프라미스를 조금 더 편하게 사용할 수 있습니다. async 함수 async는 function앞에 위치합니다. async function f(){ return 1; } function 앞에 async를 붙이면 해당 함수는 항상 프라미스를 반환합니다. 위 코드처럼 프라미스가 아니 값을 반환해도 이행 상태의 프라미스로 값을 감싸 이행된 프라미스가 반환되도록 합니다. async function f(){ return 1; } f().then(alert); 위 코드처럼 result가 1인 이행 프라미스가 반환됩니다. await await는 async function안에서만 사용이 가능합니다. let value = await promise 자바..

프라미스 API Promise 클래스에는 5가지 정적 메서드가 있습니다. 이번 시간에는 5가지의 메서드를 알아보도록 하겠습니다. Promise.all 여러 개의 프라미스들을 동시에 실행시킵니다. 모든 프라미스가 준비가 될 때까지 기다립니다. 문법 let promise = Promise.all([..promises...]); 예시 let promise = Promise.all([ new Promise(resolve=>setTimeout(()=>resolve(1),3000)), new Promise(resolve=>setTimeout(()=>resolve(2),2000)), new Promise(resolve=>setTimeout(()=>resolve(3),1000)), ]).then(response=>{ ..

저번 글에 이어서 이번에도 프라미스에 대해서 공부해 보도록 하겠습니다. 프라미스 체이닝 스크립트를 불러오는 것과 같이 순차적으로 처리해야 하는 비동기 작업이 여러 개 있을 수 있습니다. 만약 콜백만을 사용한다면 '콜백 지옥' 혹은 '멸망의 피라미드'가 만들어질 수 있습니다. 더 자세히 콜백에 대해서 알고 싶다면 아래 사이트를 참고하세요 https://ko.javascript.info/callbacks 콜백 ko.javascript.info 만약 이럴떄 프라미스를 사용한다면 여러 가지 해결책을 만들 수 있습니다. 이번 시간에는 프라미스 체이닝(promise chainnig)을 이용한 비동기 처리에 대해서 알아보도록 하겠습니다. 프라미스 체이닝이란? 프라미스 체이닝은 아래와 같이 생겼습니다. new Prom..

콜백 프라미스가 나오게 된 배경을 설명해줍니다. 콜백 함수란 쉽게 설명해서 나중에 호출되는 함수입니다. 프라미스 프라미스란? ES6에 도입된 기술입니다. 프라미스란 제작코드와 소비 코드를 연결해주는 특별한 자바스크립트 객체입니다. 프라미스는 시간이 얼마나 걸리든 상관없이 약속한 결과를 제작코드가 준비되었을 때, 모든 소비 코드가 결과를 사용할 수 있도록 해줍니다. 콜백함수가 해주는 일과 비슷하다고 할 수 있습니다. let promise = new Promise(function(resoleve, reject){ //executor 제작 코드 }); new Promise에 전달되는 함수는 executor(실행자, 실행함수)라고 부릅니다. executor는 new Promise가 만들어질 때 자동으로 실행되고..

JavaScript에서 Node를 선택하는 다양한 방법들이 있습니다. 부모 자식 관계를 이용할 수도 있고 직접적으로 id, class, tag 등을 이용하여 Node를 선택할 수 있습니다. getElemetsByTagName() getElementsByClassName() && getElementById() querySelector() getElemetsByTagName() HTML 태그를 가져옵니다. var lis = sec1.getElemetsByTagName("li"); lis[0].textContent = "Hello"; textContent: 안쪽에 있는 text function ex1(){ let section2 = document.getElementById("section-2"); let i..

자바스크립트는 기본 형식이라는 것이 없습니다. 그동안 우리가 Java, C++ 등에서 사용했던 정수형, 실수형이 없다는 뜻입니다. 자바스크립트는 래퍼형 클래스만 가지고 있습니다. Boolean(Boolean) Number(정수) Number(실수) 문자(String) 문자열(String) Array는 선형 Object는 해시형 Object 키를 이용한 데이터 관리 // 방법 1. var exam = new Object(); exam["kor"] = 30; exam["eng"] = 70; exam["math"] = 100; //방법 2 exam.kor = 30; exam.eng = 70; exam.math = 100; 방법 1. exam이 가지고 있는 속성을 변수를 이용해 얻을 때 사용 방법 2. 위 상황..

바닐라 자바스크립트를 처음 접하는 저는 유튜브에서 노마드 코더의 "초보자를 위한 바닐라 자바스크립트"를 따라하면서 공부를 시작했습니다. momonton이라는 프로그램을 만들면서 자바스크립트로 HTML객체 생성 및 삭제, 입력한 값 저장하기 ,날씨 API가져오기 등에 대해서 공부했습니다. JS를 배우기 위한 과정이라서 CSS과정은 강의에 없어서 간단하게 위치와 색깔만 변경했습니다. 📌GitHub github.com/nayoon030303/vanila.js_make_momonton.git nayoon030303/vanila.js_make_momonton study vanila js. Contribute to nayoon030303/vanila.js_make_momonton development by crea..