javascript

프론트엔드 개발 JavaScript란? : JavaScript는 웹개발 스크립트 언어 중 가장 널리 쓰이는 객체지향 언어(OOL : Object Oriented Language)이다. > HTML, CSS, JS를 사용해 데이터를 그래픽 사용자 인터페이스(GUI)로

자바스크립트로 무엇을 할 수 있을까? 웹 사이트를 동적으로 만들 수 있다. 웹 사이트를 건물에 비유하면 HTML은 골격, CSS는 외부내부인테리어 즉 눈에 보이는 외관만 담당한다. 웹 사이트에서 슬라이드, 메뉴처럼 마우스 포인터에 따라 움직임을 주기 위해서 자바스

표기법 익히기 👉 dash-case(kebab-case) ex) the-quick-brown-fox-jumps-over-the-lazy-dog 👉 snake_case ex) thequickbrownfoxjumpsoverthelazydog 👉 camelCa

👉 자바스크립트 기본형식 선언문은 자바스크립트 코드를 작성할 영역을 선언하는 것이라고 이해하면 된다. ~ 스크립트 영역 태그 영역 또는 태그 영역에 선언 >head안에 삽입되는 경우 무거운 스크립트가 실행될 때 브라우저 화면 노출이 지연될 수 있다.

자료형이란 변수의 유형으로 컴퓨터가 처리하는 자료의 형태변수(variables)는 변하는 데이터(값)을 저장할 수 있는 메모리 공간이다.변수에는 데이터가 오직 한 개만 저장됩니다. 새로운 데이터가 들어오면 기존에 있던 데이터는 메모리 공간에서 지워지게 된다.변수명에는

배열은 특별한 종류의 변수이다. 하나의 변수에 여러 값의 목록을 저장할 수 있는 유형으로 배열을 가져 올 때는 인덱스번호 0부터 시작한다. 배열을 만들 떄는 대괄호를 사용하고 값은 쉼표로 구분한다.rps = "가위","바위","보"라고 저장된 배열에서 "바위"를 가져오

👉 표현식(expression) 하나의 값으로 평가될 수 있는 문장이다. 자바스크립트에는 크게 두 가지 종류의 표현식이 존재한다. 변수의 값을 대입하는 표현식 하나의 값을 리턴하기 위해 두 개 혹은 그 이상의 값을 사용하는 표현식 👉 연산자 개발자가 하나

객체를 흔히 "복합자료형"이라고도 부른다. 그 이유는 숫자, 문자열 등 여러가지 자료형이 포함되기 때문이다.현실 세계에서 인지하는 물체에 대한 모델을 만들기 위해 변수와 함수를 그룹화 한 것을 말한다.객체와 함수는 객체 내에서 새로운 이름으로 불린다.자바스크립트는 객체

어떤 특정 작업을 수행하기 위해 필요한 일련의 구문들을 그룹화하기 위한 개념이다. 만일 스크립트의 다른 부분에서 동일한 작업을 반복적으로 수행해야 한다면 함수를 재 사용할 수 있다.함수 내의 구문들은 페이지가 로드될 때마다 실행되지 않기 때문에 작업을완료하는 데 필요한

👍 제어문이란? 프로그램에서 소스를 실행하는 순서는 처리한 결과값에 따라 달라지기도 하고 특정 부분의 소스를 건너뛰고 실행하기도 하는데 이렇게 실행순서를 결정하는 명령문을 '제어문'이라고 한다. > 조건을 만족하는지 여부에 따라 코드를 제어할 수 있는 조건문 변수

string 전역 객체는 문자열(문자의 나열)의 생성자이다.문자 String은 따옴표를 사용한다.템플릿 리터럴(Literal)은 백틱을 사용하며, ${} 안에 데이터를 보간(Interpolation)한다.템플릿 리터럴(Literal) : 리터럴 중에서 데이터를 중간에

array 배열 데이터는 순서가 있는 여러 데이터의 집합이다. 배열에 포함된 각 데이터는 아이템(Item)혹은 요소(Element)라고 부른다.따라하기!codepensjinwon/embed/qEWZWMq?default-tab=html%2CresultJavascript

불린 boolean 은 true와 false 두 가지 값인 참/거짓의 논리 데이터이다.null 데이터는 존재하지 않는(nothing), 비어 있는(empty), 알 수 없는(unknown) 값을 명시적으로 나타낸다.따라하기!codepensjinwon/embed/OPLM

변수(Variable)란, 데이터(값)의 이름을 지정한 것으로 이름이 있으면, 그 이름으로 언제든지 데이터를 재사용 할 수 있다.따라하기!codepensjinwon/embed/ByBKLKj?default-tab=html%2Cresultconst 선언은 블록 범위의 상수

typeof 연산자는 피연산자의 평가 전 자료형을 나타내는 문자열을 반환한다.

함수(function)란, 어떤 작업을 수행하기 위해 필요한 여러 코드의 집합으로, 코드를 추상화하고 재사용성을 확보한다. 이 함수를 자바스크립트에서는 하나의 데이터 종류로 취급한다.따라하기!codepensjinwon/embed/EaYKyGo?default-tab=ht

if 문은 지정한 조건이 참인 경우 명령문(statement)을 실행한다. 조건이 거짓인 경우 또 다른 명령문이 실행 될 수 있다.따라하기!codepensjinwon/embed/qEWZqpZ?default-tab=html%2Cresultswitch 문은 표현식을 평가하

object 객체 데이터는 순서가 없는 Key(키)와 Value(값)의 쌍으로 이루어진 데이터 집합이다.객체에 포함된 각 데이터를 속성(Property)라고 부르고, 그 데이터가 함수인 경우에는, 메소드(method)라고 부른다.따라하기!codepensjinwon/em

산술 연산자는 사칙연산을 다루는 기본적이면서도 가장 많이 사용되는 연산자이다.산술 연산자는 모두 두 개의 피연산자를 가지는 이항 연산자이며, 피연산자들의 결합 방향은 왼쪽에서 오른쪽이다.할당(=) 연산자는 변수에 값을 대입하는 데 사용된다. 할당 연산은 할당된 값으로

따라하기!codepensjinwon/embed/wBwGzoW?default-tab=html%2Cresult

데이터가 상황에 따라 적절한 데이터 타입(자료형)으로 변환되는 것을 말한다.따라하기!codepensjinwon/embed/RNbaGRX?default-tab=html%2Cresult

배열의 길이(숫자)를 반환한다.따라하기!codepensjinwon/embed/bNbpvQG?default-tab=html%2Cresult배열을 인덱싱하며, 음수를 사용하면 뒤에서부터 인덱싱한다.따라하기!codepensjinwon/embed/pvzyLQb?default-

new Date()를 통해 반환된 인스턴스를 타임스탬프(Timestamp)라고 한다.new라는 키워드와 함께 호출하는 함수(클리스)를 생성자 함수라고 한다.따라하기!codepensjinwon/embed/pvzyLPv?default-tab=html%2Cresult.get

JSON(JavaScript Object Notaion) 은 데이터 전달을 위한 표준 데이터 포맷이다.문자, 숫자, 불린, Null, 객체, 배열만 사용문자는 큰 따옴표만 사용후행 쉼표 사용 불가.json 확장자 파일 사용 가능json으로 같은 객페 데이터를 만들 때

주어진 숫자의 절댓값을 반환한다.따라하기!codepensjinwon/embed/ByBKrLv?default-tab=html%2Cresult.ceil() 주어진 숫자를 올림해 정수를 반환한다..floor() 주어진 숫자를 내림해 정수를 반환한다..round() 주어진 숫

숫자에서 지정된 문자로 반환한다.따라하기!codepensjinwon/embed/xbKVYeO?default-tab=html%2Cresult숫자에서 현지 언어형식으로 바꾼 새로운 문자를 반환한다. 목적에 따라 숫자데이터로 표기할지 문자데이터로 표기할지 선택 가능따라하기!

object.assign(대상, 출처1, 출처2, ...) 하나 이상의 출처.하나 이상의 출처 객체(source) 로부터 대상 객체(target) 으로 속성을 복사하고 대상 객체를 반환한다.따라하기!codepensjinwon/embed/OPLNEvQ?default-ta

문자의 길이(숫자)를 반환한다.따라하기!codepensjinwon/embed/GgKZvNR?default-tab=html%2Cresult문자에서 특정 문자가 포함되어 있는지 확인한다.따라하기!codepensjinwon/embed/dPbMzNL?default-tab=ht

DOM(Document Object Model) 이란, HTML 문서를 객체로 표현한 것으로 JS 에서 HTML 을 제어할 수 있게 해준다.요소, 텍스트, 주석 등의 각 구조를 의미한다.노드의 하위 객체로 요소를 의미한다.따라하기!codepensjinwon/embed/

대상에서 청취(Listen)할 이벤트 종류와 이벤트가 발생했을 때 호출할 콜백(Handler)을 등록한다.따라하기!codepensjinwon/embed/KwPzOym?default-tab=js%2Cresult대상에 등록했던 이벤트 핸들러를 제거한다.따라하기!codepe

class 선언은 프로토타입 기반 상속을 사용하여, 주어진 이름의 새로운 클래스를 만든다.따라하기!codepensjinwon/embed/RNbRyyX?default-tab=js%2Cresult클래스의 메소드 부분에 get 이라는 키워드가 붙어 속성처럼 사용하는 것이 가

배열(배열 구조 분해 할당)이나 객체(객체 구조 분해 할당)의 구조에 맞게 개별 변수에 값을 할당하는 방법으로, 필요한 값만 추출하여 변수에 할당할 수 있다.

작성할 수 있는 자바스크립트의 코드를 별도의 파일로 구분해 그 파일에서 데이터를 내보내거나 가지고 와서 사용하는 것js파일 최상단에 위치해야 한다.이름이 필요하지 않는다.모듈에서 한 번만 사용할 수 있다.이름이 필수이다.모듈에서 여러번 사용할 수 있다.

?.대괄호 혹은 점 표기법의 대상이 null 혹은 undefined 인 경우, 에러 대신 undefined를 반환한다.자바스크립트는 에러가 발생하면 에러가 발생한 뒤 코드가 모두 실행되지 않는데, ?. 선택적 체이닝을 활용하면 에러를 undefined(false) 로

하나의 작업이 끝나기 전에는 다음 작업이 시작되지 않는다.특정 작업이 끝나기 전에 다음 작업이 시작될 수 있다.따라하기!codepensjinwon/embed/pvzEyyp?default-tab=js%2Cresult특정한 비동기 함수를 호출할 때 콜백함수를 전달하면서 어

자바스크립트는 저수준의 오래 걸릴 수 있는 일(Timer, Network 등)은 Web API에게 위임하고, 고수준의 작업은 자바스크립트 엔진(싱글 스레드)에서 처리하는 방식으로 빠른 속도와 높은 확장성을 유지한다.FIFO(First In First Out): 선입선출

가비지 컬렉션(Garbage Collection)이란, 더 이상 사용되지 않는 메모리를 해제하는 프로세스로 자바스크립트 엔진이 자동으로 처리한다.더 이상 필요치 않은 데이터가 해제되지 못해 메모리를 계속 차지되는 것을 말한다.불필요한 데이터 참조를 피하세요 !불필요한

.call(this, 인수1, 인수2...) - 대상 함수를 주어진 객체(this)의 메소드로 실행한다..apply(this, \[인수1, 인수2, ...]) - 대상 함수를 주어진 객체(this)의 메소드로 실행한다..bind(this) - 대상 함수를 주어진 객체(

생성된 데이터가 메모리에서 변경되지 않는 것을 의미한다.원시형(문자, 숫자, 불린, null, undefined)은 불변성을 가지고있다.생성된 데이터가 메모리에서 변경될 수 있음을 의미한다.참조형(배열, 객체, 함수)은 가변성을 가지고 있다.

함수가 자기 자신을 호출하는 것을 말한다.

this 키워드는 일반 함수와 화살표 함수에 따라 다르게 정의된다. 일반 함수는 호출 위치에서 this가 정의되며, 화살표 함수는 선언 위치(렉시컬 스코프)에서 this가 정의된다.간단한 예시(일반함수)간단한 예시(화살표함수)간단한 예시(그 외)

\_.throttle 정해진 시간 간격으로 함수를 실행하도록 제한한다.\_.debounce 정해진 시간 동안 함수가 실행되지 않으면, 함수를 실행한다.

렉시컬 스코프(Lexical Scope)는 정적 스코프(Static Scope)라고도 하며, 함수를 선언한 위치에서 유효하게 접근 가능한 유효 범위를 말한다.렉시컬 스코프라는 것이 this 라는 키워드와 직접적인 관련이 있는 것은 아니지만 이해를 돕기 위해 사용렉시컬

참조형의 최상위 레벨만 복사하는 것을 말한다.참조형의 모든 레벨을 복사하는 것을 말한다.

this 라는 키워드는 여러 상황에서 다른 것을 참조하게 되는데 메소드에서는 this가 해당 객체를 참조하고, 함수에서는 this가 window 객체를 참조하게 된다. constructor 함수에서는 빈 객체를 참조한다.메소드에서 this를 사용했을 때에는 this는

자바스크립트는 Non-blocking + Async 방식을 사용한다.sync어떤 식이든 B함수 작업이 끝난 것을 확인 후, 작업 마무리를 A함수에서 하는 것B함수 쪽의 처리결과를 A쪽에서 계속 신경쓰는 형태\\asyncA는 B함수 호출 까지만을 담당했을 뿐 처리 + 마

객체를 만들기 위한 설계도(=일반적 정의와 동일)프로토타입의 성질을 더 쉽게 사용하기 위한 "문법적 부가기능"Prototype과 달리 constructor라는 함수가 별개로 있다.클래스 선언은 호이스팅 되지 않는다.좋은 클래스란?높은 응집도와 낮은 결합도를 가진 클래스

유저가 웹에서 html element에 가하는 각종 액션에 의해 발생되는 것event 발생은 html 요소이지만 이에 대한 구체적 로직은 javascript로 구현onchange : 요소의 value가 변경되었을때onclick : 요소에 커서를 두고 클릭했을때onmou

코드의 간결함을 유지하고 재사용성을 향상시키기 위한 프로그래밍 방법론프로그램을 명령어의 나열이 아닌 독립된 개념들의 상호작용으로 바라보는 것class와 object개념을 활용class로 object의 상태와 기능을 기술할 수 있고, 이를 이용하여 object를 생산할

Infinite Scroll(무한 스크롤)은 사용자가 페이지 하단까지 스크롤할 때 추가 데이터를 비동기로 불러와 계속해서 콘텐츠가 로드되는 UX 패턴이다. 이 방식은 SNS나 뉴스 앱과 같은 서비스에서 많이 사용된다. 페이지 리로드 없이 연속적으로 데이터를 가져와 사용

드래그 앤 드롭(Drag and Drop)은 마우스로 요소를 선택(드래그)하여 다른 위치로 이동(드롭)하는 기능이다. html5의 Drag and Drop API또는 마우스 이벤트(mousedown, mousemove, mouseup)을 활용해 구현할 수 있다.드래그

팝업 내부에서 포커스 가능한 요소들을 찾음<a> (링크)<button> (버튼)<input> (입력 필드)<select> (드롭다운)<textarea> (텍스트 입력)\[tabindex]:not(\[tabindex="-1"]) → tabind