[JS] Closure (클로저)
·
javascript
# 클로저란?원본 "A closure is the combination of a function and the lexical environment within which that function was declared" 번역 "클로저는 어떤 함수와 해당 함수가 선언된 렉시컬 환경의 조합이다" 쉽게 해석 "상위 함수보다 하위 함수가 더 오래 살아있는 경우를 closure라고 한다." # 예시해당 함수를 예로 들어보면function getNumber() { var number = 5; function innerGetNumber() { return number; } return innerGetNumber(); } console.log(getNumber()); 출력 결과5 이 상황은 innerGetNumber ..
[JS] netERRABORTED-404-Not-Found-에러
·
javascript
위와 같은 오류가 발생해서 뭔지 찾아봤다. 경로에 문제가 생겼다는 에러였다. index.js 에서 App.js를 불러오는데 생긴 에러였는데import App from './App'; const app = new App(); app.play();이렇게 봐서는 모르겠어서 계속 구글링해보았다. 근데 App 을 자동임포트 해주는 기능에서 App에 .js가 빠져서 생긴 에러였다.. import App from './App.js'; const app = new App(); app.play();js 를 붙여서 다시 실행해보니 에러는 사라졌다.
[JS] 객체 지향 프로그래밍(OOP) 팩토리 함수, 생성자 함수, class
·
javascript
자바스크립트는 멀티-패러다임 언어로 명령형(imperative), 함수형(functional), 프로토타입 기반(prototype-based) 객체지향 언어다 자바스크립트는 이미 생성된 인스턴스의 자료구조와 기능을 동적으로 변경할 수 있다는 특징이 있다. 객체 지향의 상속, 캡슐화(정보 은닉) 등의 개념은 프로토타입 체인과 클로저 등으로 구현할 수 있다. 자바스크립트 객체지향 방법중 팩토리, 생성자, 클래스에 대해 알아보려고 한다. # 팩토리 함수 function makeColor(r, g, b){ const color = {} color.r = r; color.g = g; color.b = b; color.rgb = function(){ const {r,g,b} = this; // 구조 분해 retur..
axios를 이용한 TV 프로그램 검색
·
해보기
사용 API 주소 https://www.tvmaze.com/ TVmaze.com - Your personal TV guide www.tvmaze.com axios 주소 https://github.com/axios/axios GitHub - axios/axios: Promise based HTTP client for the browser and node.js Promise based HTTP client for the browser and node.js - GitHub - axios/axios: Promise based HTTP client for the browser and node.js github.com html 구조 TV 프로그램 검색 Search js 구조 // API 주소 https://www...
[JS] fetch 와 XHR
·
javascript
자바스크립트로 실제 http 요청을 해보려고 한다. XHR은 XMLHttpRequest 의 약자이다. 예전에는 이런 구문을 사용해서 자바스크립트에서 http 요청을 보냈다. const req = new XMLHttpRequest(); req.onload = function () { console.log("LOAD"); const data = JSON.parse(this.responseText); }; req.onerror = function () { console.log("ERROR"); } req.open("GET", "https://swapi.dev/api/people/1"); req.send(); 성공일때 onload 콜백에서는 성공메시지를 바로 사용은 못하고 파싱해줘야한다. 실패일때 onerroe..
[JS] async, await
·
javascript
https://jjaong34.tistory.com/40 자바스크립트 Promise https://jjaong34.tistory.com/39 자바스크립트 비동기 콜 스택(callstack) , 콜 백(callback) 자바스크립트는 쓰레드가 단일이다. 동시에 처리하는게 아닌 하나씩 처리를 해나간다는 뜻이다. 그렇기 때문에 비 jjaong34.tistory.com 저번 포스팅에서 Promise를 알아보았는데 이번엔 프로미스를 객체로 반환하는 async, 프로미스를 기다리기 위해 사용하는 await 키워드에 대해 알아보려고 한다. # async 함수를 만들 때 키워드를 사용하면 비동기 함수로 만들어준다. async function Fn() { return aaa; } 화살표 함수 const Fn = asyn..
개발짜옹
'자바스크립트' 태그의 글 목록