자바스크립트 개념 다시 - 블로킹/논블로킹, json, ajax, REST API, promise
그냥 공부 집중용 필사... 프로젝트에 들어가기 앞서 관련 개념 정리. 5.32 동기식 처리 모델 vs 비동기식 처리 모델 동기식 처리 모델은 태스크를 직렬적으로 수행함. 순차적으로! 그래서 어떤 작업이 수행 중이면 그 작업이 끝날 때까지 블로킹(작업중단) 됨 비동기식 처리 모델은 병렬적으로 태스크를 수행함. 태스크가 종료되지 않은 상태라도 대기하지 않고 다음 태스크를 실행함! 논 블로킹!! 자바스크립트의 대부분 DOM 이벤트 핸들러와 Timer 함수, Ajax 요청은 비동기식 처리 모델로 동작함. function func1() { console.log('func1'); func2(); } function func2() { setTimeout(function() { console.log('func2');..
2021. 3. 10. 08:04data.json 관련 정리(fetch, axios)
드림코딩 쇼핑몰 미니게임 클론코딩을 다시 정리해보자. 1. data.json은 기본적으로 객체형이지! 그리고 그 객체 안에서 각 속성들은 속성값을 배열로 갖는다.(이 속성값이 데이터임) 그리고 그 배열 안에 담긴 데이터들은 객체형태이다. 즉, 객체 -> 배열 -> 객체 그러니까 { 데이터명 : [ {"name": "Mike"}, {"name": "Jane"}, ... ] } 이렇게!!! JSON.stringify()를 해서 서버로 보내고, JSON.parse() 해서 받아옴. function loadItems() { return fetch("./data/data.json") .then((response) => response.json()) .then((json) => json.items); } 2. fe..
2021. 2. 28. 02:40함수 호출, 콜백 함수 관련(고차함수, 이벤트리스너 등), 일급객체
함수선언문 function abc() { } 함수표현식 const abc = function () { } ---> 익명함수 이렇게 변수에 할당할 수 있음. 함수는 일급객체이기 때문. 일급객체 위키백과: "일급객체(First-class Object)란 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다." 함수를 데이터처럼 다루는 것. 그래서 변수에 할당할 수 있고, 다른 함수를 인자로 전달 받을 수 있고, 다른 함수의 결과로서 리턴될 수 있음. 데이터(string, number, boolean, array, object) 다루듯이 다룰 수 있으니까! 그래서 고차함수가 가능하고, 콜백함수로 사용할 수 있는 것. 1. 콜백함수: 매개변수를 통해 전달되고 전달받은 함수의 내부에서 어느 ..
2021. 2. 23. 18:42
틱택토
순서도부터! 그 다음, html의 table 태그로 3x3 칸을 준비한다. 자바스크립트로 만들어볼 것.. 이차원배열을 이용해서! var BODY = document.body; var table = document.createElement("table"); var cells = []; var rows = []; for (var i = 0; i < 3; i++) { var row = document.createElement("tr"); rows.push(row); cells.push([]); for (var j = 0; j < 3; j++) { var cell = document.createElement("td"); cells[i].push(cell); row.appendChild(cell); } table..
2021. 1. 26. 03:12
코딩앙마님 - 프로미스 ~ async & await
1. 프로미스 만들기 const pr = new Promise((resolve, reject) => { //code }); 프로미스는 기본적으로 객체이다. new Promise로 생성하고, 두 개의 콜백함수 인자를 전달받는데, resolve는 성공 / reject는 실패했을 때 실행되는 콜백함수임. new Promise 생성자함수가 반환하는 프로미스 객체는 state와 result를 프로퍼티로 갖는다. 초기엔 pending 상태였다가 성공하면(resolve가 호출되면) fulfilled 상태가 되고 이때 result는 resolve 함수로 전달된 값이다. 실패하면(reject가 호출되면) rejected 상태가 되고, 이때 result는 마찬가지로 reject 함수로 전달된 에러 코드로 예를 들어보면, ..
2021. 1. 7. 01:29childNodes와 children의 차이
https://hogni.tistory.com/122 자바스크립트 childNodes 속성과 children 속성의 차이 자바스크립트에서 자식 요소/노드에 대해서 접근하는 방법인 childNodes 프로퍼티와 children 프로퍼티의 차이점에 대해서 보겠습니다. 사실 각각의 이름에서 그 차이를 알 수 있습니다. 다음과 같은 hogni.tistory.com childNodes: 자식 노드에 접근 현재 요소의 자식 노드가 포함된 NodeList를 반환합니다. 이때 반환되는 NodeList에는 요소 노드뿐만 아니라 주석 노드와 같은 비 요소 노드를 포함합니다. children: 자식 요소에 접근 현재 요소의 자식 요소가 포함된 HTMLCollection을 반환합니다. 비 요소 노드는 모두 제외됩니다. +) ..
2021. 1. 3. 11:04
자바스크립트 중급강좌 변수/호이스팅/클로저
코딩앙마님 강좌 공부한 내용 1. 변수와 호이스팅 https://youtu.be/ocGc-AmWSnQ var는 한 번 선언된 변수를 다시 선언할 수 있다.(let, const는 불가능. 단, let은 재할당은 가능함) 또한, 선언하기 전에 사용(참조)해도 에러가 나지 않는다. -> 선언이 호이스팅되기 때문에. 단! 할당은 호이스팅되지 않는다. var name; console.log(name) //할당은 호이스팅 되지 않아서 undefined name = 'Mina'; 자바스크립트는 모든 선언(var, let, const, function, class)을 호이스팅한다. 호이스팅: 스코프 내부 어디서든 변수 선언이 최상위에 선언된 것처럼 행동. ->변수가 선언되기 전에 사용할 수 있는 것을 의미함. cons..
2021. 1. 2. 04:59
프로토타입 등
~뒤죽박죽얼렁뚱땅우당탕탕요절복통 섞인 자바스크립트 개념 정리하기~ : 프로토타입/생성자함수/클래스에 대해서 완벽히 잡고 가기. 생성자함수 클래스(ES6) 상속 프로토타입 this 바인딩 일단 프로토타입이 뭐냐???? "자바스크립트의 모든 객체는 자신의 부모인 프로토타입 객체와 연결되어 있다. 이를 통해 부모 객체의 프로퍼티나 메서드를 마치 자신의 것처럼 사용할 수 있음. 이러한 부모객체를 프로토타입객체(프로토타입)이라고 부른다." "자바스크립트의 모든 객체는 자신의 프로토타입을 가리키는 [[Prototype]]라는 숨겨진 프로퍼티를 가진다."(ES명세서) 크롬 브라우저에서는 __proto__가 바로 이 숨겨진 [[Prototype]] 프로퍼티를 의미한다. (인사이드자바스크립트) => 모든 객체는 자신의 ..
2020. 12. 29. 20:03arguments
15. 함수의 가변인자 arguments 콜렉션 (인사이드 자바스크립트 99p) 함수도 객체이므로 참조값이 있음. 그래서 어떤 매개변수는 참조하는 이름일 뿐. 담는 그릇이 아니라서 만일 매개변수가 2개이고, 호출할 때 인자를 5개 를 넣어도 에러는 뜨지 않음 그래서 함수 안에는 arguments라는 콜렉션이 있음 호출됐을 때 넘겨받은 인자들을 배열 형태로 저장하고 있는 객체이며 실제 배열은 아니므로 유사 배열 객체라고 한다. 유사 배열 객체이므로 배열 메서드를 사용할 수는 없지만, call/apply 메서드를 이용한 명시적인 this 바인딩은 가능하다. function add(x, y){ alert(arguments.length); return x + y; }; console.log(add(1, 2, 3..
2020. 12. 29. 02:29
DOM
DOM을 깨우치다 1 - DOM 소개 & method, property 훑어보기 김버그님 유튜브의 업로드된 프론트엔드 개발 멘토링 영상에 대한 필기 정리 html&css는 단지 보여지는 역할을 하는 아이들인데 이것들을 조종해서 기능을 넣는 것이 javascript임 그런데 javascript한테 html 태그들은 단지 문자열임 HTML을 JavaScript가 이해할 수 있는 object의 형태로 바꾼 것을 DOM이라고 함 이렇게 문자열을 의미있는 객체 형태로 바꾸는 것을 Parse라고 함 (최소한의 의미가 있는 단위로 쪼개서 정리해야 javascript가 거기에 속성을 넣거나 이런 기능을 집어넣을 수 있음) 그래서 html tag를 정확히 뭘로 바꾸냐면 Node로 바꾸는거임. 노드를 뭐라고 딱 정의하기는..
2020. 12. 14. 02:34