JavaScript

데이터 타입은 프로그래밍 언어에서 사용할 수 있는 데이터 (숫자, 문자열, 불리언 등)의 종류를 맣합니다.원시 타입(Primitive data type): 원시 타입의 값은 변경 불가능한 값 이며 pass-by-value(값에 의한 전달) 입니다.NumberString

데이터를 저장하고 참조(사용)하는 데이터의 이름var, let, const재사용 가능재사용 불가능특별한 의미를 가지고 있어 변수나 함수 이름 등으로 사용할 수 없는 단어식별자로 사용이 불가능한 JavaScript 예약어 목록(https://developer.m

조건의 결과에 따라 다른 코드 블럭을 실행하는 구문if, else, else if, switchif문은 if (조건) {내용}으로 구성되며 조건이 true면 내용이 실행된다.if문은 중첩시켜서 사용할 수 있습니다.조건을 여러개로 하고 싶으면 else if 문을 사용하여

특정 동작(기능)을 수행하는 일부 코드의 집합(부분)

문서 객체 모델(DOM)은 HTML 또는 XML과 상호작용을 위한 일종의 API이다.브라우저에서는 HTML 요소를 DOM이라는 객체 형태의 모델로 저장한다.DOM API란 자바스크립트로 HTML을 제어할 때 사용하는 여러가지 명령이다.javascript 를 통해 웹 콘

HTML 요소(Element) 모두 검색/찾기찾은 HTML 요소는 유사 배열(Array-like) 데이터로 만들어진다.querySelector와 혼동하지 않도록 한다.찾은 HTML 요소를 반복하여 함수 실행하는 메소드익명 함수를 인수로 추가한다.찾은 HTML 요소에 적

변수에 여러가지 메소드가 체인 형식으로 하나처럼 연결시키는 방법

01.The quick brown fox 문장을 camelCase(낙타 표기법)로 작성하시오.theQuickBrownFox02.let fruits = 'Apple', 'Banana', 'Cherry'; 데이터를 활용하여 'Banana'를 콘솔 출력하시오.console.

1-1.Node.js란?Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임이다.Chrome V8 JavaScript 엔진: JavaScript 문법을 해석하고 실제로 동작시켜줄 수 있는 엔진런타임: 프로그래밍 언어가 동작하는 환경웹 브라우저

Node Version Manager(노드 버전 관리자)Node.js의 여러 버전을 설치하고 사용할 수 있게 하는 도구Node.js 사이트에서 바로 Node.js를 설치해도 되지만 개발 환경에따라 Node.js 버전을 유동적으로 변경시켜줄 수 있는 NVM을 이용해 No

Node Package Manager전 세계의 개발자들이 만든 다양한 기능(패키지, 모듈)들을 관리해주는 도구NPM의 생태계에 있는 패키지를 명령어를 통해 프로젝트 내에 설치하여 활용할 수 있다.기존에는 link와 script 태그로 프로젝트에 연결하여 사용하는 방식이

1-1.사칙 연산1-2.나머지 연산2-1.등호(Equal sign)Equal sign(=)은 '같다'라는 뜻이 아닌 변수에 값을 '할당'한다는 의미이다.4-1.import다른 JS파일에 있는 함수를 가져오기위한 예약어getType.js파일에 있는 함수를 가져와서 get

1-1.사칙 연산1-2.나머지 연산2-1.등호(Equal sign)Equal sign(=)은 '같다'라는 뜻이 아닌 변수에 값을 '할당'한다는 의미이다.

1-1.=== (일치 연산자)1-2.!== (불일치 연산자)2-1.&& (and 연산자)2-2.|| (or 연산자)2-3.! (not 연산자)

01.삼항 연산자 >

1-1.if, else if, elseif: 지정한 조건이 true 경우 명령문을 실행합니다.else if: 위에 있는 if문의 조건이 false이면서 현재 if문이 true인 경우 명령문을 실행합니다.else: 위에 있는 if 조건이false 경우 명령문을 실행합니다

조건의 내용이 어떠한 변수가 특정한 값으로 딱 떨어지거나 else if가 여러 번 반복적으로 사용될 때는 if문보다는 switch문을 사용하는 것이 더 적절하다.

1-1.for (시작조건; 종료조건; 변화조건) {}1-2.활용 예제

1-1.let, const블록 레벨의 유효 범위를 가진다.블록 레벨: 변수가 선언되어져 있는 범위의 중괄호 내의 부분출력하는 변수a가 블록 레밸(유효 범위)안에 있기때문에 정상 출력된다. 출력하는 변수a가 블록 레밸(유효 범위)밖에 있기때문에 ReferenceError

동등 연산자==는 두 개의 피연산자가 동일한지 확인하며 Boolean값을 반환합니다. 동등 연산자는 일치 연산자===와는 다르게 다른 타입의 피연산자들끼리의 비교를 시도합니다.2-1.참과 같은 의미를 지닌 값true, {}, \[], 1, 2, 'false', -12,

이름이 존재한는 함수를 의미한다.arguments 객체는 함수에 전달된 인수에 해당하는 Array 형태의 객체입니다.이름이 존재하지 않는 함수를 의미한다.

( ) => { } vs function ( ) { }일반함수와 달리 일부 내용을 생략하여 축약형으로 함수 최소화 가능숫자, 문자, 배열, 불린, null 데이터 등은 문제 없이 사용 가능중괄호{ }를 사용하는 객체 데이터는 소괄호를 이용하여 사용 가능

mmediately-Invoked Function Expression함수를 만들자마자 바로 실행시킬 수 있는 함수함수 재활용 불가기명 함수즉시실행함수 형식1소괄호로 익명함수를 감싸고 뒤에 소괄호를 열고 닫기! (f)( )즉시실행함수 형식2소괄호로 익명함수를 감싸고 뒷

함수 선언부가 유효범위 최상단으로 끌어올려지는 현상함수의 이름만으로 로직을 대략적으로 유추할 수 있기 때문에 사용된다.함수 선언부보다 함수 실행이 먼저 되더라도 호이스팅을 이용하면 문제없이 출력 가능하다. 함수 할당 표현함수 선언 표현

setTimeout(함수, 시간): 일정 시간 후 함수 실행setInterval(함수, 시간): 시간 간격마다 함수 실행clearTimeout(): 설정된 Timeout 함수를 종료clearInterval(): 설정된 Interval 함수를 종료실습) Hello wor

함수의 인수로 사용되는 함수setTimeout(함수, 시간) 처럼 함수의 매개변수안에 함수가 사용되는 것을 의미한다.특정한 실행 위치를 보장해주는 용도로 주로 활용됩니다.

01.일반함수 예제 02.생성자 함수 예제

일반 (Normal) 함수는 호출 위치에 따라 this 정의화살표(Arrow) 함수는 자신이 선언된 함수 범위에서 this 정의화살표 함수는 콜백 함수 내에서 this가 정의되지 않으면 window 전역 객체로 설정예제1예제2예제3

JavaScript는 prototype 기반의 프로그래밍 언어로 다른 안정적이고 신뢰도가 높은 객체 지향 프로그래밍 언어의 영향을 받아 Class라는 개념을 흉내내서 새로운 문법을 ES6에서 제공합니다.prototype을 이용한 함수 생성ES6 Class를 이용한 cl

JavaScript의 클래스를 통해 이미 정의된 로직을 확장(상속)해서 쉽게 구현 가능이렇게 클래스를 사용하면 미리 만들어져있는 로직을 추가적으로 새로운 기능을 확장이라는 개념을 통해 관리 가능extends: 클래스를 상속하기위한 예약어

String 전역 객체는 문자열의 생성자 함수입니다.주어진 값과 일치하는 첫 번째 인덱스를 반환합니다. 일치하는 값이 없으면 -1을 반환합니다.length 속성은 UTF-16 코드 유닛을 기준으로 문자열의 길이를 나타냅니다.slice(); 메소드는 문자열의 일부를 추출

수학적인 상수와 함수를 위한 속성과 메소드를 가진 내장 객체(JavaScript에 내장되어 있는 객체)

0부터 시작하는 배열 데이터 내부에 들어있는 데이터의 위치를 가리키는 숫자인덱싱(indexing): numbers1, fruits2와 같이 배열 데이터 내의 요소에 접근하기 위해 대괄호 안에 숫자를 표기하는 것요소(element), 아이템(item): 배열 데이터 내의

주어진 함수의 필터링을 통과한 모든 요소를 모아 새로운 배열로 반환(원본 데이터 영향 없음)filter() 메소드의 콜백에서 true가 반환된 요소들만 반환find(): 배열 데이터 내에서 조건에 맞는 특정한 요소를 찾는 메소드findIndex(): 배열 데이터 내에서

prototype이 붙어 있지 않은 메서드는 정적 (static) 메서드다.정적 메서드는 {}.assign(); 이거 안됨.prototype이 지원되는 메소드는 \[].reverse() 이거 됨.assign(): 모든 출처 객체가 대상 객체로 복사되어서 대상 객체가 반

비구조화 할당을 의미하며, 배열이나 객체의 데이터 구조를 분해하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식 (비구조화) 배열 또는 객체에서 데이터를 구조 분해해서 내가 원하는 것만 골라서 사용할 수 있는 것을 의미객체 데이터배열 데이터배열 데

배열의 item들을 쉼표로 구분하는 각각의 데이터들로 전개하는 것 (기호: ...)매개 변수에 전개 연산자를 사용하여 나머지의 모든 인수들을 배열 형태로 받아내는 역할

JavaScript에서 사용하는 기본 데이터String, Number, Boolean, undefined, null새로운 원시 데이터를 사용했을 때 해당 원시 데이터가 기존 메모리 주소에 들어있다면 새로운 메모리 주소에 원시 데이터가 할당되는 것이 아니라 기존 메모리

Obejct.assign(); 메소드나 전개 연산자(...)를 사용한 복사JavaScript로 직접적으로 구현하기엔 복잡함따라서, Lodash 패키지를 이용하여 깊은 복사 구현깊은 복사는 재귀(반복 실행)하며 복사를 처리!객체나 배열 데이터를 간단히 복사할 때에는 얕은

js로 확장자로 끝나는 JavaScript 파일에서는 외부에 있는 JavaScript 파일을 가져오기(import)를 할 수 있으며 또한 그 파일을 내보내기(export)를 할 수 있습니다.import라는 키워드를 통해 외부에 있는 JavaScript 파일을 가져올 수

Lodash 문서 참고위 링크 주소로 들어가 documentaion을 클릭하면 Lodash의 여러가지 문법에 대해서 확인할 수 있는 문서가 있습니다.하나의 배열 데이터에서 특정한 속성의 이름으로 데이터의 중복을 제거해주는 메소드\_.uniqBy(A, B):A: 중복 데

데이터를 저장하거나 전송할 때 많이 사용되는 경량의 Data 교환 형식입니다.JSON은 데이터 포맷일 뿐이며 어떠한 통신 방법도 프로그래밍 문법도 아닌 단순히 데이터를 표시하는 표현 방법일 뿐이다.자바스크립트의 객체 표기법과 유사합니다.JSON에서는 Key값에 큰 따음

Storage는 개발자 도구탭에서 Application 창에 있는 Storage에 있습니다.Storage 내에 Local Storage와 Session Stroage에는 웹사이트의 주소나 로컬 호스트의 프로젝트 주소가 하나의 목록으로 명시되어 있습니다. 이를 선택해보면

영화 관련 데이터 정보를 불러올 수 있는 API입니다.영화 요청을 받아올 수 있는 주소입니다.http://www.omdbapi.com/?apikey=\[yourkey]&해당 주소에서 yourkey에 들어가는 key 값은 OMDB 웹사이트에서 API Key메뉴바

정규표현식이란 문자를 검색하고 대체하고 추출하는 방식을 제공하는 다양한 환경에서 사용할 수 있는 기능입니다.정규표현식에 대해 학습하기 전에 VS code를 통해 프로젝트를 시작할 수 있도록 환경을 셋팅합니다.2-1 $ npm init -ynpm으로 패키지 관리를 시작한

문자를 검색하고 대체하고 추출하는 방식을 제공하는 다양한 환경에서 사용할 수 있는 기능입니다. 간단한 문자 검색부터 이메일, 패스워드 검사 등의 복잡한 문자 일치 기능들을 정규식 패턴으로 빠르게 수행할 수 있습니다.정규표현식은 크게 아래와 같은 역할을 수행합니다.1\.

정규식과 일치하는 문자가 있는지 여부를 Boolean 데이터로 반환합니다.문자 데이터에 특정한 패턴이 들어있는지를 확인할 수 있는 메소드입니다.1-1.test 문법1-2.test 사용 예제인수로 정규식을 받으며 일치하는 문자열의 배열(Array) 데이터를 반환합니다.2

플래그(flags)는 정규표현식의 옵션으로 정규식으로 검색하려는 문자 패턴에 추가적인 옵션을 넣어 원하는 문자 검색 결과를 반환하도록 합니다.1.1 플래그 사용 예제백슬래시(\\) 기호를 통해 본래의 기능에서 벗어나 상태가 바뀌는 문자를 말합니다. 이를 통해 정규표현식

정규표현식에는 다양한 패턴(표현)이 있습니다. 패턴의 의미(기능)와 직관적으로 매칭되지 않기 때문에 외우지 않는 이상 의미를 파악할 수 없습니다. 2-1.사용 예제3-1.사용 예제4-1.사용 예제

정규표현식에는 다양한 패턴(표현)이 있습니다. 그 패턴의 의미(기능)와 직관적으로 매칭되지 않기 때문에 외우지 않는 이상 의미를 파악할 수 없습니다.2-1.사용 예제(1)3-1.사용 예제4-1.사용 예제

Swiper.js는 쉽게 슬라이드를 만들수 있게 해놓은 스크립트 입니다.공식 사이트https://swiperjs.com/Swiper.js를 적용하는 방법에는 두 가지가 있습니다.2-1.cdn 방식외부에서 받아와서 사이트에 적용시키는 방법입니다.만약 외부에서 파

GSAP는 GrennSock에서 만든 자바스크립트 애니메이션 라이브러리이다.공식 사이트에서 다운 받거나 CDN, 혹은 npm install gsap로 설치할 수 있다.https://greensock.com/docs/v3/Installationhttps&#x3A

scroll 위치에 맞춰서 애니메이션을 실행시키고 싶은 경우 사용합니다.공식 사이트 혹은 CDN 혹은 npm 등 편한 방법으로 ScrollTrigger.js나 ScrollTrigger.min.js 를 다운로드 합니다.https://greensock.com/do