1. 클로저(Closure) 란? 클로저는 함수와 함수가 선언된 렉시컬 스코프(Lexical Scope) 사이의 특별한 관계를 나타내는 개념이다. 함수 내부에서 선언된 함수가 외부 함수의 변수에 접근할 수 있고, 그러한 함수를 클로저라고 한다. 클로저는 외부 함수의 변수에 대한 참조를 "닫아"(Capture)서 나중에 사용할 수 있도록 저장한다. 이로 인해 외부 함수가 종료된 이후에도 해당 변수에 접근할 수 있다. 2. 클로저와 관련한 몇 가지 개념 1) 렉시컬 스코프(Lexical Scope): JavaScript는 함수를 정의할 때 함수 내부에서 외부 스코프에 접근할 수 있도록 스코프를 정의한다. 이 스코프는 함수를 선언할 때 결정되며, 함수가 어떤 변수에 접근할 수 있는지 결정한다. 이러한 스코프 ..

https://school.programmers.co.kr/learn/courses/30/lessons/131128?language=javascript 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 1. 리팩토링 전 function solution(X, Y) { let xArr = [...X]; let yArr = [...Y]; const xObj = xArr.reduce((acc, curr) => { acc[curr] === undefined ? (acc[curr] = 1) : (acc[curr] += 1); return acc; }, {}); cons..

https://school.programmers.co.kr/learn/courses/30/lessons/172928 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 장애물을 만나면 이동한 위치를 롤백해야 한다. 이러한 로직을 처리함에 있어 func 함수를 정의하여 문제를 해결했다. for문 순회 시 인덱스와 값을 함께 사용하기 위해 for in 문법을 이용해고, 이중 배열 요소 비교-장애물을 만났을 때 롤백 처리-를 위해 이중 배열의 요소를 문자열로 변경(JSON.stringify) 후 비교하였다. function solution(park, routes) ..

1. 자바스크립트에서 작동하는 코드가 리액트에서는 작동 안돼?! Javascript에서 문제없던 코드가 React.js에서 에러를 토해냈다! 단지 배열로 되어 있는 위경도 데이터를 객체로 변경하고자 했을 뿐이었다. 자바스크립트에서는 잘 작동되는 for문과 map이 현재 진행 중인 리액트 프로젝트에서는 작동하지 않는 난처한 상황이었다. [그림 1]과 같은 에러를 토해낸 코드는 아래와 같다. 실행해 보면 알겠지만 전혀 문제없는 코드이다. const arr = [ [128.63362792028676, 35.2215073061068], [128.63362792028676, 35.2215073061068], ]; const newArr = []; const obj = {}; for (const el of arr)..

"고경희. (2021). Do it! 자바스크립트 입문. 이지스퍼블리싱", 이 책은 자바스크립트 "입문자"에게 훌륭한 선택이다! 9, 10장을 통해 다지게 된 점은 다음과 같다. 9장 폼 1) name 값을 사용해 폼 요소 안에 있는 텍스트 필드에 접근하려면 의 name값과 텍스트 필드의 name값을 사용한다. document.의 name값.텍스트 필드의 name값 document.forms["의 name값"].elements["텍스트 필드의 name값"] // 이렇게도 접근할 수 있다. 2) id, class, name 속성도 없을 경우 폼 배열을 사용해 폼 요소에 접근할 수 있다. document.forms[0].elements[0].value // 현재문서의.첫 번째 form의.첫 번째 요소의.값 ..

"고경희. (2021). Do it! 자바스크립트 입문. 이지스퍼블리싱", 자바, 파이썬을 공부한 적이 있다. 그래서 자바스크립트를 배울 때도 웬만한 문법의 개념은 익숙했다. 하지만 DOM은 낯설다. 다른 책을 통해 이를 먼저 접했는데 상당히 많은 내용을 담고 있었다. 그게 장점일 수 있지만 처음 배우는 입장에서는 중압감이 컸다! 반면 이 책은 핵심만 간결하게 잘 담은 인상이다. 잘 구조화되어 있어 기억도 잘 된다. 차근차근 따라가다 보면 어느새 quiz-2를 풀고 있다. 8장을 통해 다지게 된 점은 다음과 같다. 8장 문서 객체 모델(DOM) 1) DOM - 웹문서의 모든 요소를 자바스크립트를 이용하여 조작할 수 있도록 객체를 사용해 문서를 해석하는 방법. 2) DOM 트리 표현 - 태그: 요소 노드 ..

"고경희. (2021). Do it! 자바스크립트 입문. 이지스퍼블리싱", 6장, 7장을 통해 다지게 된 점은 다음과 같다. 6장 객체 1) 자바스크립트 객체 종류: 내장 객체, 문서 객체 모델(DOM), 브라우저 객체 모델, 사용자 정의 객체 2) 자바스크립트 = 프로토타입 기반 언어(prototype-based language). 객체 간의 상속 관계를 프로토타입 체인(prototype chain)이라고 한다. 프로토타입을 사용해 만들어낸 객체를 '인스턴스(Instance) 또는 개별 객체'라고 한다. 3) Math 객체는 new 예약어를 통해 객체의 인스턴스를 생성하지 않는다. 4) 사용자 정의 객체: "리터럴 표기법, 생성자 함수" 사용해 만든다. 5) 생성자 함수는 객체를 만들어 내는 함수로 f..

"고경희. (2021). Do it! 자바스크립트 입문. 이지스퍼블리싱", 4, 5장을 통해 다지게 된 점은 다음과 같다. 4장 제어문 1) falsy 값으로 0, "", NaN, undefined, null은 모두 false로 인정한다. 2) do...while문은 while 조건이 false이더라도 최소한 한번은 실행된다. 3) 중첩 for문은 안쪽 for문 부터 실행된다. 5장 함수와 이벤트 1) 함수 안에서 새롭게 전역 변수를 선언하려면 변수 이름 앞에 var 예약어를 사용하지 않으면 된다. 2) var를 사용한 변수는 호이스팅(변수의 선언과 할당을 분리해서 선언 부분을 스코프의 가장 위쪽으로 끌어올리는 것)과 재선언이 단점으로 작용할 수 있다. 따라서 let을 사용하는 것을 권장한다. 3) le..