목록전체 글 (21)
pgg-dev
스코프란? 특정 장소에 변수를 저장하고, 나중에 다시 그 변수를 찾을 때에 잘 정의된 규칙이 필요한데 이 규칙을 '스코프'라고 한다. 이 규칙을 통하여 변수가 어디에 저장되는지, 변수를 어떻게 찾는지 알 수 있다. 변수를 찾는 이유는 변수에 값을 대입하거나 변수의 값을 얻어오기 위해서다. 스코프는 전역스코프와 지역 스코프 두 가지 종류가 있다. 스코프 체인 대상 변수를 현재 스코프에서 발견하지 못하면 엔진은 다음 바깥의 스코프로 넘어가는 식으로 변수를 찾거나 글로벌 스코프에 도달할 때까지 계속하고, 글로벌 스코프에 도달하면 변수를 찾든 못 찾든 검색을 멈추고 에러를 발생시킨다. 1 2 3 4 5 6 7 8 function foo() { var color = "blue"; function bar() { c..
Map Object를 변형한 것이다. 키-값 쌍을 저장한다. 각 쌍의 삽입 순서를 기억한다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 let map = new Map([["dog", "woof"]]); map.set("cat", "meow"); for (var [key, value] of map) { console.log(key + " goes " + value); } //dog goes woof //cat goes meow map.get("dog"); //"woof" map.size; //2 map.has("cat"); //true map.keys(); //{"dog", "cat"} map.values(); //{"woof", "meow"} map.delete("dog..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/T3n0I/btqBljx7zb1/N6G55AXqVZlCnK46YhDXeK/img.png)
문제 설명 수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다. 마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수들의 이름이 담긴 배열 completion이 주어질 때, 완주하지 못한 선수의 이름을 return 하도록 solution 함수를 작성해주세요. 제한사항 마라톤 경기에 참여한 선수의 수는 1명 이상 100,000명 이하입니다. completion의 길이는 participant의 길이보다 1 작습니다. 참가자의 이름은 1개 이상 20개 이하의 알파벳 소문자로 이루어져 있습니다. 참가자 중에는 동명이인이 있을 수 있습니다. 입출력 예 입출력 예 설명 예제 #1 leo는 참여자 명단에는 있지만, 완주자 명단에는..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/c7fH8g/btqBikwuI2n/L7AYFHGaV7LXOB5xPzPf1k/img.png)
Virtual DOM 이란? 실제 DOM의 가벼운 사본과 비슷하다. Virtual DOM을 사용하면 실제 DOM에 접근하여 조작하지 않고, DOM을 추상화 한 자바스크립트 객체를 구성하여 사용한다. Virtual DOM 사용 이유 HTML 마크업을 시각적인 형태로 변환하는 것은 웹브라우저가 하는 주 역할이기 때문에 이를 처리할 때 컴퓨터 자원을 사용하는 것은 어쩔 수 없다. DOM은 트리 구조로써, 업데이트 후에 변경된 요소와 하위 요소를 다시 렌더링 하여 웹브라우저 UI를 업데이트해야 한다. 따라서 UI 구성 요소가 많을수록 DOM 트리를 다시 렌더링 해야 되므로 성능이 저하된다. 이런 문제를 해결하려면 DOM을 최소한으로 조작하여 작업해야 된다. 리액트는 Virtual DOM 방식을 사용하여 DOM ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bEmO27/btqA8ikf2fS/a7iLK0H2Ms24f3lBEr6UpK/img.png)
자바스크립트는 싱글 스레드 프로그래밍 언어이다. 하나의 프로그램은 동시에 하나의 코드만 실행할 수 있다는 말이다. one thread == one call stack == one thing at a time 호출 스택(call stack)은 프로그램 상에서 실행되는 순서를 기록하는 데이터 구조이다. 함수를 실행하면 스택에 함수를 추가(push) 하고, 리턴이 일어나면 스택의 가장 위쪽부터 제거(pop)한다. 호출 스택 작동 원리 엔진이 코드를 실행하기 전에는 호출스택이 비워져 있다. 코드를 실행하면 코드 자체인 main 함수를 스택에 집어넣는다. 함수들을 각각 정의하고, 마지막에 printSquare를 만난다. 함수를 호출하기 때문에 스택에 추가하고, 다시 square가 추가된다. square는 mult..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cJGtC6/btqA2NTaCXY/zv6AyhIa7KWa5wDhml8JP0/img.png)
SPA 란? SPA는 단일 HTML 페이지를 사용하는 단일 페이지 어플리케이션으로, 현재 웹 개발의 트렌드이다. 동적 업데이트를 제공하여 페이지를 새로 고치지 않고 상호 작용할 수 있다. 전통적인 웹어플리케이션 구조는 여러 페이지로 구성되어있다.MPA (Multiple Page Applications) 클라이언트가 요청할 때마다 페이지가 새로고침 되고, 페이지를 로딩할 때마다 서버로부터 리소스를 전달받아 해석후 렌더링을 한다. 요즘은 웹에서 제공되는 정보가 많기 때문에 속도적인 측면에서 문제가 있다. SPA 형태는 브라우저에 최초 한번 페이지 전체를 로드하기 때문에 속도를 향상할 수 있다. 전체 페이지가 로드된 상태에서 특정 부분만 AJAX를 통해 데이터를 바인딩하는 방식으로, JSON 데이터를 사용하여..