JavaScript
1.[JS] event.preventdefault()
event.preventDefault() 사용하기
2.[JavaScript] 동기 & 비동기
자바스크립트의 싱글 스레드 작업 수행 방식 자바스크립트는 코드가 작성된 순서대로 작업을 처리함 이전 작업이 진행 중일 때는 다음 작업을 수행하지 않고 기다림 먼저 작성된 코드를 먼저 다 실행하고 나서 뒤에 작성된 코드를 실행한다. 블로킹 방식 => 동기 방식의 처리 그런데! 하나의 작업이 오래 걸리게 되면, 이 작업의 종료까지 올 스탑 되기 때문에 전...
3.[JavaScript] Promise - 콜백 지옥에서 탈출하기
Pending : 비동기 작업이 진행중이거나 작업이 시작할 수도 없는 문제가 발생함. Fulfilled : 비동기 작업이 정상적으로 완료됨. Rejected : 비동기 작업이 실패함. (서버 응답하지 않거나, 시간이 오래 걸려 자동으로 취소된 경우.) Promise 어떤 함수가 프로미스를 반환한다는 것은 이 함수는 비동기 작업을 하고, 이 작업의 결과...
4.[JS] async & await - 직관적인 비동기 처리 코드 작성하기
async와 await라는 특별한 문법을 사용하면 프로미스를 좀 더 편하게 사용할 수 있다. async 함수 async는 function 앞에 위치한다. function 앞에 async를 붙이면 해당 함수는 항상 프로미스를 반환한다. 프로미스가 아닌 값을 반환하더라도 이행 상태의 프로미스로 감싸 이행된 프로미스가 반환되도록 한다. await await은...
5.[JS] API 호출하기
API Application Programming Interface 응용 프로그램 프로그래밍 인터페이스 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다. 주로 파일 제어, 창 제어, 화상 처리, 문자 제어 등을 위한 인터페이스를 제공한다. 서버에 데이터를 요청하고 데
6.[JS] 복합 할당 연산자
복합 할당 연산자 (Compound assignment operators) 증가, 감소 연산자
7.[JS] 변수의 scope
Scope : 범위, 영역글로벌 변수는 코드를 작성한 파일 안에서라면 어느 곳에나 사용할 수 있다.
8.[JS] 유사 배열(Array-Like Object)이란?
이름 그대로 배열과 유사한 객체를 유사 배열, 영어로는 Array-Like Object라고 한다.유사 배열의 최소 조건은 다음과 같다.배열은 각 요소에 0부터 순서대로 매겨진 index를 통해 요소끼리의 관계도 파악할 수 있고 그 index를 통해 요소에 접근할 수 도
9.[JS] DOM (문서 객체 모델)
문서 객체 모델, 즉 DOM은 웹페이지(HTML, XML)의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스이다.즉 자바스크립트 같은 스크립팅 언어가 쉽게 웹
10.[JS] 브라우저와 자바스크립트 종합 정리
window객체는 브라우저 창을 대변하면서 자바스크립트에서 최상단에 존재하는 객체이다.자바스크립트 코드 어느 곳에서나 항상 접근할 수 있는 객체이기 때문에 전역 객체, 영어로는 Global Object라고 부른다.어떤 프로퍼티나 메소드를 사용하든 결국 전역 객체 내부의
11.[JS] 다양한 이벤트
마우스 이벤트 키보드 이벤트 포커스 이벤트 입력 이벤트 스크롤 이벤트 
아래의 프로퍼티들은 이벤트 타입과 상관없이 모든 이벤트 객체들이 공통적으로 가지고 있는 프로퍼티이다. 마우스와 관련된 이벤트의 경우에는 아래와 같은 이벤트 객체의 프로퍼티들을 가지고 있다.키보드와 관련된 이벤트의 경우에는 아래와 같은 이벤트 객체의 프로퍼티들을 가지고
13.[JS] 자바스크립트 이벤트 종합 정리
HTML의 속성이나 DOM 프로퍼티를 활용해 이벤트를 등록하는 방법 외에 Element.addEventListener('type', 'handler')를 통해서 이벤트 핸들러를 등록할 수 있습니다.addEventListener 메소드를 활용해서 이벤트 핸들러를 등록했다
14.[JS] client, page, offset 차이
마우스 이벤트를 다룰 때 자주 사용되는 이벤트 객체의 프로퍼티인 clientXY, pageXY, offsetXY에 대해서 한 번 더 짚고 넘어갑시다!client 프로퍼티는 말 그대로 클라이언트 영역 내에서 마우스의 좌표 정보를 담고있는데요. 클라이언트 영역이란 이벤트가
15.[JS] MouseEvent / keyboardEvent / input태그 다루기 / 스크롤 이벤트
마우스 이벤트 객체의 버튼 프로퍼티를 활용하면, 마우스 버튼을 눌렀을 때 일어난 이벤트에 대해서 어떤 버튼을 눌러서 일어난 이벤트인지를 정확하게 알아낼 수 있습니다.참고로 mouseenter, mouseleave, mouseover, mouseout, mousemove
16.[JS] 함수 종합 정리
자바스크립트에서는 함수를 다양한 방식으로 선언할 수 있다.가장 일반적인 방법은 fuction 키워드를 통해 함수를 선언하는 방식이다.이렇게 작성하는 방식을 함수 선언(function declaration)이라고 한다.그리고 자바스크립트에서 함수는 값으로 취급될 수도 있
17.[JS] 배열 메소드 filter, find 설명 그리고 차이점!
JavaScript에서 filter와 find는 배열(Array) 객체의 메서드로, 배열 요소를 조건에 맞게 검색하거나 필터링하는 데 사용된다. 그러나 두 메서드는 목적과 동작 방식에서 차이가 있다.filter 메서드는 배열 내의 모든 요소를 순회하면서 주어진 조건 함
18.[JS] 배열 메소드 some, every 설명 그리고 차이점!
JavaScript에서 some과 every는 배열(Array) 메서드로, 배열 요소들의 조건을 검사하는 데 사용된다.some 메서드는 배열 내의 하나 이상의 요소가 주어진 조건을 만족하는지 검사하고, 조건을 만족하는 요소가 하나라도 있으면 true를 반환한다. 그렇지
19.[JS] 배열 메소드 sort, reverse 설명 그리고 차이점!
배열에서 sort라는 메소드를 활용하면 배열을 정렬할 수 있다.sort 메소드에 아무런 아규먼트도 전달하지 않을 때는 기본적으로 유니코드에 정의된 문자열 순서에 따라 정렬된다.그렇기 때문에 numbers에 sort 메소드를 사용한 것처럼, 숫자를 정렬할 때는 우리가 상
20.[JS] Map과 Set
객체는 property name을 통해 이름이 있는 여러 값들을 묶을 때 활용할 수 있고,배열은 index를 통해 순서가 있는 여러 값들을 묶을 때 유용하게 활용할 수 있다.그런데 ES2015에서 객체와 비슷한 Map과 배열과 비슷한 Set이라는 데이터 구조가 새롭게
21.[JS] 배열 메소드 forEach, map 설명 그리고 차이점!
forEach와 map은 javaScript 배열의 메서드로, 배열 내의 요소들을 순회하며 작업을 수행하는 데 사용된다. 하지만 두 메서드의 사용 목적과 동작 방식에는 차이가 있다.forEach 메서드는 배열의 각 요소를 순회하며 반복 작업을 하는 메소드이다.이때, 콜
22.[JS] Web API, REST API
우리가 어떤 리퀘스트를 보냈을 때, 무슨 리스폰스를 받는지는 모두 그 서비스를 만드는 개발자들이 정한다. 하나의 서비스를 만들 때는 프론트엔드 개발자들과 백엔드 개발자들이 모여 '프론트에서 이 URL로 이렇게 생긴 리퀘스트를 보내면, 백엔드에서 이런 처리를 하고 이런
23.[JS] Promise Chaining 코드를 async/await 코드로 바꾸기 예제
Promise Chaining 코드 async/await 구문으로 바꾸어보기