JavaScript

자바스크립트 데이터의 종류에는 1. 원시형(기본형)과 2. 참조형이 있는데, 대표적으로 원시형에는 문자 데이터, 숫자, boolean, null, undefined, 심볼, BigInt 가 있고, 참조형에는 배열 데이터, 객체 데이터, 함수 등이 있습니다. 📌 문자

모던 자바스크립트 Deep Dive 책에 나오는 4장 변수 내용을 간략하게 요약한 내용입니다 :)컴퓨터는 연산과 기억을 수행하는 부품이 나눠져 있는데, CPU를 통해 연산하고, 메모리를 사용해 데이터를 기억합니다.메모리는 데이터를 저장할 수 있는 메모리 셀의 집합체로

개념을 이해한다는 것은 용어를 정확하게 이해하고 설명할 수 있다는 것 입니다. 용어에 대한 정확한 이해는 개념을 정립하는데 빠질 수 없는 필수 요소로 정확한 커뮤니케이션을 가능하게 합니다. 이번 5장 요약 글에서는 앞으로 자주 사용할 용어의 의미를 살펴보겠습니다.값은

데이터 타입은 값의 종류를 말합니다. 자바스크립트는 원시 타입과 객체 타입의 데이터 타입을 제공합니다. 원시 타입에는 숫자, 문자열, 불리언, undefined, null, 심벌(symbol) 타입이 있고, 객체 타입에는 객체,함수, 배열 등이 있습니다. 원시 타입

연산자는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행해 하나의 값을 만듭니다. 이때 연산의 대상을 피연산자라 합니다. 연산자는 값으로 평가된 피연산자를 연산해 새로운 값을 만듭니다. 📚 산술 연산자 산술 연산자는 수학적

제어문은 조건에 따라 코드 블록을 실행(조건문)하거나 반복 실행(반복문)할 때 사용합니다. 📚 블록문 블록문은 0개 이상의 문을 중괄호로 묶은 것으로, 코드 블록 또는 블록이라고 부르기도 합니다. 자바스크립트는 블록문을 하나의 실행 단위로 취급합니다. 일반적으로

📚 타입 변환이란? 자바스크립트의 모든 값은 타입이 있습니다. 개발자가 의도적으로 값의 타입을 변환하는 것을 명시적 타입 변환 또는 타입 캐스팅이라 합니다. 개발자의 의도와 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 변환되는 것을

자바스크립트는 객체 기반의 프로그래밍 언어이며, 원시 값을 제외한 자바스크립트를 구성하는 거의 모든 것이 객체입니다.객체 타입은 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조입니다.원시 값은 변경 불가능한 값이지만 객체 타입의 값은 변경 가능한 값 입니다.

원시 타입과 객체 타입은 크게 세 가지 측면에서 다릅니다. 원시 타입의 값은 변경 불가능한 값, 객체는 변경 가능한 값입니다. 원시 값을 변수에 할당하면 변수에는 실제 값이 저장되고 객체 값을 변수에 할당하면 참조 값이 저장됩니다. 원시 값을 갖는 변수를 다른 변수에

함수는 자바스크립트에서 가장 중요한 핵심 개념입니다. 자바스크립트를 정확히 이해하고 사용하기 위해 피해갈 수 없는 핵심 중의 핵심이라고 할 수 있습니다. 📚 함수란? 프로그래밍 언어의 함수도 수학의 함수와 같은 개념입니다. 함수 f(x, y) = x+y 를 자바스

📚 스코프란? 스코프(유효범위)는 자바스크립트를 포함한 모든 프로그래밍 언어의 기본적이며 중요한 개념입니다. var 키워드로 선언한 변수와 let 또는 const 키워드로 선언한 변수의 스코프토 다르게 동작합니다. 스코프는 변수 그리고 함수와 깊은 관련이 있습니다.

전역 변수의 무분별한 사용은 위험합니다. 따라서 전역 변수를 반드시 사용해야 할 이유를 찾지 못한다면 지역 변수를 사용해야 합니다. 📚 변수의 생명 주기 ✏️ 지역 변수의 생명 주기 변수는 자신이 선언된 위치에서 생성되고 소멸합니다. 전역 변수의 생명 주기는 애

📚 var 키워드로 선언한 변수의 문제점 ✏️ 변수 중복 선언 허용 var 키워드로 선언한 변수는 중복 선언이 가능합니다.

📚 strict mode란? strict mode는 자바스크립트 언어의 문법을 좀 더 엄격히 적용하여 오류를 발생시킬 가능성이 높거나 자바스크립트 엔진의 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 명시적인 에러를 발생시킵니다. 이때 ESLint 같은 린트

📚 자바스크립트 객체의 분류 자바스크립트 객체는 크게 3개의 객체로 분류할 수 있습니다. 표준 빌트인 객체: ECMAScript 사양에 정의된 객체를 말하며, 애플리케이션 전역의 공통 기능을 제공합니다. 자바스크립트 실행 환경(브라우저 또는 Node.js환경)과

자바스크립트에서 날짜와 시간 정보를 한국 시간 타입으로 라이브러리의 도움 없이 바꿔줄 수 있는 방법을 정리한 내용입니다. 📚 DateTimeFormat() 생성자 라이브러리 없이 한국 시간 표시법으로 나타내 줄 수있는 이 방법은 Internationalization

📚 this 키워드 객체는 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료구조입니다. 동작을 나타내는 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 합니다

실행 컨텍스트는 자바스크립트의 동작 원리를 담고 있는 핵심 개념입니다. 실행 컨텍스트를 바르게 이해하면 자바스크립트의 여러 동작 방식을 이해할 수 있습니다. 📚 소스코드의 타입 ECMAScript 사양은 소스코드를 4가지 타입으로 구분하고, 실행 컨텍스트를 생성합니

클로저는 '함수와 그 함수가 선언된 렉시컬 환경과의 조합이다.' 라고 정의할 수 있습니다. 클로저는 자바스크립트 고유의 개념이 아닌 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 중요한 특성입니다. 아래의 예제를 통해 클로저 정의의 의미를 조금 더

해당 글은 스타벅스 페이지를 클론 코딩 하면서 필요한 기능들을 정리한 내용입니다. 🍪 css 스타일 초기화 구글에 reset.css cdn 검색 후 jsdelivr 사이트 클릭! 아래에 있는 reset.min.css 파일을 Copy HTML 해준다음 헤드 부분에

페이지 오른쪽에 미니 배너를 만들고, 스크롤시 페이드 효과를 JS로 구현한 내용입니다.아래는 사이드 광고 배너 구현을 위한 html, css 구성 코드입니다.div는 block 태그 요소로, 일반적으로 가로 길이가 최대한으로 늘어나려는 특징을 가지고 있지만 css 속성

https://swiperjs.com 해당 사이트에 접속해보면 최신 버전이 나와있습니다. 현재는 버전 8.4.5까지 업데이트 되어 있는 상태이며, 스타벅스 페이지 클론 코딩할때는 6버전을 사용했습니다. 6버전과 최신 버전 사용법의 가장 큰 차이점은 6버전은 최상위 요

자바스크립트는 프로토타입 기반 객체지향 언어입니다. 클래스 없이도 생성자 함수와 프로토타입을 통해 객체지향 언어의 상속을 구현할 수 있습니다. ES6에서 도입된 클래스는 클래스 기반 객체지향 프로그래밍 언어와 매우 흡사한 새로운 객체 생성 메커니즘을 제시합니다. 클래

유튜브 영상을 넣어주기 위하여 가로와 세로의 비율을 16:9로 설정해 주어야 합니다. 이때 요소의 크기를 16:9로 맞춰주기 위해서 html, css 코드를 다음과 같이 작성해 줄 수 있습니다.

📚 프로퍼티 ✏️ 인스턴스 프로퍼티 인스턴스 프로퍼티는 constructor 내부에서 정의해야 합니다. ✏️ 접근자 프로퍼티 접근자 프로퍼티는 자체적으로는 값([[Value]] 내부 슬롯)을 갖지 않고 다른 데이터 프로퍼티의 값을 읽거나(getter) 저장할 때(

이미지에 마우스 hover 시 앞뒤면이 입체적으로 뒤집히는 3D 효과를 주기위해 css에서 원근 거리를 지정하는 perspective와 y축이 회전하는 transform: rotateY(180deg)를 아래와 같이 작성해줄 수 있습니다.해당 라이브러리는 아래로 스크롤

html에서 사용할 수 있는 특수기호들은 html entities 검색 후 확인해볼 수 있습니다.참고 사이트 - https://tools.w3cub.com/html-entitiesnew Date 생성자 함수를 이용해 현재 년도 또는 날짜를 생성해 줄 수 있습니

📚 함수의 구분 ES6 이전의 모든 함수는 사용 목적에 따라 명확히 구분되지 않았습니다. 즉 일반 함수로서 호출할 수 있는 것은 물론 생성자 함수로서 호출할 수 있습니다. 주의해야할 것은 객체에 바인딩된 함수도 일반 함수 호출, 생성자 함수로서 호출도 문법상 가능

📚 심벌이란? 심벌은 변경 불가능한 원시 타입의 값입니다. 주로 이름의 충돌 위험이 없는 유일한 프로퍼티 키를 만들기 위해 사용합니다. 프로퍼티 키로 사용할 수 있는 값은 빈 문자열을 포함하는 모든 문자열 또는 심벌 값입니다. 📚 심벌 값의 생성 ✏️ Symbol 함수 심벌 값은 Symbol 함수를 호출하여 생성해야 합니다. Symbol 함수에는 ...

이터레이션 프로토콜은 순회 가능한 데이커 컬렉션(자료구조)을 만들기 위해 ECMAScript 사양에 정의하여 미리 약속한 규칙입니다.ES6에서는 순회 가능한 데이터 컬렉션을 이터레이션 프로토콜을 준수하는 이터러블로 통일하여 for...of문, 스프레드 문법, 배열 디스

스프레드 문법(전개 문법) ...은 하나로 뭉쳐있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만듭니다.스프레드 문법을 사용할 수 있는 대상은 for ..of 문으로 순회할 수 있는 이터러블에 한정됩니다.스프레드 문법은 값들의 목록으로 값이 아닙니다. 따라서

디스트럭처링 할당(구조 분해 할당)은 배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용합니다.배열 디스트럭처링 할당의 대상은 이터러블이어야 하며, 할당 기준은 배열의 인덱스입니다. 즉 순서대로 할당됩니다.변수의 개수와 이터러블의 요

알고리즘 스터디를 하면서 반복문을 사용을 자주 사용하게 되었는데, for문만 쓰다 보니 다른 종류의 반복문은 언제 사용하면 좋을까 하는 궁금증이 생겼습니다. 또한 for문 이외의 반복문을 사용할 때 더 효율적으로 해결할 수 있는 방법이 있는 것 같아 정리해 보았습니다.