JavaScript

String -> intint -> String배열로 변환변수에 할당이후 배열에서 사용할 수 있는 map, reduce, reverse 사용 가능.기존 배열을 변환(transform)할 때 사용‼️기존 배열을 수정하지 않음‼️반환값이 반드시 필요함‼️요소만 변경인덱스

숫자 (아래 예시에서는 value) 기준 오름차순value에 값 하나map.entries() 를 사용해서 \[key, value] 형태의 배열 iterator를 반환하고 value기준으로 정렬a1, b1 이 value이다다시 Map으로 감싸서 Map객체로 변환value

스코프(Scope)는 변수와 함수에 접근할 수 있는 유효 범위를 의미코드가 실행될 때, 자바스크립트 엔진은 이 스코프를 기준으로 특정 변수에 접근할 수 있는지 없는지를 결정한다.JS에서 스코프는 기본적으로 함수가 선언될 때(Lexical Scoping) 결정되지만, 실

https://developer.mozilla.org/ko/docs/Web/API/Window/fetch#body https://developer.mozilla.org/ko/docs/Web/API/FetchAPI/UsingFetch 서버 단에서 대신 API를 호출해주기보다는 클라이언트 단에서 직접 API를 호출할 때 사용된다. 브라우저에서 fetch() ...

Promise 패턴은 비동기 처리(Asynchronous Operation)를 마치 동기 처리(Synchronous Operation)처럼 순차적으로 표현하고 관리하기 위한 디자인 패턴이다.복잡한 콜백 지옥(Callback Hell)을 해결하고 코드의 가독성과 유지보수

아래 코드는 calculator라는 이름의 객체를 만드는 코드이다. 객체는 관련된 데이터와 기능(함수)들을 하나로 묶어놓은 하나의 묶음이라고 할 수 있다. 객체 안에는 키(key): 값(value) 형태의 속성들이 들어간다. 여기서는 add가 키(key) 이고, (a

옵저버 패턴(observer pattern)은 객체의 상태 변화를 관찰하는 관찰자들, 즉 옵저버들의 목록을 객체에 등록하여 상태 변화가 있을 때마다 메서드 등을 통해 객체가 직접 목록의 각 옵저버에게 통지하도록 하는 디자인 패턴이다. 주로 분산 이벤트 핸들링 시스템을

History API는 브라우저의 페이지 이동(새로고침) 없이 URL을 변경하고, 브라우저의 세션 기록(session history)을 조작할 수 있게 해주는 자바스크립트 API이다.이 API는 React, Vue, Angular 등으로 만드는 SPA(Single Pa

Vanilla JS를 사용하여, 사용자가 입력하는 순간 실시간으로 유효성을 검사해주도록 해보자.아이디, 닉네임, 비밀번호의 유효성을 실시간으로 검사한다.유효성 메시지는 필요할 때만 나타나고, 평소에는 레이아웃에 영향을 주지 않는다.폼 전체의 모든 입력이 유효할 때만 회

웹 사이트를 사용하다보면 사용자와의 상호작용하는 부분들이 많이 존재한다.스크롤, 창 크기 조절, 키보드 입력 등 수많은 이벤트가 쉴 새 없이 발생하는데 만약 이벤트가 발생할 때마다 복잡한 연산이나 API 호출과 같은 무거운 작업을 수행한다면 어떻게 될까? 사용자가 검