개발개발 블로그

This is Dev Blog

Promise

1. Promise란비동기 처리를 위한 패턴으로 callback과 다르게 처리 시점을 명확하게 보여주는 패턴이다. 2. 콜백의 단점2.1 콜백 헬callback-hell1234567891011step1(function (value1) { step2(value1, function (value2) { step3(value2, ......

REST API

1. REST API란자원을 이름(자원의 표현)으로 구분하여 해당 자원의 상태(정보)를 주고 받는 모든 것을 REST라고 한다. REST API는 REST 기반으로 서비스 API를 구현한 것. 2. REST API 중심 규칙 URI는 정보의 자원을 표현해야 한다. 자원에 대한 행위는 HTTP Method(GET, POST, PUT, DELETE ......

Ajax

1. Ajax란자바스크립트를 이용해 비동기적으로 서버와 브라우저가 데이터를 교환할 수 있는 통신 방식 페이지 전체 로드가 아닌 갱신할 부분만 갱신한다 2. JSON클라이언트와 서버 간 데이터 교환을 위한 데이터 포맷 순수 텍스트로 구성된 규칙 있는 데이터 구조 JSON12345{ "name": "Yu", "location": "ear......

Event

1. 이벤트란브라우저에 특정 사건이 발생하면 이를 감지하여 내보내 주는 것.이벤트 발생시 처리할 함수를 등록시켜 상호작용 하는 것을 이벤트 드리븐 프로그래밍이라고 한다. 2. 이벤트 타입 마우스: click, dbclick, mousedown, mouseup, mousemove, mousenter, mouseleave 키보드: keydown, k......

DOM

1. DOM 이란 HTML 문서를 표현하는 트리 자료구조 HTML 구조를 제어할 수 있는 API 2. 노드2.1 노드HTML을 구성하는 개별적인 요소 문서 노드 : document 객체, HTML당 유일함. 요소 노드 : HTML 요소를 가리키는 객체. 어트리뷰트 노드 : HTML 요소의 어트리뷰트를 가리키는 객체. 텍스트 노드 : H......

배열 탐색 함수들의 차이

차이점 구분 indexOf includes find findIndex 특정 요소 탐색 O O X X 특정 조건 탐색 X X O O 배열 속 객체의 특정 프로퍼티 비교 X X O O 탐색실패시 -1 false undefined -1 구분 filter find 특정 조건 탐색 O O 전체 탐색(무조건) O X 반......

브라우저의 렌더링 과정 (Rendering)

1. 랜더링이란HTML, CSS, 자바스크립트로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것을 말한다. 2. 랜더링 과정 2.1 요청과 응답 주소창에 URL 입력 서버에서 주소/index.html 응답 HTML 파싱 시작, HTML DOM 생성 link, style 태그 만날경우 HTML DOM생성 중단 후 CSSOM 생성 or......

Set과 Map

1. Set과 Map이란 Set 객체: 중복되지 않는 유일한 값들의 집합 Map 객체: 중복되지 않는 키, 중복 가능한 값의 쌍으로 이루어진 컬렉션 2. Set과 Map 비교 기능 Set Map 순서 의미 X X 생성 new Set(); new Map(); 개수 확인 Set#size() Map#size() 요소 추가 Set......

자료구조와 알고리즘2 (Data Structure & Algorithm)

선택 정렬선택 정렬(selection sort)은 배열의 최소값을 검색하여 배열의 왼쪽부터 순차적으로 정렬을 반복하는 정렬 알고리즘이다. 배열이 미정렬 상태이므로 최소값 검색에는 이진 검색이 아닌 선형 검색 알고리즘을 사용한다. 선택 정렬은 버블 정렬보다 빠르다.시간 복잡도: O(n2) 선택 정렬을 통해 주어진 배열(array)을 정렬하는 함수를 ......

Array HOF 연습 문제

1. html 생성아래 배열을 사용하여 html을 생성하는 함수를 작성하라. creatHTML.js1234567891011121314151617181920212223242526const todos = [ { id: 3, content: "HTML", completed: false }, { id: 2, content: "C......