Front-End, CS 스터디/항해99 - JavaScript 스터디9 비동기 시리즈 - async와 await 자료 정리 * CAPTAIN PANGYO 자료 출처 하단 기재, 좋은 자료가 많아서 들어가서 둘러보는 것을 추천한다! ✅ 자바스크립트 async와 await 1️⃣ async & await 란? async와 await는 자바스크립트 비동기 처리 패턴 중 가장 최근에 나온 문법이다. 기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 도와준다. 2️⃣ 개발자에게 읽기 좋은 코드란? var user = { id: 1, name: 'Josh' }; if (user.id === 1) { console.log(user.name); // Josh } 이 코드는 user라는 변수에 객체를 할당한 뒤 조건문으로 사용자의 아이디를 확인하고 콘솔에 사용자의 name을 찍는 간.. 2022. 8. 5. 비동기 시리즈 - Promise 자료 정리 * CAPTAIN PANGYO 자료 출처 하단 기재, 좋은 자료가 많아서 들어가서 둘러보는 것을 추천한다! ✅ 자바스크립트 Promise 쉽게 이해하기 1️⃣ Promise란? "A Promise is an object that may produce a single value some time in the future" 프로미스는 자바스크립트 비동기 처리에 사용되는 객체이다. 여기서 자바스크립트의 비동기 처리란 "특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성"을 의미한다. 2️⃣ Promise가 왜 필요할까? 프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용한다. 일반적으로 웹 애플리케이션을 구현할 때 서버에서 데이터를 요청하고 받아오기 위해.. 2022. 8. 5. 비동기 시리즈 - 비동기 개념 및 콜백함수 자료 정리 * CAPTAIN PANGYO 자료 출처 하단 기재, 좋은 자료가 많아서 들어가서 둘러보는 것을 추천한다! ✅ 비동기 개념 및 콜백함수 "Promise는 자바스크립트 비동기 처리에 사용되는 객체" 1️⃣ 비동기 처리 자바스크립트의 비동기 처리란, 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미한다. 2️⃣ 비동기 처리의 첫 번째 사례 비동기 처리의 가장 흔한 사례는 제이쿼리의 ajax이다. 제이쿼리로 실제 웹 서비스를 개발할 때, ajax 통신을 빼놓을 수 없다. 보통 화면에 표시할 이미지나 데이터를 서버에서 불러와 표시해야 하는데 이때 ajax 통신으로 해당 데이터를 서버로부터 가져올 수 있기 때문이다. function getData() .. 2022. 8. 5. [자바스크립트 javascript] 실행 컨텍스트와 콜 스택 ✅ 실행 컨텍스트와 콜 스택 1️⃣ 실행 컨텍스트(Execution context) 자바스크립트 코드가 실행되는 환경을 의미한다. 자바스크립트에는 대표적으로 두 가지 타입의 실행 컨텍스트(Execution context)가 있다. 실행할 코드에 제공할 환경 정보들을 모아놓은 객체들로 자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념이다. 👌 Global Execution context 자바스크립트 엔진이 처음 코드를 실행할 때 Global Execution Context가 생성된다. 생성 과정에서 전역 객체인 Window Object(Node는 Global)를 생성하고 this가 Window 객체를 가리키도록 한다. 👌 Function Execution context 자바스크립트 엔진은.. 2022. 7. 20. [자바스크립트 javascript] 불변 객체를 만드는 방법 ✅ 불변 객체를 만드는 방법 불변이란? 변하지 않는 것 불변 객체란? 변하지 않는 객체, 즉 이미 할당된 객체가 변하지 않는다는 뜻 자바스크립트에서 불변 객체를 만드는 방법 : const, Object.freeze() 1️⃣ const ES6 문법부터 let과 const 를 지원한다. 변수를 상수로 선언할 수 있다. 일반적으로 상수로 선언된 변수는 값을 바꾸지 못하는 것으로 알려져 있다. ES6에서의 const는 할당된 값이 상수가 되는 것이 아닌, 바인딩 된 값이 상수가 되는, 즉, test변수가 상수가 되기 때문에 const 키워드로 선언된 test 변수에는 객체 재할당은 불가능하지만 객체의 속성은 변경 가능하다. const test = {}; test.name = "mingyo"; console.l.. 2022. 7. 19. [자바스크립트 javascript] 공부 - 자바스크립트 문법 뽀개기 ✅ 시작하기 전 1️⃣ 프로그래밍이란? 프로그래머들이 "어떤 도구"를 이용해 컴퓨터가 작동시킬 수 있는 프로그램을 만들었고, 우리는 마우스 클릭이나 키보드 입력과 같은 익숙한 방식으로 사용하는 것. ex ) 엑셀, 노션, 쿠팡 스마트폰 앱 쇼핑 👌 프로그램이 하는 일 : 데이터의 입력 => 처리 => 출력 - 입력 : 마우스를 클릭하거나 키보드로 타이핑을 한다는 것(데이터 입력) ex) 쇼핑몰에서 우리가 상품을 고르고 배송지와 결제 카드번호 등을 입력하는 것 - 처리 : 최종 구매를 하겠다는 버튼을 누르면, 그 정보들은 어딘가에 저장이 된다. - 출력 : 최종 결제 금액은 얼마인지, 언제 어떤 물건을 구매했는지 기록이 남을거고 배송이 진행 되면서 배송 현황도 계속해서 업데이트가 된다. 그리고 이러한 모든.. 2022. 7. 18. 이전 1 2 다음
