본문 바로가기

Front-end66

자바스크립트 비동기 프로그래밍 Asynchronous Programming 비동기 프로그래밍 공부 전에 자바스크립트 코드 동작 원리인 실행 컨텍스트 개념부터 잡고 들어가면 좋겠다. 자바스크립트 실행 컨텍스트 Execution Context 뜯어 보기 📌 실행 컨텍스트 공부해야하는 이유 실행 컨텍스트는 자바스크립트 동작 원리를 담고 있는 핵심 개념이다 ⭐⭐⭐ ✔ 자바스크립트가 스코프를 기반으로 식별자와 식별자에 바인딩 된 값을 관 code-designer.tistory.com 📌 자바스크립트가 비동기적으로 작동해야하는 이유 변수를 선언하거나 함수를 호출하면, 자바스크립트에서는 실행 컨텍스트를 생성한다. 이때 생성된 실행 컨텍스트는 실행 컨텍스트 스택 (콜스택)에 push 되고 함수 코드가 실행된다. 함수 코드의 실행이 종료되면 실행 컨텍스트는 실행 컨텍스트 스택에서 pop 되어 .. 2021. 9. 6.
자바스크립트 실행 컨텍스트 Execution Context 뜯어 보기 📌  실행 컨텍스트 공부해야하는 이유 실행 컨텍스트는 자바스크립트 동작 원리를 담고 있는 핵심 개념이다 ⭐⭐⭐ ✔ 자바스크립트가 스코프를 기반으로 식별자와 식별자에 바인딩 된 값을 관리하는 방식✔ 호이스팅이 발생하는 이유✔ 클로저의 동작 방식✔ 태스크 큐와 함께 동작하는 이벤트 헨들러✔ 비동기 처리의 동작 방식 실행 컨텍스트를 이해했을 때, 이 모든 것을 자연스럽게 습득할 수 있다.   📌  실행 컨텍스트execution context 코드가 실행되려면 스코프, 식별자, 코드 실행 순서 등의 관리가 필요하다. ✔ 선언에 의해 생성된 모든 식별자(변수, 함수, 클래스..)들을 스코프를 구분하여 등록하고    상태 변화(식별자에 바인딩된 값의 변화)를 지속적으로 관리해야 한다.✔ 스코프는 중첩 관계에 의.. 2021. 9. 5.
자바스크립트 돔 DOM 조작 연습 📌 JS가 받아오는 데이터 요약 더보기 const menu = [ { type: 'group', name: '음료', children: [ { type: 'group', name: '콜드 브루', children: [ { type: 'item', name: '나이트로 콜드 브루' }, { type: 'item', name: '돌체 콜드 브루' }, { type: 'item', name: '제주 비자림 콜드 브루' }, { type: 'item', name: '콜드 브루' }, ], }, { type: 'group', name: '프라푸치노', children: [ { type: 'item', name: '애플 쿠키 크림 프라푸치노' }, { type: 'item', name: '더블 에스프레소 칩 프라푸.. 2021. 8. 31.
자바스크립트 클래스 Class 입문 Achivement Goals ✅ 클래스와 인스턴스라는 용어를 이해할 수 있다. ( new 키워드 사용법 / class 키워드 사용법 ) ✅ 객체 지향 프로그래밍 특징을 이해할 수 있다. ( 캡슐화 / 상속 / 추상화 / 다형성 ) ✅ JavaScript에서 객체 지향 프로그래밍을 구현할 수 있다. ✅ Prototype이 무엇인지 이해할 수 있다 ✅ 객체 지향 프로그래밍의 상속(Inheritance)의 개념을 이해하고 코드로 작성할 수 있다. ✅ 현실 세계의 모델을 바탕으로 클래스의 메소드와 속성을 디자인하고 상속 관계를 가진 모델을 코드로 작성할 수 있다. ✅ Prototype chain을 이해하고 설명할 수 있다. (__proto__) 📌 돌아보기 ◾ 메서드 호출 : 1번만 쓸 수 있음 (단순)객체 .. 2021. 8. 29.
자바스크립트 클로저 활용 Closure private 변수, 메서드 흉내 내기 📌 Closure 활용 방법 대표적인 이점 중 하나가, private 변수나 메서드를 흉내낼 수 있다는 점이다. // counter에 할당된 이 익명 함수는 정의되는 즉시 실행된다. // 이 lexical environment는 privateCounter라는 변수와 changeBy라는 함수를 포함한다. // 2개 다 private item이다. 익명 함수 외부에서 접근될 수 없는 아이들이다. // 대신 익명 함수에서 반환된 3개의 public 함수를 통해서만 접근할 수 있다. let counter = (function() { let privateCounter = 0; function changeBy(val) { privateCounter += val; } return { // counter.increas.. 2021. 8. 28.
자바스크립트 클로저 Closure 📌 일단 Lexical Scope? Dynamic Scope? ◾ Lexical Scope 함수나 변수의 스코프를 선언된 위치를 기준으로 정함 ( Compile 시점 ) ◾ Dynamic Scope 함수나 변수의 스코프를 호출된 시점을 기준으로 정함 ( Runtime 시점 ) // 01 Lexical Scope와 Dynamic Scope 비교 let x = 1; function print() { console.log(x); // Lexical Scope : 1 -> 선언된 위치 기준 / 변수 x 전역 스코프 } function foo() { let x = 100; print(); // Dynamic Scope : 100 -> 호출된 시점 기준 / 변수 x 지역 스코프 } foo(); // 02 내부 함수.. 2021. 8. 27.
React To Do List 만들면서 useState, useRef 공부하기 2021. 8. 26.
React 좋아요 버튼 만들면서 state 공부 📌 구현 결과 📌 구현 과정 App.js ✔ /* eslint-disable */ npm 눌렀을 때 뜨는 노란 글씨 ( 오류는 아니지만 약한 경고 메세지 ) 를 지워주는 역할 ✔ 리액트는 데이터 바인딩이 굉장히 쉽다 데이터의 상태를 변화시키고 싶을 때, useState를 사용해 복사해 온 다음에 변경 사항을 적용시킨다. 절대 !! 원본 데이터는 직접 변경시키지 않는다. 꼭 복사해서 들고 올 것. // 01 const changeName = () => articleNameChange(["백엔드개발자" ,"자바스크립트", "리액트"]) // 02 const changeName = () => { const newArr = [...articleName]; newArr[0] = "백엔드개발자"; articleNa.. 2021. 8. 25.
자바스크립트 배열 고차함수 forEach / map 📍 Array.prototype.forEach ( immutable △ ) 함수형 프로그래밍 은 순수 함수와 보조 함수의 조합을 통해 로직 내에 존재하는 조건문과 반복문을 제거하여 복잡성을 해결하고, 변수의 사용을 억제하여 상태 변경을 피하려는 프로그래밍 패러다임이다. forEach 메서드는 for문을 대체할 수 있는 고차함수다. 반복문을 추상화한 고차 함수로서 내부에서 반복문을 통해 자신을 호출한 배열을 순회하면서 수행해야 할 처리를 콜백 함수로 전달받아 반복 호출한다. const number = [1, 2, 3]; const pows = []; numbers.forEach(item => pows.push(item ** 2)); console.log(pows); // [1, 4, 9]; 🔔 forEac.. 2021. 8. 23.

티스토리툴바