data.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
코딩앙마님 - 프로미스 ~ 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
생활코딩 - Ajax
* 브라우저는 ajax를 통해 웹서버와 통신함. ajax를 통해 필요한 정보만 부분적으로 가져오기 * 각각의 페이지가 모두 html코드를 가질 필요는 없다. 정적/동적(바뀔 수 있는 부분)인 부분을 분류해서 동적인 부분엔 ajax를 연결해서 서버로부터 동적으로 가져옴 그렇게 하면 index.html 하나로 관리하기 편함 = SPA(하나의 페이지로 여러정보들을 표현할 수 있는 어플리케이션) * ajax를 구현하는 여러가지 기술 중, 최신 방법인 fetch API fetch( ) -> 서버에 ( )을 요청 그런데, 서버가 응답하는데 시간이 많이 걸릴 수 있음. 그래서 서버가 응답할 때까지 다른 일을 함. .then() : 응답이 끝나면 ( )안의 일을 함. 웹 브라우저가 응답받는게 끝나면 then() 의 (..
2020. 11. 23. 01:26
프로그래머스 - 자바스크립트
Object number, string, boolean의 단순 자료형보다 더 복잡한 자료를 표현할 때 사용 객체를 만드는 법 중괄호 {} 를 사용해 정의 가능 객체는 속성의 집합으로 이뤄짐 각 속성은 이름과 값으로 이뤄짐 객체 정의 시 속성이름:값의 형태로 속성 정의 가능 속성의 값은 모든 자료형이 가능, object 포함 객체의 속성에 접근하는 법 객체 이름 뒤에 점(.)을 사용하고 속성 이름에 접근 할 수 있음 객체 이름 뒤에 대괄호([]) 안에 속성 이름을 문자열로 접근할 수 있음 객체의 속성의 값을 변경하는 법 객체 속성에 접근해서 변수에 값을 저장하듯이 사용 undefined와 null undefined 시스템에서 어떤 변수나 속성이 정의되지 않은 경우를 표현하기 위해 사용 선언만 하고 초기화가..
2020. 8. 30. 00:09