1. 이벤트 드리븐 프로그래밍(Event Driven Programming) 프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식 브라우저는 클릭, 키보드 입력, 마우스 이동 등의 어떤 이벤트가 일어나면 이를 감지하여 해당 타입의 이벤트를 발생시킨다. 특정 타입의 이벤트에 반응해 어떤 작업을 처리해주고 싶다면 다음의 2가지가 필요하다. 1. 이벤트 핸들러: 이벤트가 발생했을 때 호출될 함수 2. 이벤트 핸들러 등록: 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것 2. 이벤트 타입 이벤트 타입은 이벤트의 종류를 나타낸다. 이벤트 타입은 약 200여 가지가 있다. 다음 mdn 문서에서 다양한 이벤트 타입을 확인 가능하다. https://developer.mozilla.org/ko..
문제 링크 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 유형 Map, 정렬 문제 풀이 처음에 보자마자 떠오른 방식은 1000개짜리 배열을 만들어서 매개변수 array의 각 요소에 해당하는 인덱스 자리에 카운팅을 해주는 것이었다. 하지만 이는 테스트 케이스에 따라 1000개짜리 배열을 생성하면서 사용하지 않는 메모리가 많을 수도 있겠다는 생각이 들었다. 다른 방법을 떠올리던 중 이전에 풀었던 top K Frequent element 가 생각났고, 해당 풀이를 참고하여 풀었다. 1. Map 객체를 만들고, array를 순회하며 Map에 각 숫자가 나온..
클로저 정의 클로저는 자바스크립트 고유의 개념은 아니다. MDN - "함수와 그 함수가 선언된 렉시컬 환경의 조합" 렉시컬 스코프 함수를 어디서 정의했는지에 따라 함수의 상위 스코프를 결정하는 것 함수의 상위 스코프는 함수를 정의한 위치에 의해 정적으로 결정되어 변하지 않으므로 정적 스코프라고도 불린다. const x = 1; function foo() { const x = 10; bar(); } function bar() { console.log(x); } foo(); // 1 bar(); // 1 자바스크립트 엔진은 렉시컬 스코프를 따르므로 foo와 bar 함수의 상위 스코프는 전역이 된다. 클로저란? outer 함수를 호출하면 outer 함수가 실행되어 중첨 함수 inner를 반환하고 outer 함..
문제 링크 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 유형 문자열, Map 문제 풀이 이번 문제는 문자열 타입의 두 숫자가 주어지고, 공통으로 나타나는 정수들을 이용하여 만들 수 있는 가장 큰 숫자를 반환하는 문제이다. 처음에 생각한 문제 접근법은 다음과 같다. 1. 숫자 X의 맵을 만들고, 각 자리에 해당하는 숫자가 나온 횟수를 저장한다. 2. 숫자 Y를 순회하면서 각 자리에 해당하는 숫자가 X에 있으면 공통으로 나타나는 숫자임을 확인하고 따로 저장한다. 3. '000'과 같은 수는 '0'을, 공통 수가 없으면 -1을, 그 이외의 수는 내림차순..
요청과 응답 브라우저의 주소창에 http://poiemaweb.com을 입력하면 루트 요청이 poiemaweb.com 서버로 전송된다. 서버는 루트 요청에 대해 암묵적으로 index.html을 응답한다. 브라우저의 렌더링 엔진은 전달받은 index.html을 파싱하는 도중 외부 리소스를 로드하는 태그(link, img, script 등)를 만나면 HTML 문서의 파싱을 일시 중단하고 해당 리소스 파일을 서버에 요청한다. HTML 파싱과 DOM 생성 서버로부터 응답된 HTML 문서는 문자열로 이루어진 순수 텍스트이다. 브라우저에 시각적인 픽셀로 렌더링하기 위해서 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조(객체)로 변환해 메모리에 저장한다. 이때, 브라우저가 이해할 수 있는 트리 형태의 자..
인라인 요소에 float 속성을 적용하면 display 속성값이 자동으로 block으로 바뀐다. 예를 들어, 아래와 같은 img 태그와 a 태그가 있을 때, img와 a 태그는 모두 인라인 요소이므로 baseline을 기준으로 각각 위치해 있다. 회원가입 이때, join 클래스명을 갖는 div 요소의 모든 자식 요소에 float 속성을 적용하면 자식 요소들은 display: block 으로 변환된다. .cont-login .join * { float: left; } 더 이상 img와 a 태그는 인라인 요소의 성질을 갖지 않아 베이스라인을 기준으로 배치되지 않고 정렬되는 모습을 확인할 수 있다. 📓 inline 요소들을 정렬도 해야하고, block 요소로 바꿔도 좋다면 적용해보자!
문제 링크 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 유형 큐, 투 포인터 문제 풀이 해당 문제는 두 큐가 주어지고, 각 큐의 총합이 같게 나오도록 pop과 insert한 횟수를 반환하는 문제이다. 처음에 pop과 push를 사용해 두 큐의 요소들을 이동시켰다. 하지만 이는 너무 많은 push, pop 연산이 일어나 다른 방법을 찾아보았다. 처음에는 각 큐에 투 포인터를 두고 요소를 넣고 빼고 해볼까 생각했지만 구현이 어려웠다. 그러다 두개의 큐를 합친 후 투 포인터를 사용하는 접근법 힌트를 얻고 문제를 구현할 수 있었다. 두 큐를 합친 후 하나..
문제 링크 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 유형 DFS/ BFS 문제 풀이 해당 문제는 상대 팀 진영에 도착하기 위해 지나가야 하는 칸의 최소 개수 즉, 최단 거리를 구하는 문제이다. 최단 거리를 구할 때는 DFS 보다 BFS가 유리하다. DFS는 도착점으로 가기 위한 모든 경로를 탐색해야 하지만 BFS는 타겟에 도착한 순간 종료할 수 있기 때문이다. 큐에는 출발점과 칸의 최소 개수를 넣는다. 큐에서 요소를 하나씩 꺼내고 현재 지점이 상대 팀 진영인 매트릭스의 가장 오른쪽 아래라면 칸의 개수를 리턴한다. 그렇지 않으면 현재 지점의 아래..
