코딩연습장

이러한 페이지를 만들었다.영화데이터 제공 openapi를 사용하여 페이지 진입 시 영화데이터를 불러온다.불러온 데이터 중 원하는 키워드를 검색하여 해당 키워드가 '제목'에 있는 영화들만 보이도록한다.import { getMoviesFunc } from "./getMoviesFunc.js";import { movieCardsFunc } from "./movieCardsFunc.js";import { addEvent } from "./addEvent.js";import { searchMovie } from "./searchMovie.js";import { observer } from "./observer.js";observer();getMoviesFunc().then((res) => { movieCar..

클로저 : 함수와 그 함수가 선언된 렉시컬 환경과의 조합 const x = 1;// innerFunc()에서는 outerFunc()의 x에 접근할 수 없죠.// Lexical Scope를 따르는 프로그래밍 언어이기 때문function outerFunc() { const x = 10; innerFunc(); // 1}function innerFunc() { console.log(x); // 1}outerFunc();출력은 1이 나온다. outerFunc 안에 x가 10으로 할당되어있고, 그곳에서 innerFunc를 실행했기 때문에 10이 출력될 것이라고 생각할 수도 있지만, JS엔진은 함수를 어디서 '호출'했는지가 아니라, 어디에 '정의'했는지에 따라 스코프를 결정하기 때문이다.이를 어휘적..

클래스와 인스턴스클래스 - 학교에서 다양한 종류의 책상을 만드는 설계도, 설계도를 보면 어떤 종류의 책상을 만들 수 있는지, 책상의 특징은 무엇인지 알 수 있다.인스턴스 - 설계도를 보고 만들어진 실제 책상, 모양/크기/색상/재료 등 설계도에 따라 만들어지며 모두 다른 인스턴스가 된다. // 클래스라는 설계도를 만들어 봅시다.class Person { //사람이기 때문에 필수요소를 name, age를 가진다. constructor(name, age) { this.name = name; this.age = age; } //이렇게 함수를 만들어두면 인스턴스를 만들 때 메서드가 들어있다. sayHello() { console.log(`${this..

1. js가 왜 생겼는데 - 브라우저에서 사용하기 위한 언어이다. - 웹 페이지를 동적으로 만들기 위해, 즉 HTML문서를 조작해서 생명력을 불어넣어주기 위해 만들어진 언어디다. 2. 웹 페이지가 뜨는 과정 - 사용자가 'www.naver.com'을 주소에 입력한다.   1. 클라이언트가 서버에게 요청(req)을 함   2. 우리가 크롬을 통해 클라이언트의 역할을 하는 것 - HTML문서를 서버로부터 수신한다.   1. 네이버 서버는 우리(=브라우저 =클라이언트)에게 응답(res)을 한다.   2. 그 응답이 HTML문서이다. - 브라우저가 HTML 파일을 해석(parsing 파싱)   1. 브라우저에는 기본적으로 렌더링 엔진이 있다. 서버가 클라이언트에게 준 HTML문서를 렌더링 한다.   2. 렌더링..

https://github.com/escape-engineering/Algorithm GitHub - escape-engineering/AlgorithmContribute to escape-engineering/Algorithm development by creating an account on GitHub.github.com 잔디도 심으며 마크다운 작성법도 연습하려한다.티스토리엔 TIL, WIL, 기초세팅, 사용방법 등 정리하려한다.

프로그래머스 - 의상 처음 풀이하다 막힌 코드function solution(clothes) { var answer = 0; let clothesMap = new Map() console.log(clothes) for (let item of clothes) { let name = item[0] let type = item[1] clothesMap.has(type) ? clothesMap.set(type, [...clothesMap.get(type), name]) : clothesMap.set(type, [name]) } console.log('clothesMap= ', clothesMap) let clothe..

1. 콜백지옥function do () { $.get(url, function (result) { setTimeout(function () { startAsyncProcess(function (){ ... } }, 1000) }}연속된 이벤트나 서버통신같은 비동기적 작업을 수행할 때 이러한 콜백함수 지옥에 빠지곤한다.이렇게 연속된 콜백함수는 코드의 유지보수를 어렵게하며, 다른사람이나 미래의 내가 코드를 봤을 때 이해하기 어렵게 만든다. 2. 동기 vs 비동기동기 (Sync) - 카페에서 줄을서서 주문을 하는데, 주문을 하고 커피가 손님에게 전달될때까지 다음 주문으로 넘어가지 않는다. 비동기 (Async) - 카페에서 줄을 서..

function solution(want, number, discount) { var answer = 0; let wantMap = new Map() for(let i = 0; i { if (value코드를 작성하고 문제를 다시 읽어보니 당연히 틀린것이라고 생각이 들었다.그 이유는 연속적으로 원하는 물건이 들어오는지는 확인을 하지만, 해당 연속에서 원하는 물건의 개수가 맞춰질수있는지에 대한 예외처리가 없기때문이다.또한, 알맞은 순서와 알맞은 순서 사이 틀린 값이 들어올 때도 고려하여 모든 discount배열을 돌아야 하는데 해당 부분도 부족한 것 같다. function solution(want, number, discount) { var answer = 0; for..

this는 실행 컨텍스트가 생성될 때 결정된다. 이것을 this를 bind한다라고 한다. 전역공간에서의 this는 전역 객체를 가리킨다. this에는 호출을 누가했는지에 대한 정보가 담긴다.  함수에서의 this, 메서드에서의 this함수와 메서드는 비슷해보이지만 '독립성'에서 차이가 있다.함수는 그 자체로 기능을 수행하지만, 메서드는 호출당한 객체에 대한 동작을 수행한다.함수()객체.메서드() var func = function (x) { console.log(this, x);};func(1);var obj = { method: func,};obj.method(2);함수자체에서의 this는 전역객체를 의미함을 알 수 있다.  메서드 내부에서의 thisvar obj = { methodA: fu..

실행 컨텍스트란 실행할 코드에 제공할 환경정보들을 모아놓은 객체이다. 이것들을 스택의 한 종류인 콜스택에 쌓아올리는데, 이를 통해 가장 위에 쌓인 컨텍스트와 관련된 코드를 먼저 실행하는 환경 및 순서를 보장할 수 있다.// ---- 1번var a = 1;function outer() { function inner() { console.log(a); //undefined var a = 3; } inner(); // ---- 2번 console.log(a);}outer(); // ---- 3번console.log(a);  1. 전역컨텍스트 in2. outer()을 만나 전역 중단 후 outer컨텍스트 in3. inner()을 만나 outer 중단 후 inner컨텍스트 in4. inner()실행 후 inn..