본문 바로가기

전체 글

 (94)
이벤트 버블링 이벤트 버블링 기포가 밑에서 부터 위에서 가듯, 이벤트가 발생한 요소부터 최상단 요소 (보통 document객체 몇몇은 window객체 까지도) 까지 전달되는 동작을 말합니다. 거의 모든 이벤트가 버블링 되며, focus() 등 몇몇 이벤트는 버블링 되지 않습니다. 이벤트 버블링시, event.currentTarget(this) 는 핸들러가 발생한곳( 즉 이벤트를 넣은태그)이 감지됨. event.target은 실제 클릭한 태그가 감지됨. event.stopPropagation으로 버블링 중단가능하다 이를 어떤 태그에 적으면 그 태그 부모들은 더이상 이벤트를 전달 받지 못한다. 허나, onclick에 이 핸들러를 적으면 onclick에 대해서만 중단하고 그 외 keypress 등 다른 핸들러가 겹쳐있을 경..
객체 순회 객체 순회는 단순 for문, for..of문으로는 되지않는다. 오로지 for..in문으로만 가능하다. function solution(participant, completion) { const name_dict = {}; for (let name of participant){ if (!name_dict[name]){ name_dict[name] = 1; continue; } name_dict[name] += 1; } completion.forEach((name) => name_dict[name]--); for (name of name_dict) if (name_dict[name]) return name; TypeError: name_dict is not iterable function solution(p..
TCP/IP 4계층 "전송계층" 응용 계층 다음 전송계층입니다. 전송 계층은 애플리케이션과 인터넷 계층 사이 데이터를 송수신하는데 있어서 중개 역할을 합니다. 이 때 TCP는 도착 순서를 보장하고, 수신 여부를 확인하는 신뢰성 있는(마치 등기우편) 가상회선 패킷 교환 방식을 사용하고, UDP는 도착 순서를 보장하지 않고, 수신 여부를 확인하지 않는 단순 데이터 전달만 목적인 (마치 일반우편) 데이터 그램 패킷 교환 방식을 사용합니다. 정리하자면, TCP UDP 연결방식 연결형 서비스 비 연결형 서비스 패킷 교환 방식 가상 회선 패킷 교환방식 데이터그램 패킷 교환 방식 전송 순서 순서 보장 순서 보장하지 않음 수신 여부 확인 수신 여부를 확인 수신 여부를 확인하지 않음 통신 방식 1:1 통신만 가능 1:1 , 1:N , N:N 통신 모두..
브라우저 렌더링 프로세스 - 1 브라우저 렌더링 요소 에는 다음과 같은 7가지 과정이 있다. 하나하나 먼저 간략 하게 살펴보자. 1. 사용자 인터페이스 : 웹으로 이 글을 보고 있다면 모두가 확인할 수 있을 것이다. 탭 창, 주소 창, 즐겨찾기 창, 닫기, 축소, 확대 등 요청한 페이지 외에 우리가 확인할 수 있는 브라우저의 부분들이다. 2. 브라우저 엔진 : 렌더링 엔진에 동작을 요청하는 등 사용자 인터페이스와 렌더링 엔진 사이에 동작을 제어합니다. 3. 자료 저장소 : 쿠키 캐시와 같은 데이터를 로컬에 저장할 공간. 3. 렌더링 엔진 : URI를 통해 사용자의 요청을 받습니다. 받은 요청을 통신, 자바스크립트 해석기, ui백엔드에게 각각 역할에 맞는 동작을 요청하고 HTML CSS Javascript를 파싱한 결과를 렌더링 합니다...
map() vs foreach() map과 foreach는 모두 각 배열 요소를 돌며 주어진 콜백함수 조건 대로 조종하는 함수이다. 이는 함수형 프로그래밍을 지향한다 ( 변수 사용 억제, 조건문과 반복문 안보임.) 그렇다면 무엇이 차이가 날까? 결론 : foreach()은 결과값이 아닌 , undefined를 return한다. 그래서 무언가 값을 도출하고 싶다면 따로 배열을 만들어 push해줘야한다. foreach() arr.forEach(callback(currentvalue, index, array]])[, thisArg]) currentValue처리할 현재 요소. index (Optional)처리할 현재 요소의 인덱스. array OptionalforEach()를 호출한 배열. thisArg Optionalcallback을 실행할 ..
TCP/IP 애플리케이션 계층 애플리케이션 계층은 HTTP, FTP, SSH, SMTP, DNS 등의 응용 프로그램이 사용되는 계층. 즉 사용자들이 사용하는 애플리케이션에 직접적으로 체감할 수 있을 만큼 연관이 있다. HTTP : 클라이언트와 서버간에 데이터를 주고 받는데 사용되는 프로토콜. (*** HTTP는 그 양이 방대 하기에 추후에 따로 다룰 예정.) 요청 메세지에는, Request Line, Header Line, Data 로 구분. 요청시 data 라인에 넣을 수 있는 크기는 크지 않다. Request Line에는 다음과 같은 메서드가 들어간다. GET : 존재하는 자원에 대한 요청 POST : 새로운 자원을 생성 PUT : 존재하는 자원에 대한 변경 DELETE : 존재하는 자원에 대한 삭제 Header Line에는 요청..
closure 자유변수 참조하는 함수를 리턴하는 함수를 클로저(closure)라고 한다. 이 자유변수를 참조하는 함수는 선언 될 때 환경을 [[Environment]] 프로퍼티에 저장한다. 그렇다면 closure의 목적은 무엇일까? 자바 등의 다른 객체 지향언어를 써보면 클래스를 활용하며 private protected public등의 지정자를 만난 적이 있을 것이다 (자바스크립트는 클래스를 지원하긴 하나 정확히는 prototype을 활용해 객체지향을 준수한다.) 하나의 변수에 이곳 저곳에서 참조를 하여 쓰고 값의 변경을 준다면 이는 큰 문제가 될 소지가 있다. 그렇기에 closure는 변수를 숨기기에 목적이 있다. 예시를 들어본다. function Character(name){ this._name = name; } ..
TCP/IP 계층 구조 인터넷 프로토콜 스위트(suite) 는 인터넷과 컴퓨터간 데이터를 주고 받음에 있어 사용하는 프로토콜 집합이며, 이는 TCP/IP 4계층 모델로 설명하거나 OSI 7계층 모델로 설명한다.이 계층의 구분 기준은 네트워크의 범위로 나눈다고 한다. TCP IP의 어플리케이션 계층은 OSI에서 응용 표현 세션 계층 3분야로 나뉘었고, 전송계층은 그대로, 인터넷 계층은 네트워크 계층으로, 가장 아래 링크(네트워크 인터페이스) 계층은 데이터 링크계층과 물리 계층으로 나누었다. 이 계층들은 변경이 되어도 상호 간 영향을 받지 않게 유연하게 설계되어있다. 짧게 얘기 하자면, 애플리케이션 계층에는 스택이 FTP/HTTP/SSH/SMTP/DNS 전송계층에는 TCP/UDP/QUIC 인터넷 계층에는 IP/ARP/ICMP 링크..

티스토리툴바