Javascript 공부자료 (생능북스, 이모저모)

웹 페이지를 만들기 위해 사용되는 프로그래밍 언어컴파일 과정 없이 프로그램 작성 즉시 브라우저에 결과를 시각적으로 표현웹 개발을 위한 프로그래밍 언어웹 페이지 개발을 위한 특화된 언어 + 프로그래밍 언어웹 표준임스크립트 언어프로그램 실행 전 기계어로 변환되는 컴파일 방

명령형과 선언형으로 프로그래밍 방식을 분류명령형 프로그래밍컴퓨터가 수행할 명령을 순차적으로 표현하는 방법how를 강조한 접근법처리되는 과정을 절차적으로 나열하는 절차지향 프로그램, 객체의 상호작용을 표현하는 객체지향 프로그램이 있음선언형 프로그래밍실행할 프로그램을 설명

어떤 기능을 수행하기 위해 설계된 명령어 모음재사용을 위해 사용되는 방법수행할 기능을 정의하는 부분과 이를 사용하는 호출 부분으로 나눌 수 있음매개 변수로 함수 외부로 부터 전달되는 값을 사용하거나 함수의 수행결과 리턴 가능특정 객체와 연관된 명령어의 모음, 객체의 동

값을 저장하는 저장소저장소와 저장소를 가르키는 식별자인 이름으로 구성된 형태var : ES6이전까지 사용let : ES6에서 새롭게 추가됨, 변수를 계속 변경 가능, 블록스코프 내에서만 유효const : ES6에서 새롭게 추가됨, 변수를 한번 정의하면 변경할 수 없음,

블록 스코프의 범위를 갖는 지역 변수선언과 동시에 임의의 값으로 초기화 가능한번 선언하면 재선언 불가재할당은 가능하나 사용하기 전 선언은 돼있어야함블록스코프를 가짐var를 사용하지 않는 이유는 호이스팅 때문임선언 이전에 접근해도 undefined가 출력됨이 문제를 해결

사칙연산 등을 하기 위한 기호사칙연산자비교 연산자기본적으로 원시값과 참조값이 있다원시값값이 변하지 않고, 확보된 메모리 공간에 값을 직접 저장원시값은 값을 변경할 수 없는 유형, 만약 변수값 변경이 필요한 경우 해당 메모리 주소에 저장된 값을 변경하는게 아닌 새로운 메

프로그램은 현실 세계의 것들을 효율적이고 효과적으로 해결하기 위해 현실세계를 코드화 한 것세상은 관점 기준인 주체와 상대 혹은 대상으로서 객체 그리고 주체와 객체 간의 관계로 구성만약 주체를 객체로 본다면 세상은 객체와 객체간의 관계로 볼 수 있음객체는 사람, 동물,

함수는 특정 작업을 수행하는 독립된 프로그램의 단위, 재활용의 기초가 됨함수 정의 (선언)함수 표현식 (ES5에서 추가)함수 표현식은 함수 정의와 구문이 거의 동일하나 익명 함수를 변수명에 할당하는 형태함수 정의 방식 사용시 정의 전 사용이 가능하지만(호이스팅) 함수

알고리즘이란 문제를 해결 하기 위한 절차와 방법을 말함명령어의 흐름에 따라 순차, 선택, 반복 구조로 구분명령어를 실행 순서에 따라 나열하는 간단한 형태명령을 배치한 순서에 따라 차례대로 수행하는 구조를 가짐조건에 따라 과정이나 결과를 선택하는 알고리즘길을 갈때 분기점

웹페이지 내 HTML요소들이 있을때 특정 요소를 선택하는 형식과 여러 요소를 한번에 가리키는 방식이 존재여러 요소를 가르킬때는 배열 형식으로 처리하게 됨요소의 선택 형식은 DOM(Document Obejct Model)의 개념임웹 문서가 로드 되면 문서 객체 형식이 되

하나의 변수에 여러 값을 저장할 수 있는 자료 구조여러개의 값을 묶음 처리하여 저장된 값을 조회하거나 연산을 편리하게 해줌심볼 이용 방식리터럴 방식배열의 값은 인덱스로 구분배열명인덱스 로 접근인덱스의 시작은 0번 부터배열의 원소가 될 수 있는 데이터 타입은 문자열, 숫

문자열은 배열과 같은 객체, 저장하거나 특정 문자를 탐색하여 찾아내거나 새로운 문자열 구성 시 사용“” 혹은 ‘’ 혹은 \`\`으로 감싸서 표현 할 수 있음charAt(인덱스)문자열에서 특정한 위치에 있는 문자를 반환\-1 을 매개변수로 주면 마지막 문자 확인 가능in

HTML이나 XML에서 프로그래밍을 위한 인터페이스자바스크립트 등의 언어가 각 요소에 접근하여 조회하거나 추가,변경, 삭제 등을 시킬 수 있도록 도와 줌DOM은 노드와 객체로 웹 문서의 구조를 논리적으로 표현노드는 HTML문서를 트리 모양의 계층 구조로 만들 때 각 지

사용자가 입력하는 데이터의 종류, 내용이 올바르게 입력할 수 있도록 UI를 잘 구성하고 유효한 입력값만 전송되도록 자바스ㅡ립트로 제어할 수 있어야 type속성에 따라 다양한 모양으로 표현되는 기본 입력 요소기본적으로 20개 이상의 type이 존재 드롭다운 목록을 정의하

사용자가 입력한 폼 정보의 형식이 올바른지, 값이 제대로 입력했는지를 전송하기 전 검토하는 과정서버의 오버헤드 (서버에서 검토하는 등에서의 자원 낭비)를 줄이기 위함requiredpatternminmax→ onSubmit 발생 시 사전 검사 필요form의 method속

웹페이지의 일부 또는 전체 영역을 갱신 할 수 있도록 해주는 방법동일한 형태의 UI를 갖는 페이지에서 일부 영역의 콘텐츠를 변경하기 위해 페이지 전체를 갱신하는 것은 비효율적Ajax는 브라우저에 탑재된 XMLHttpRequest객체 또는 Fetch API를 이용해 서버

XMLHttpRequest 객체 생성 및 초기화XMLHttpRequest 객체를 open() 메서드로 요청할 조건을 구성XMLHttpRequest 객체를 서버로 전달하여 요청 과정을 수행서버로 전달된 요청에 대한 응답을 처리할 콜백 함수 정의XMLHttpRequest

XML과 JSON은 모두 데이터 컨테이너 이다.내부에 데이터를 저장하여 전달하고, 추출할 수 있게 도움JSON.parse()JSON 형식의 문자열을 JSON 객체로 변환JSON.stringify()자바스크립의 값, 객체를 JSON 문자열로 변환교차 출처 리소스 공유특정

브라우저가 제공하는 강력한 API웹 서버로 HTTP 요청을 할 수 있으며 XMLHttpRequest 대체가 가능Request, Response, Headers 객체 등으로 구성각 객체는 속성, 메서드를 포함fetch()에 요청하는 URL, method, headers

제이쿼리는 자바스크립트를 편리하고 강력하게 사용하기 위한 목적으로 만들어짐API문서가 잘 작성돼있어 배우기 쉬움HTML, CSS를 다루거나 이벤트 구성 시 다양한 효과나 기능을 구성하는데 효율 적jQuery홈페이지를 방문 후 다운로드하기jQuery의 종류는 기본적으로

선택자JS는 이벤트 드리븐 방식으로 수행그렇기 때문에 이벤트 트리거를 발생시키는 요소를 특정해야 하며 선택자의 사용이 중요jQuery선택자는 CSS 선택자 형식과 jQuery에서의 사용 형식으로 구성 됨jQuery에서의 클래스는 수도 클래스로 아래와 같음대체 메서드가

구조 분해 할당은 배열이나 객체의 속성을 해체하여 개별 변수에 값을 담을 수 있게 하는 JavaScript의 표현식.자바스크립트의 꽃이라고 할 수 있으며 실제로 프로젝트에서도 매우 많이 사용한다객체를 많이 다루지만 리스트에서도 활용 할 수 있다간결성: 배열과 객체의 값

자바스크립트에서 this는 객체지향 언어의 this와는 다르게 함수를 호출한 방법에 따라 결정. 이 때문에 많은 개발자들이 헷갈리는 개념 중 하나이다. car.getBrand(): this는 car 객체를 가리킴. 호출 주체가 car이기 때문.globalCar(): t

클로저는 자신의 스코프(Scope)와 함께 상위 스코프에 있는 변수에도 접근할 수 있는 함수를 말함. 자바스크립트의 중요한 특징 중 하나이며, 함수가 선언될 당시의 주변 환경(렉시컬 환경)을 기억하기 때문에 가능.핵심: 함수가 함수 내부 변수뿐만 아니라 자신이 속한 외

JavaScript Promise에는 여러 개의 Promise를 다루는 데 유용한 몇 가지 정적 메서드가 있음. 대표적으로 Promise.all, Promise.allSettled, Promise.any, Promise.race가 있으며 각각 다른 방식으로 Promis

학습자료 : https://youtu.be/rZrbQv1bMaI?si=Cli0nmDBlODjedAc자바스크립트는 싱글 스레드 언어다. 이는 곧 2개 이상의 연산이나 함수를 동시에 실행할 수 없다는 의미다. 하나의 연산이 실행 중이면 스레드는 block된다.컴퓨

학습자료 : https://www.youtube.com/watch?v=eDcaBeaOrqIJavaScript에서 함수 정의 방식인 function 키워드 함수와 화살표 함수는 문법, 동작 방식에서 주요 차이점 가짐.화살표 함수: 코드 블록 {} 없이 한 줄 작

학습자료 : https://youtu.be/s-1BTCSAV84?si=qHl70dQiqpYWSR-F프로그래밍 언어 코드를 다른 언어 또는 문법으로 변환하는 도구. Babel, SWC, esbuild 등이 해당. React JSX, 타입스크립트로 작성된 코드를

JavaScript에서 외부 코드를 불러와 사용하는 모듈 시스템은 개발의 필수 요소.하지만 오랫동안 두 가지 방식인 require와 import가 공존해 왔기 때문에 혼란스러울 수 있음.2009년 이전까지 JavaScript는 주로 웹 브라우저(프론트엔드)에서 사용자

프로젝트를 하다보면 가장 먼저 만나게 되는 package.json보통 종속성을 설치하거나 빌드, 실행 관련 코드를 작성하는 정도로 알고 넘어갔었는데이번기회에 내용을 정리해보려고 한다name프로젝트의 이름, npm, yarn과 같은 패키지 매니저에서 이 프로젝트를 식별하

JavaScript는 다른 언어와 달리 정수(Integer)와 실수(Float)를 구분하지 않음. Number 라는 단일 타입으로 모든 숫자를 표현. Number 타입은 64비트 부동소수점 형식(double-precision 64-bit binary format) 인

💡 문제 상황: 런타임 에러의 근원 위 코드는 컨테이너 벨트 문제를 해결하기 위한 로직으로 보입니다. 여기서 런타임 에러(Runtime Error)가 발생한 가장 유력하고 핵심적인 원인은 바로 배열의 최대값을 구하는 다음 코드 라인에 있습니다. JavaScript

위상 정렬(Topological Sort)은 사이클이 없는 방향 그래프(DAG, Directed Acyclic Graph)의 모든 노드(정점)를 방향성(간선)에 거스르지 않도록 순서대로 나열하는 알고리즘주요 특징:사이클이 없는 방향 그래프 에서만 가능합니다 (사이클이

자바스크립트에서 표현식이란 어떠한 값으로 평가될 수 있는 코드의 단위이다. 즉, 표현식은 실행 시점에 하나의 값으로 변환된다. 예를 들어, 숫자 1, 문자열 'hello', 변수 a, 산술 연산식 a + b, 함수 호출 result(), 배열이나 객체 리터럴 , {x:

자바스크립트(JavaScript) 배열의 내장 메서드 중 데이터 유효성 검사나 특정 조건 만족 여부를 간단하게 판별할 때 유용하게 쓰이는 Array.prototype.every()와 Array.prototype.some() 메서드에 대해 포스팅해 보고자 한다.every

JavaScript에서 반복문을 사용할 때, for 루프 안에 in을 써야 할지 of를 써야 할지 헷갈린 적이 많다. 이 두 키워드는 언뜻 비슷해 보이지만, 사실 순회하는 대상 자체가 완전히 다르다. for...in은 객체의 열거 가능한(enumerable) 속성 이름