js

"Ctrl + C" 단축키와 같은 기능 또는 블로그에 새로 추가한 "코드 복사" 기능을 웹 상에서 구현하기 위해서는 특정 텍스트를 클립보드에 추가시켜줘야 합니다.코드클립보드와 상호작용하는데 가장 많이 사용되는 document.execCommand() 방법을 사용하여 쉽

자바스크립트는 프로토타입 기반 객체지향 프로그래밍 언어다.다른 객체지향 프로그래밍 언어는 클래스를 기반으로 동작하지만 자바스크립트는 프로토타입을 기반으로 동작한다. 프로토타입은 객체지향 프로그래밍의 중요한 개념 중 하나인 상속과 밀접한 관련이 있다.다음과 같이 Anim

jQuery의 each() 메서드는 배열, Map, 그리고 객체를 매개변수로 받아, 마치 반복문처럼 그 요소들을 검사하고 반복할수 있도록 하는 함수입니다.each() 메서드는 크게 다음의 세가지 방법으로 사용할 수 있습니다.이때 callback은 콜백 함수를 의미합니다

JavaScript, API, Markup를 근간으로 하는 JAM stack이 모던 웹 개발 트렌드입니다. 이에 따라, 예전처럼 서버 단에서 대신 API를 호출해주기 보다는 클라이언트 단에서 직접 API를 호출하는 경우가 많아지고 있습니다. 원격 API를 간편하게 호

익숙한 변수 설정 const 태그를 입력하다가 문득 차이점이 궁금해져 포스팅을 해 보았습니다. ES2015(ES6)에서 반짝이는 새로운 기능들이 많이 등장했다. 2020년이 된 지금, 많은 퍼블리셔 뿐만 아니라 JavaScript 개발자들이 그 기능들을 사용하기 시작했

자바스크립트는 웹 페이지에 생동감을 불어넣기 위해 만들어진 프로그래밍 언어이다.특별한 준비나 컴파일 없이 보통의 문자 형태로 작성할 수 있다.Java랑 무슨 관련이 있을까Java랑은 아무 관련이 없다!처음의 이름은 Mocha, LiveScript였다.이름을 바꿀 당시,

data type은 값의 종류를 말하며 자바 스크립트는 7개의 데이터 타입을 제공한다.숫자 타입 (number)자바 스크립트의 경우 하나의 숫자 타입만 존재하고 모든 수를 실수로 처리한다.숫자 타입은 추가적으로 세 가지 특별한 값도 표현할 수 있다.Infinity :

값을 비교해 결과 값을 boolean 타입인 true나 false로 반환한다.if문이나 for문 같은 제어문의 조건식에서 주로 사용하게 된다.좌항과 우항의 비교 연산자를 비교한 다음, 결과를 boolean 타입으로 반환한다.동등 연산자와 일치 연산자동등 연산자와 일치

연산자미션 링크문제 1: "123" == 123 =?정답은 true ✅ 입니다.이유:== (느슨한 비교)는 타입을 자동으로 변환한 뒤 비교함"123" → 숫자 123 으로 변환123 == 123 → 같으므로 true문제 2: "123" === 123 =정답은 false

제어문 미션 링크https://codesandbox.io/p/sandbox/5vxpnj문제 1. if 사용자명 미입력 체크username이 비어있을 때만 경고 문구를 출력하도록 if의 조건식을 채우세요.const username = "";if (빈칸 답) {c

목차if문조건 표현식의 결과 값을 boolean 타입으로 변환 후 참과 거짓을 판단한다.기본 문법if 안에 있는 조건문이 참인 경우 해당하는 if문 혹은 else if문을 실행 한다.조건문에 모두 해당하지 않으면 else에 있는 코드가 실행 된다.else if에는 갯수

💡 추가 팁var는 오래된 코드에서 많이 보이지만, 요즘은 let과 const를 주로 사용.변경되지 않는 값은 const, 변경 가능하면 let을 사용하는 게 모던 자바스크립트 스타일.

배열은 여러 개의 값을 순차적으로 나열한 자료 구조이다.요소의 자료형은 제약이 없다.array 타입은 별도로 없으며 배열은 object(객체) 타입에 해당한다.배열 리터털배열 생성자 함수전달 된 인수가 없을 경우 빈 배열을 생성한다.전달 된 인수가 1개이고 숫자인 경우

위 예제의 str은 객체가 아님에도 length를 사용할 수 있다.자바스크립트가 new String(str)을 호출한 것처럼 문자열을 객체로 자동으로 변환해 준다.원시 타입의 property에 접근하려고 할 때 생성되는 임시 객체를 wrapper object라고 한다.

함수 선언식(function declaration)함수 선언문에서는 함수명을 생략할 수 없다.매개 변수는 없을 수도 있다.호이스팅이 된다 .함수 표현식(function expression)호이스팅이 되지 않는다.변수 선언 시에만 호이스팅이 되고 함수 할당은 실행 시점에

목차키와 값의 쌍으로 이루어진 데이터 집합을 저장하는 자료형이다.데이터를 구조화하고 저장하는 데 사용하는 기본 단위이다.객체 리터럴(object-literal)을 사용한 객체 생성중괄호 {}를 사용해 객체를 생성하는 것이다.객체를 직접 정의하고 초기화 할 때 유용하다.

목차ES6에 도입된 문법이다.객체를 생성하기 위한 템플릿이다.클래스는 내부적으로 생성자 함수를 기반으로 동작한다.동일한 종류의 객체를 여러 개 생성 해야 하는 경우에 클래스 문법을 통해 객체를 재 생성 할 수 있다.클래스를 통해 생성된 객체를 인스턴스(instance)

함수 안에서 자동으로 생성되는 유사 배열 객체(array-like object).호출 시 전달된 모든 인자들을 담고 있음.배열처럼 인덱스로 접근 가능 (arguments\[0], arguments\[1] …)하지만 배열 메서드(map, forEach 등)는 직접 쓸 수

현재 실행 중인 코드(함수)들이 쌓이는 곳자바스크립트는 단일 스레드(single thread) 언어라,한 번에 하나의 일(함수)만 실행할 수 있어요.📦 콜 스택은 “지금 당장 실행할 함수들” 이 쌓이는 구조예요.새 함수가 호출되면 → 스택에 push함수가 끝나면 →

setTimeout() : 비동기 함수, 지정한 시간이 지난 후 콜백 함수 실행.콜백 함수(callback function) : 다른 함수에 인자로 전달되어, 특정 시점에 실행되는 함수.fetchData(resolve) : 데이터를 요청한 뒤, 그 결과를 전달받은 콜백

fetchData()는 비동기 데이터 요청 함수 (setTimeout으로 시뮬레이션된 요청)비동기 작업을 순서대로(이름 → 나이) 실행하려면콜백 함수 안에서 다른 비동기 함수를 또 호출해야 함이처럼 콜백 안에 콜백이 중첩되는 구조를 → “콜백 지옥(callback he

좋아요 😎 이 코드는 실제 HTTP 요청을 Promise와 함께 사용해서 데이터를 받아오는 예제야.하나씩 차근차근 해석해줄게.버튼 클릭 시 게시글 데이터를 요청하고<span id="post-count"> 안에 게시글 총 수를 표시하는 구조.버튼 클릭 → fetc

버튼 클릭 시 요청 실행<span id="post-title"> 안에 1번 게시글 제목을 표시Fetch API를 사용하여 URL에 GET 요청fetch()는 Promise 객체를 반환즉, 비동기 요청 → 성공(resolve) / 실패(reject) 처리 가능fet

Fetch API + async/await를 사용해서 HTTP 요청을 하고 데이터를 화면에 출력하는 예제버튼 클릭 시 1번 게시글 내용을 가져와서 <span> 안에 출력버튼 클릭 시 fetchDataByAsyncAwait() 함수를 호출async 붙이면 함수가