JavaScript
1.[JavaScript]자바스크립트 실행 방법
HTML 파일 내 직접 JavaScript 코드 작성<script> 태그 사용, HTML 문서의 <head> 또는 <body> 섹션 내 포함<script> 태그 사용, HTML 문서의 <head> 또는 <body> 섹션 내 포함간단한 스
2.[JavaScript]변수와 상수
변할 수 있는 수 const로 선언된 객체의 속성 변경 가능 (상수 권장이지만 실제로는 상수가 아님)이미 할당된 데이터 조작 및 변경 가능 (예: 배열에 push로 값 추가 가능)키워드 (Keywords): 자바스크립트에서 특별한 의미를 가진 예약된 단어 (예: var
3.[JavaScript]데이터 타입 - 자료형
이스케이프 문자위 예제에서 볼 수 있듯이, 이스케이프 문자()를 사용하면 문자열 내에서 따옴표를 문자 그대로 표현 가능. 이는 문자열의 시작과 끝을 나타내는 따옴표와 문자열 내용의 일부인 따옴표를 구분하는 데 도움이 됨템플릿 문자열 (Template Literals)E
4.[JavaScript]연산자
특정한 연산을 하는 자바스크립트 기호수학적인 연산을 수행하는 연산자산술 연산자의 종류:덧셈 (+)뺄셈 (-)곱셈 (\*)나눗셈 (/)나머지 (%)거듭제곱(\*\*)예시:5 + 3 = 810 % 3 = 1숫자를 1 증가하거나 1 감소시킬 때 사용숫자에 직접 사용 불가증가
5.[JavaScript]조건문
프로그래머가 명시한 불린 자료형 조건이 참인지 거짓인지에 따라 달라지는 계산이나 상황을 수행하는 프로그래밍 문법if문은 주어진 조건이 참(true)일 때 특정 코드 블록을 실행. 중괄호 안의 코드가 한 줄이면 중괄호 생략 가능.예시:if-else문은 조건이 참일 때와
6.[JavaScript]반복문
지정한 조건이 참으로 평가되는 동안 지정된 코드 블록을 반복 실행하는 프로그래밍 구문. 자바스크립트에서 while, do...while, for, for...in, for...of와 같은 반복문 제공코드 블록을 먼저 실행한 후 조건 평가하여 반복 여부 결정조건을 먼저
7.[JavaScript]함수
함수 사용 이유높은 재활용성애플리케이션 전역에서 호출 가능코드 중복 감소유지보수 용이성 향상호출예시: 구구단 코드 실행표현식: 값으로 평가 가능한 식네이밍 함수: 변수에 함수 할당하여 생성함함수 선언 시 변수로 let과 const 중 어떤 것을 사용할지에 대한 고려사항
8.[JavaScript]호이스팅과 컨텍스트
호이스팅: 자바스크립트 엔진이 코드 실행 전 변수와 함수의 선언부를 스코프의 최상단으로 끌어올리는 동작. 면접단골자바스크립트는 인터프리터 기반 언어로, 코드를 순차적으로 실행하지만 호이스팅으로 인해 선언부가 먼저 처리됨.변수 호이스팅var: undefined로 초기화됨
9.[JavaScript]클로저
가비지 컬렉션이란? 자바스크립트의 자동 메모리 관리 시스템으로, 사용되지 않는 객체를 감지해 메모리에서 해제하는 과정을 말한다. 실행 컨텍스트가 콜 스택에서 제거될 때 관련 변수들이 가비지 컬렉션의 대상이 된다.장점: 개발자의 직접적인 메모리 관리 불필요클로저: 내부
10.[JavaScript] 객체
객체: 키와 값으로 구성된 속성들의 집합키(key)와 값(value)을 합쳐서 프로퍼티(property, 속성)라고 함중괄호 선언객체의 속성 값으로 다양한 데이터 타입 포함 가능. 문자열, 숫자, 불리언, 배열, 다른 객체 등 모두 가능.예시객체 리터럴 사용 (가장 일
11.[JavaScript] this
this란? 현재 코드가 실행되는 시점에서 그 함수를 호출한 객체를 가리키는 키워드. "호출한 주체"에 따라 this의 값이 달라질 수 있음전역 스코프에서 선언된 함수는 window 객체의 메서드로 등록예시:객체의 메서드 내에서 this를 사용하면 해당 객체의 속성에
12.[JavaScript] 즉시 실행 함수(IIFE)
즉시 실행 함수(IIFE)는 선언과 동시에 호출되는 함수. 이 패턴은 전역 범위 오염 방지와 함께 필요 작업 수행. 호출 후 즉시 콜스택에서 제거되어 코드 충돌 위험 감소.프레임워크와 모듈 시스템의 발전으로 IIFE 사용 감소함수 선언과 동시에 호출하는 구조전역 범위
13.[JavaScript] 생성자함수
생성자 함수는 새로운 객체를 생성할 때 사용되는 특수한 함수.이 함수는 new 키워드와 함께 호출되며, 호출 시 새로운 인스턴스 반환.생성자 함수의 이름은 대문자로 시작하는 것이 관례. 대문자로 시작하는 이유가독성 향상: 대문자로 시작하는 함수명을 보면 개발자들은 즉시
14.[JavaScript] 메서드 체이닝
메서드 체이닝이란? 하나의 객체 메서드를 연결해서 연속적으로 호출하는 기법.각 메서드가 객체 자신을 반환하여 연속 호출 가능.연속 호출: 객체 반환으로 즉시 다음 메서드 호출가독성 향상: 여러 작업을 한 줄로 연결, 간결성 증대유연성: 필요한 메서드만 선택적 연결 가능
15.[JavaScript] 프로토타입
프로토타입: 자바스크립트 함수의 특별 객체로, 생성자 함수로 만든 객체들이 공유하는 공통 공간. 함수와 1:1 매칭되며, 해당 생성자의 모든 인스턴스가 접근 가능프로토타입의 역할: 프로토타입 객체에 공통적으로 사용될 속성이나 메서드를 정의하여, 메모리 낭비 감소프로토타
16.[JavaScript] 래퍼 객체
자바스크립트는 원시 값(Primitive Value)을 객체처럼 다룰 수 있도록 래퍼 객체를 자동으로 생성함. 이를 통해 기본 타입의 값(예: 숫자, 문자열, 불리언 등)에 대해 메서드나 프로퍼티를 호출 가능래퍼 객체란? 자바스크립트가 기본 타입 값에 대해 메서드나 프
17.[JavaScript] class 기본 개념
자바스크립트는 객체지향 언어이나 전통적 객체지향과 차이가 존재함. Java 등의 클래스 기반 객체지향과 달리 프로토타입 기반 객체지향 사용.⇒ 이를 보완하기 위해 ES6에서 클래스 문법 도입클래스 기반 객체지향: Java, C++ 등이 사용. 일반적인 객체지향 언어로
18.[JavaScript] 정규식
정규식(Regular Expressions)은 텍스트 데이터에서 특정 패턴을 찾거나 수정하는 데 사용됨. 자바스크립트에서는 정규식을 통해 문자 검색, 대체, 유효성 검사 등을 쉽게 수행 가능패턴: 찾고자 하는 문자열이나 문자 조합플래그: 패턴의 검색 방식을 설정하는 옵
19.[JavaScript] 표준 내장 객체
표준 내장 객체는 자바스크립트 엔진에 내장된 객체로, 언제든지 사용할 수 있는 기본적인 기능 모음. 이 객체들은 복잡한 연산이나 반복되는 작업을 단순화해주며, 대부분의 자바스크립트 프로젝트에서 자주 사용됨예시:배열을 쉽게 다루는 Array 객체문자열 처리를 위한 Str
20.[JavaScript] 문자열 내장 객체
문자열의 길이 반환주어진 인덱스 번호의 문자 반환지정된 문자열이 처음 등장하는 위치의 인덱스 반환. 찾지 못하면 -1 반환지정된 문자열이 마지막으로 나타나는 위치의 인덱스 반환주어진 범위 내의 문자열 반환. start부터 end 전까지 추출, 음수 사용 불가주어진 인덱
21.[JavaScript] 배열 내장 객체
파괴적 메서드: 배열을 직접 변경함 ⇒ 원본 손상에 주의 비파괴적 메서드: 원본 배열을 변경하지 않고, 새 값을 반환함사용빈도 높음 ⭐️알고리즘 💻배열 끝에 요소 추가, 새로운 배열의 길이 반환배열 마지막 요소 제거, 해당 요소 반환배열의 첫 번째 요소 제거, 제거된
22.[JavaScript] 자바스크립트 역사
팀 버너스리의 WWW(World Wide Web) 개발, 당시 미공개일리노이 대학교 학생들의 졸업 프로젝트로 모자이크 브라우저 개발, 현대적 웹 브라우저의 시초모자이크의 창업자들이 넷스케이프 커뮤니케이션스 설립, 넷스케이프 내비게이터 브라우저 출시넷스케이프, 브렌던 아
23.[JavaScript] Math 객체
JavaScript의 Math 객체는 수학 계산을 위한 내장 객체로, 다양한 상수와 메서드 제공. 정적(static) 객체로, 인스턴스 생성 없이 바로 사용 가능. Math.PI나 Math.abs()와 같이 모든 속성과 메서드는 정적으로 직접 호출됨.내장 객체: Mat
24.[JavaScript] Date 객체
JavaScript의 Date 객체는 날짜와 시간 데이터를 다루는 내장 객체. 다양한 메서드와 속성을 제공하여 날짜 처리를 도움. 실무에서는 주로 날짜 라이브러리를 사용하지만, 이를 잘 활용하려면 Date 객체의 기본을 이해해야 함.Date 객체를 인스턴스로 생성하는
25.[JavaScript] 동기 비동기, 콜백 함수
자바스크립트는 싱글 스레드 언어로, 작업을 순차적(동기적)으로 처리함. 이는 긴 작업 시 다른 작업들이 대기해야 하는 문제를 야기함. 하지만 웹 API를 통한 비동기 처리로 이 문제를 해결 중자바스크립트 동기: 한 작업이 완료될 때까지 다음 작업을 기다리게 하는 방식자
26.[JavaScript] BOM
웹 브라우저의 주요 구성 요소는 필수적인 객체들로 구성. 이들은 브라우저의 기능을 활용하는 데 중요한 역할. 구성 요소들은 크게 BOM과 DOM으로 구분. 둘 다 window 객체와 밀접하게 연관BOM은 브라우저 환경에서 제공하는 여러 객체를 포함하여 웹 페이지와 브라
27.[JavaScript] DOM
DOM(Document Object Model): HTML 문서를 객체 기반의 트리 구조로 표현. JavaScript로 HTML 요소를 동적으로 조작 가능🌳 DOM 구조 시각화 도구DOM Visualizer: 웹 페이지의 DOM 구조를 시각적으로 표현Live DOM
28.[JavaScript] 이벤트
자바스크립트 이벤트는 브라우저에서 발생하는 사용자 상호작용을 의미웹 애플리케이션과 사용자 간 인터랙션의 핵심클릭, 더블 클릭, 키보드 입력, 스크롤 등의 상호작용 발생 시 이벤트가 트리거되어 웹 페이지가 동적으로 반응이벤트 등록의 기본 문법이벤트 타겟 (Event Ta
29.[JavaScript] SPA
SPA(Single Page Application): 초기 로딩 후 페이지 전체를 새로고침하지 않고 동적으로 콘텐츠를 갱신하는 웹 애플리케이션장점: 빠른 응답성과 효율적인 네트워크 사용으로 매끄러운 사용자 경험 제공SPA는 필요한 데이터만 받아와 화면을 갱신하며, 주로
30.[JavaScript] 비구조화 할당, 전개 연산자, 깊은 복사
배열의 비구조화 할당은 배열의 요소를 개별 변수로 쉽게 추출하거나, 나머지 요소를 새로운 배열로 저장할 수 있도록 도와줍니다.객체의 비구조화 할당은 객체 속성을 개별 변수로 추출할 수 있게 해줍니다. 변수 이름 변경(맵핑)이나 기본값 설정도 가능합니다.중첩된 객체의 속