본문 바로가기

학원/JavaScript

(22)

25장. 비동기식 처리 모델과 Ajax [ 목차 ] 1.Ajax 2. JSON 3. JASON.stringify 4. JSON.parse 5. XMLHttpRequest 6. Load JSONP 7. 동일출처원칙을 위회하는 방법 1. Ajax 1) 브라우저에서 웹페이지를 요청, 링크를 클릭하면 화면 갱신이 발생하며, 이는 브라우저와 서버와의 통신에 의한 것 2) 서버는 요청받은 페이지를 반환할 때 HTML에서 로드하는 CSS나 JavaScript 파일도 같이 반환 3) 서버로부터 웹페이지가 반환되면 클라이언트는 이를 랜더링하여 화면에 표시 4) Ajax는 자바스크립트를 이용해서 비동기적으로 서버와 브라우저가 데이터를 교환할 수 있는 통신 방식을 의미 5) 서버로부터 웹페이지가 반환되면 화면 전체를 갱신해야 하는데, 페이지 일부만을 갱신하고 동..

24장. 이벤트 [ 목차 ] 1. 이벤트 2. 이벤트 루프와 동시성 3. 이벤트의 종류 4. 이벤트 핸들러 등록 - 인라인 이벤트 핸들러 방식 5. 이벤트 핸들러 등록 - 이벤트 핸들러 프로퍼티 방식 6. 이벤트 핸들러 등록 - addEventListner 메소드 방식 1. 이벤트 1) 어떤 사건을 의미 2) 브라워의 이벤트는 사용자가 버튼을 크릭, 웹페이지가 로드 되었을 때와 같은 상황으로, DOM요소와 관련 3) 이벤트 발생 시점이나 순서는 사전에 인지할 수 없기에 누군가 이를 감지할 수 있어야 하며 대응하는 처리를 호출 4) 브라우저는 이벤트를 감지할 수 있으며 이벤트 발생 시 통지하고, 이를 통해 사용자와 웹페이지는 상호작용 5) 이벤트가 발생하면 그에 맞는 반응을 해야하며 보통 함수(이벤트 핸들러)에 연결되고 ..

23장. 동기식 처리 모델 vs 비동기식 처리 모델 [ 목차 ] 1. 동기식 처리 모델 2. 비동기식 처리 모델 3. 원리 1. 동기식 처리 모델 1) 직렬적으로 태스크를 수행 2) 태스크는 순차적으로 실행되며 어떤 작업이 수행 중이면 다음 작업은 대기 3) 서버에서 데이터를 가져와 화면에 표시하는 작업을 할 때 서버에 데이터를 요청하고 데이터가 응답될 때까지 이후 태스크들은 블로킹 2. 비동기식 처리 모델 1) 병렬적으로 태스크를 수행 2) 태스크가 종료되지 않은 상태라 하더라도 대기하지 않고 다음 태스크를 실행 3) 서버에서 데이터를 가져와서 화면에 표시하는 태스크를 수행할 때 서버에 데이터를 요청한 이후 서버로부터 데이터가 응답될 때까지 대기하지 않고 즉시 다음 태스크를 수행 4) 서버로부터 데이터가 응답되면 이벤트가 발생하고 이벤트 핸들러가 데이터..

22장. 문서 객체 모델 [ 목차 ] 1. DOM (Document Object Model) 2. DOM tree 3. DOM Query 4. DOM Manipulation 5. style 1. DOM (Document Object Model) 1) 텍스트 파일로 만들어진 웹 문서를 브라우저에 렌더링하려면 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야 함 2) DOM이란 브라우저의 렌더링 엔진이 웹 문서를 로드한 후 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는 것 3) 요소와 요소의 어트리뷰트, 텍스트를 각각의 객체로 만들고 이를 부자 관게를 표현할 수 있는 트리구조로 구성한 것 4) DOM은 자바스크립트를 통해 동적으로 변경할 수 있으며 이는 렌더링에 반영 5) 정적인 웹페이지..

<문자열을 JavaScript Object로 변환하는 방법> JSON.parse(); 를 사용해 문자열을 object로 변환 가능

21장. 배열 [ 목차 ] 1. 배열 2. 배열의 생성 1. 배열 1) 1개의 변수에 여러 개의 값을 순차적으로 저장할 때 사용 2) 자바스크립트의 배열은 객체이며 유용한 내장 메소드를 포함 2. 배열 리터럴 1) 0개 이상의 값을 쉼표로 구분하여 대괄호 []로 묶어서 생성 2) 첫번째 값은 인덱스 0으로 읽을 수 있으며 존재하지 않는 요소에 접근하면 undefined를 반환 3) 객체 리터럴과 다리 프로퍼티명이 없고 각 요소의 값만 존재 4) 대부분의 언어는 배열 요소가 모두 같은 타입이어야 하지만 자바스크립트는 어떤 타입이라도 조합 가능 그 외 배열 내용은 이전 학습과 유사하여 간단히 학습

20장. 정규표현식 [ 목차 ] 1. 정규표현식 2. 플래그 3. 패턴 4. 자주 사용하는 정규표현식 1. 정규표현식 1) 문자열에서 특정 내용을 찾거나 대체 또는 발췌하는데 사용 2) 고객으로부터 입력 받은 전화번호가 유효한지 체크할 때와 같은 상황에서 사용 3) 리터럴 표기법으로 생성 2. 플래그 1) 플래그는 옵션이기에 선택적으로 사용 2) 플래그를 사용하지 않은 경우 문자열 내 검색 매칭 대상이 1개 이상이더라도 첫번째 대상만 검색하고 종료 3. 패턴 1) 검색하고 싶은 문자열을 지정하며 따옴표는 생략 2) .은 임의의 문자 한 개를 의미하며, 연속하여 입력시 그 수의 자리만큼 문자를 추출 3) 추출을 반복하기 위해서는 플래그 g를 사용 4) 앞선 패턴을 최소 한번 반복하려면 +를 입력 4. 자주 사용하는 정규표현식..

제 15~19장. 간단 요약 [ 목차 ] 1. encodeURIComponent() / decodeURIComponent() 2. Math.random(): number 1. encodeURIComponent() / decodeURIComponent() 1) encode...는 매개변수로 전달된 URI 구성요소를 인코딩 2) decode...는 매개변수로 전달된 URI 구성요소를 디코딩 2. Math.random(): number 1) 임의의 부동 소수점을 반환 2) 소수점 0부터 1미만의 값 3) 1부터 10까지의 랜덤 값 반환과 소숫점을 제거하여 정수로 만드는 방법 그 외 내용은 앞서 중복된 내용이거나 깊은 지식이기에 간단히 넘어감 15장. 빌트인 객체 https://poiemaweb.com/js-built-in-object 1..

14장. 클로저 [ 목차 ] 1. 클로저 2. 클로저를 활용한 상태유지 1. 클로저 1) 자바스크립트 고유의 개념이 아닌 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 특성 2) 함수와 그 함수가 선언됐을 때의 렉시컬 환경과의 조합 = 자신이 생성될 때의 환경을 기억하는 함수 3) 렉시컬 환경 : 내부 함수가 선언됐을 때의 스코프를 의미 4) 외부 함수 밖에서 내부 함수가 호출되더라도 외부 함수의 지역 변수에 접근 가능 2. 클로저를 활용한 상태유지 1) 현재 상태를 기억하고 변경된 최신 상태를 유지하는 것 2) 즉시실행함수는 함수를 반환하고 즉시 소멸 3) 즉시실행함수가 반환한 함수는 자신이 생성됐을 때의 렉시컬 환경에 속한 변수 isShow를 기억하는 클로저 4) 클로저를 이벤트 핸들러로서 이벤트 ..

13장. 함수 호출 방식에 의해 결정되는 this - 내용추가 [ 목차 ] 1. 자바와 자바스크립트 this의 차이 2. 함수 호출 1. 자바와 자바스크립트 this의 차이 1) 자바의 경우 this는 인스턴스 자신을 가리키는 참조변수 2) 자바스크립트의 경우 this에 바인딩되는 객체는 한가지가 아니라 해당 함수 호출 방식에 따라 바인딩 객체가 달라짐 3) 함수 호출, 메소드 호출, 생성자 함수 호출, apply/call/bind 호출 2. 함수 호출 1) 전역객체는 모든 객체의 유일한 최상위 객체를 의미 2) 일반적으로 Browser-side에서는 window 객체를 의미 3) 일반적으로 Server-side에서는 global 객체를 의미

12장. 보다 안정적인 자바스크립트 개발 환경을 위한 Strict mode [ 목차 ] 1. Strict mode 2. Strict mode의 적용 1. Strict mode 1) 암묵적 전역 변수의 사용은 잠재적인 오류를 발생시키고 어려운 개발 환경을 생성 2) 이를 지원하기 위해 strict mode를 사용하여 자바스크립의 언어 문법을 보다 엄격하게 적용 가능 3) 기존에 무시되던 오류를 발생시킬 가능성이 높거나 최적화 작업에 문제를 일으킬 수 있는 코드에 명시적 에러를 발생 2. Strict mode의 적용 1) 선두에 'use strict';를 추가하면 스크립트 전체에 적용

11장. 스코프 [ 목차 ] 1. 스코프란? 2. 자바스크립트 스코프의 특징 3. 암묵적 전역 4. 즉시실행함수 1. 스코프란? 1) 참조 대상 식별자를 찾아내기 위한 규칙 2) 참조 대상 식별자 : 함수의 이름과 같이 어떤 대상을 다른 대상과 구분하여 식별할 수 있는 유일한 이름 3) 자바스크립트를 비롯한 모든 프로그래밍 언어의 기본적 개념 4) 스코프가 없다면 같은 식별자 이름은 충돌을 일으키기 때문에 프로그램 전체에서 하나만 사용 가능 2. 자바스크립트 스코프의 특징 1) 대부분의 언어는 블록 레벨 스코프를 따르지만 자바스크립트는 함수 레벨 스코프를 따름 2) 함수 레벨 스코프 : 함수 코드 블록 내에서 선언된 변수는 함수 코드 블록 내에서만 유효하고 외부에서 참조 불가능 3) let 키워드를 사용해 블록 레벨 스..

10장. 함수 - 추가필요 caller 프로퍼티 x 프로토 접근자함수 x 푸ㅡ로퍼티 x 내부함수 x 1. 함수 1) 어떤 작업을 수행하기 위한 문들의 집합을 정의한 코드 블록 2) 이름과 매개변수를 가지며 필요한 때에 호출하여 코드 블록에 담긴 문들을 일괄저으로 실행 가능 3) 한번만이 아닌 여러번 호출 가능 0. 즉시 실행 함수 1) 함수의 정의와 동시에 실행되는 함수 2) 최초 한번만 호출되며 다시 호출할 수 없으며 초기화 처리 등에 사용 3) 혹시 있을 수도 있는 변수명 또는 함수명의 충돌을 방지할 수 있음 0. 재귀함수 1) 자기 자신을 호출하는 함수 2) 자신을 무한히 연쇄 호출하기에 호출을 멈출 수 있는 탈출 조건을 반드시 생성해야 함 3) 탈출 조건이 없는 경우 함수가 무한 호출되어 에러가 발생 4) 대부분 for, ..

9장. 객체와 변경불가성 - 추가필요 [ 목차 ] 1. 변경불가성 1. 변경불가성 1) 객체가 생성된 이후 그 상태를 변경할 수 없는 디자인 패턴으로, 함수형 프로그래밍의 핵심 원리 2) 객체가 참조를 통해 공유되고 있다면 그 상태가 언제든지 변경될 수 있기 때문에 문제가 될 가능성 증가 3) 의도하지 않은 객체의 변경이 발생하는 원인의 대다수는 래퍼런스를 참조한 다른 객체에서 객체를 변경하기 때문 4) 비용이 조금 들지만 객체를 불변객체로 만들어 프로퍼티의 변경을 방지하며 객체의 변경이 필요한 경우에는 참조가 아닌 객체의 방어적 보가를 통해 새로운 객체를 생성한 후 변경하여 해결 가능 5) 불변 객체를 사용하면 복제나 비교를 위한 조작을 단순화, 성능 개선에 도움 6) 객체가 변경 가능한 데이터를 많이 가지고 있는 경우 오히려 부적절 2...

8장. 객체 [ 목차 ] 1. 객체 2. 프로퍼티 3. 메소드 4. 객체 생성 방법 5. 프로퍼티 키 6. 프로퍼티 값 읽기 7. 프로퍼티 값 갱신 8. 프로퍼티 동적 생성 9. 프로퍼티의 삭제 10. for-in 문 11. Pass-by-reference 12. Pass-by-value 1. 객체 1) 자바스크립트는 객체기반의 스크립트 언어이며 자바스크립트를 이루고 있는 거의 모든 것이 객체 2) 원시 타입을 제외한 나머지 값들은 모두 객체 3) 자바스크립트의 객체는 키와 값으로 구성된 프로퍼티들의 집합 4) 프로퍼티 값으로 함수를 사용할 수도 있으며 프로퍼티 값이 함수일 경우 일반 함수와 구분하기 위해 메소드라 지칭 5) 객체는 데이터를 의미하는 포로퍼티와 데이터를 참조, 조작할 수 있는 동작을 의미하는 메소드로..

7장. 타입 변환과 단축 평가 [ 목차 ] 1. 타입 변환 2. 암묵적 타입 변환 3. (암묵적)문자열 타입으로 변환 4. (암묵적)숫자 타입으로 변환 5. (암묵적)불린 타입으로 변환 6. (명시적)문자열 타입으로 변환 7. (명시적)숫자 타입으로 변환 8. (명시적)불린 타입으로 변환 9. 단축평가 1. 타입 변환 1) 의도적으로 값의 타입을 변환시키는 것을 명시적 타입 변환 또는 타입 캐스팅이라 지칭 2) 변수 값을 재할당해서 변경하는 것이 아닌 기존 값을 바탕으로 새로운 타입 값을 만들어 단 한번 사용하는 것 2. 암묵적 타입 변환 1) 자바스크립트는 표현식을 평가할 때 문맥, 즉 컨텐스트에 고려하여 암묵적 타입 변환을 실행 2) 이는 가급적 에러를 발생시키지 않기 위함 3) 암묵적 타입 변환은 문자열, 숫자, 불린과 같은 원..

6장. 제어문 - 추가필요 [ 목차 ] 1. 제어문 2. 블록문 1. 제어문 1) 주어진 조건에 따라 코드 블록을 실행하거나 반복 실행할 때 사용 2) 일반적으로 코드는 위에서 아래 방향으로 순차적으로 실행되나 제어문은 코드의 실행 순서를 인위적으로 제어 가능 2. 블록문 1) 0개 이상의 문들로 중괄호로 묶은 것 2) 코드 블록 또는 블록이라고 지칭하며 자바스크립트는 블록문을 하나의 단위로 취급 3) 블록문은 단독으로 사용할 수 있으나 일반적으로 제어문이나 함수 선언문 등에서 사용 4) 문의 끝에 세미콜론을 붙이는 것이 일반적이지만 블록문은 붙이지 않음 3. 조건문 1) 주어진 조건식의 평가 결과에 따라 코드 블럭의 실행을 결정 2) 불린 값으로 평가될 수 있는 표현식 3) if... else 문과 switch 문을 제공 4. ..

5장. 연산자 대부분 java와 같은 다른 언어와 비슷하기 때문에 JavaScript만의 특징적인 연산자만 기술 [ 참고 ] https://poiemaweb.com/js-operator [ 목차 ] 1. - 단항연산자 2. 문자열 연결 연산자 3. 비교연산자 4. typeof 연산자 1. -단항연산자 1) 피연산자의 부호를 반전한 값을 반환 2) true의 경우 1, false의 경우 0을 반환하지만 -를 붙일 경우 각각 -1, -0을 반환 2. 문자열 연결 연산자 1) JavaScript 엔진에 의해 개발자의 의도와 상관없이 암묵적으로 타입이 변환 3. 비교연산자 1) 동등 비교 x == y : x와 y의 값이 같음 2) 일치 비교 x === y : x와 y의 값이 같고 타입이 같음 3) 부등 비교 x != y : ..

4장. 데이터 타입과 변수 [ 목차 ] 1. 데이터타입 2. 원시타입 3. 객체타입 4. 변수 5. 변수의 선언 6. 변수의 중복 선언 7. 동적 타이핑 8. 변수 호이스팅 9. var 키워드로 선언된 변수의 문제점 1. 데이터타입 1) 프로그래밍 언어에서 사용할 수 있는 데이터의 종류를 의미 2) 코드에서 사용되는 모든 데이터는 메모리에 저장, 참조할 수 있어야 함 3) 한정된 공간을 효율적으로 사용하고 2진수 데이터로 메모리에 저장된 데이터를 다야한 형태로 사용하기 위해 존재 4) 자바스크립트의 모든 값은 데이터 타입을 가지며 총 7가지가 존재(원시타입과 객체타입으로 분류) 2. 원시타입 1) 변경 불가능한 값으로 pass-by-value(값에 의한 전달) 2) number 1] 다른 언어와 달리 독특하게 하나의 숫자 타입만 ..

3장. 자바스크립트의 기본 문법 [ 목차 ] 1. 변수 2. 값 3. 연산자 4. 키워드 5. 주석 6. 문 7. 표현식 8. 문과 표현식의 비교 9. 함수 10. 객체 11. 배열 1. 변수 1) 변수는 값을 저장하고 그 저장된 값을 참조하기 위해 사용 2) 한번 쓰고 버리는 값이 아닌 유지할 필요가 있는 값은 변수에 담아 사용 3) 변수 이름을 통해 값의 의미를 명확히 할 수 있어 코드의 가독성이 좋아짐 4) 변수는 위치를 기억하는 저장소 즉, 변수란 메모리 주소에 접근하기 위해 사람이 이해 가능한 언어로 지정된 식별자 5) 위치는 메모리 상의 주소를 의미 6) 변수를 선언할 때 var 키워드를 사용하며 할당 연산자 =는 변수에 값을 할당하기 위해 사용 2. 값 1) 프로그램에 의해 조작될 수 있는 대상 2) 다양한 방법으로 생성할..

2장. 자바스크립트 개발 환경과 실행 방법 [ 목차 ] 1. 웹 브라우저 2).개발자 도구 3. 콘솔 4. Node.js 5. 내장 터미널 6. code runner 확장 플러그인 1. 웹 브라우저 1) 구글 크롬 브라우저를 사용 2) 크롬 브라우저의 V8 자바스크립트 엔진은 Node.js에서도 사용하고 있기 때문 2. 개발자 도구 1) 크롬 브라우저가 제공하는 개발자 도구는 자바스크립트 개발에 필수적인 강력한 도구 2) 브라우저에 기본 내장되어 있기에 별도의 설치가 필요 없으며 F12를 이용해 실행 가능 3. 콘솔 1) 자바스크립트 코드에서 에러가 발생하여 애플리케이션이 정상적으로 동작하지 않을 때 우선적으로 살펴볼 곳 2) 구현 단계에서 디버깅을 실행하는 것보다 간편하게 값을 확인하며 개발을 진행가능 3) 자바스크립트 코드를 직접 입력하여 그..

1장. 자바스크립트란? [ 목차 ] 1. 자바스크립트의 탄생 2. 자바스크립트의 파편화와 표준화 3. 자바스크립트의 성장과 역사 4. JavaScript와 ECMAScript 5. 자바스크립트의 특징 1. 자바스크립트의 탄생 1) 넷스케이프 커뮤니케이션즈가 정적인 html을 동적으로 표현하기 위해 개발 2) Mocha -> LiveScript -> JavaScript 로 이름이 변경 3)이후 자바스크립트의 파생 버전 JScript가 출시 2. 자바스크립트의 파편화와 표준화 1) JScript와 자바스크립트가 표준화되지 못하고 적당히 호환 2) 모든 브라우저에서 동일하게 동작하는 표준화된 자바스크립트의 필요성이 나타남 3) 표준화된 자바스크립트는 상표문제로 ECMAScript로 명명 3. 자바스크립트의 성장과 역사 1) 초창기 ..

이전 1 다음

티스토리툴바