본문 바로가기

Javascript

(101)
React_Lv1. My Todo List 만들기 ✅ 1. IP 주소를 입력하세요. https://16-week-lv-1.vercel.app/ React App 16-week-lv-1.vercel.app ✅ 2. GitHub 주소를 입력하세요. https://github.com/webcreastory/16_WEEK_LV1.git ✅ 3. JSX 문법이란 무엇일까요? JSX(Javascript XML)은 React에서 사용되는 JS확장문법으로 JS코드 내에 HTML(또는 XML)과 유사한 구조를 작성할 수 있게 해줍니다. 이를 통해 UI를 더욱 직관적으로 작성할 수 있게 하는데 효과적 문법입니다. ✅ 4. 애플리케이션의 상태 값들을 컴포넌트 간 어떤 방식으로 공유하셨나요? 애플리케이션의 상태 값들은 Todo 컴포넌트 내에서 useState를 사용하여 공유..
DOM-API 실습 Document(HTML 파일)를 Javascript가 알아먹을 수 있는 Object 형태로 Modeling 한 것 브라우저에 기본적으로 내장되어 있는 API 중 하나에요 💡 API가 뭘까요? API는 무언가를 주문할 때 메뉴판과 같은 것이라고 생각해볼 수 있습니다. 예를 들어, 카페에서 커피를 주문할 때, 메뉴판을 통해 주문하게 됩니다. 메뉴판은 고객과 카페 사이의 인터페이스 역할을 하며, 고객은 메뉴판에서 주문할 음료나 음식을 선택하고, 카페는 해당 요청을 처리하여 음료나 음식을 제공합니다. API도 비슷한 개념입니다. 다른 시스템에서 데이터나 서비스를 요청할 때, API는 해당 시스템과 사용자 간의 인터페이스 역할을 합니다. 예를 들어, 날씨 앱에서 사용자가 현재 위치의 날씨를 확인하려면, 앱은 해..
DOM:Document object Model 기본 개념 (1) DOM의 기본 개념 ✅ javascript가 생긴 이유 a. 브라우저에서 쓰려고 만들어진 JS에요! b. 본연의 역할 : 웹 페이지를 동적으로 만들기 위해! 즉, HTML문서를 조작해서 생명력을 불어넣어주기 위해 만들어진 언어 ✅ 웹 페이지가 뜨는 과정 1️⃣사용자가 브라우저에 ‘**www.naver.com’ 주소를** 입력 1. 클라이언트가 서버에게 ‘요청(request)’를 했네요. 2. 여러분이 크롬을 통해 클라이언트의 역할을 하는 것 🚀 💡 사용자 = 브라우저 = 클라이언트 (같은 의미)🙂 2️⃣ HTML 문서를 서버로부터 수신 네이버서버는 여러분(=브라우저 =클라이언트)에게 ‘응답(response)’형태 => HTML 문서(document) 3️⃣브라우저가 HTML 파일을 해석(parsi..
콜백함수 제너레이터(Generator) ✅ 이터러블 객체(Iterable): 반복할 수 있는 객체 제너레이터 문법이 등장해요. *가 붙은 함수가 제너레이터 함수입니다. 제너레이터 함수는 실행하면, Iterator 객체가 반환(next()를 가지고 있음) iterator 은 객체는 next 메서드로 순환 할 수 있는 객체. next 메서드 호출 시, Generator 함수 내부에서 가장 먼저 등장하는 **yield**에서 stop 이후 다시 next 메서드를 호출하면 멈췄던 부분 -> 그 다음의 **yield(:멈춤: 양보하다, 미루다)**까지 실행 후 stop 즉, 비동기 작업이 완료되는 시점마다 next 메서드를 호출해주면 Generator 함수 내부소스가 위 -> 아래 순차적으로 진행돼요 😊 var addCoffee = function (..
비동기 작업의 동기적 표현 - Promise ✅ 직전 예제의 반복부분을 함수화 한 코드에요. trigger를 걸어주기 위해 클로저 개념이 나왔지만, 여기서는 skip 하고, 다음 chapter에서 다루게 될거에요! var addCoffee = function (name) { return function (prevName) { return new Promise(function (resolve) { setTimeout(function () { var newName = prevName ? (prevName + ', ' + name) : name; console.log(newName); resolve(newName); }, 500); }); }; }; addCoffee('에스프레소')() .then(addCoffee('아메리카노')) .then(addCo..
콜백함수_promise ✅ 비동기 작업의 동기적 표현(1) - Promise(1) 💡 Promise에 대해 사실, Promise를 지금 완벽히 이해하기는 정말 어려운 일이에요. 비동기 작업의 동기적 표현 Promise는 비동기 처리에 대해, 처리가 끝나면 알려달라는 ‘약속’이에요. new 연산자로 호출한 Promise의 인자로 넘어가는 콜백은 바로 실행돼요. 그 내부의 resolve(또는 reject) 함수를 호출하는 구문이 있을 경우 resolve(또는 reject) 둘 중 하나가 실행되기 전까지는 다음(then), 오류(catch)로 넘어가지 않아요. 따라서, 비동기작업이 완료될 때 비로소 resolve(성공), reject(실패) 호출해요. 우리는 이 방법으로 비동기 -> 동기적 표현을 구현할 수 있습니다 🙂 .then(..
콜백지옥 & 동기 비동기 ✅ 콜백지옥이란(엉망진창 함수) 콜백 함수를 **익명 함수**로 전달하는 과정이 반복되어 코드의 **들여쓰기 수준이 헬 수준**인 경우를 말해요! 😂😂😂 주로 이벤트 처리 및 서버 통신과 같은 비동기적 작업을 수행할 때 발생하죠. 뭐가문제일까요? 가독성이 정말 **지옥(hell)**(오랜 상태로 이렇게 짜여왔기 때문에, 수정도 어렵습니다.) ✅동기 vs 비동기 동기 : synchronous 현재 실행중인 코드가 끝나야 다음 코드를 실행하는 방식을 말해요! CPU의 계산에 의해 즉시 처리가 가능한 대부분의 코드는 동기적 코드구요. 계산이 복잡해서 CPU가 계산하는 데에 오래 걸리는 코드 역시도 동기적 코드에요 😎 비동기 : a + synchronous ⇒ async라고들 흔히 부르죠 실행 중인 코드의 완료..
콜백 함수 내부의 this에 다른 값 바인딩하기 🤔 콜백 함수 내부에서 this가 문맥에 맞는 객체를 바라보게 할 수는 없을까? 🤔 콜백 함수 내부의 this에 다른 값을 바인딩하는 방법 우리가 이전에 강제로 this를 제어하는 방법에서 살짝 다뤘던 방식이에요 👀 var obj1 = { name: 'obj1', func: function() { var self = this; //이 부분! return function () { console.log(self.name); }; } }; // 단순히 함수만 전달한 것이기 때문에, obj1 객체와는 상관이 없어요. // 메서드가 아닌 함수로서 호출한 것과 동일하죠. var callback = obj1.func(); setTimeout(callback, 1000); 실제로는 this를 사용하는게 아니기도 하고,..
콜백 함수는 함수다 ✅ 콜백 함수로 어떤 객체의 메서드를 전달하더라도, 그 메서드는 메서드가 아닌 함수로 호출해요. var obj = { vals: [1, 2, 3], logValues: function(v, i) { console.log(this, v, i); } }; //method로써 호출 obj.logValues(1, 2); //callback => obj를 this로 하는 메서드를 그대로 전달한게 아니에요 //단지, obj.logValues가 가리키는 함수만 전달한거에요(obj 객체와는 연관이 없습니다) [4, 5, 6].forEach(obj.logValues);
콜백함수_this 바인딩 ✅ this 앞전 시간에서 우리는 콜백 함수도 함수이기 때문에 기본적으로는 this가 전역객체를 참조한다 라고 귀가 아프도록 들어왔어요. 하지만, 예외사항 기억 나세요? 🙄 🔥제어권을 넘겨받을 코드에서 콜백 함수에 별도로 this가 될 대상을 지정한 경우에는 그 대상을 참조한다. 내부적으로는 어떻게 이걸 가능케 하는 것일까요? 별도의 this를 지정하는 방식을 이해하기 위해서. 그리고, 제어권에 대한 이해를 높이기 위해서 map함수를 직접 구현해 볼까요? 핵심은 call, **apply**에 있어요! // Array.prototype.map을 직접 구현해봤어요! Array.prototype.mapaaa = function (callback, thisArg) { var mappedArr = []; for ..