🟢Chapter01 자바스크립트 개요와 개발환경 설정
01-1 자바스크립트의 활용
자바스크립트 : 란 웹 브라우저에서 작동하는 프로그래밍 언어입니다.
ECMAScript : 란 유럽컴퓨터제조협회에서 표준화한 자바스크립트의 공식 명칭입니다.
웹 애플리케이션 : 이란 기존의 웹 페이지보다 많은 기능을 구현한 웹 페이지를 말합니다.
01-2 개발환경 설치와 코드 실행
개발환경 : 이란 개발을 할 수 있는 환경을 의미합니다.
텍스트 에디터 : 란 코드를 작성할 수 있는 프로그램을 말합니다. 이 책에서는 텍스트 에디터로 비쥬얼 스튜디오 코드를 사용합니다.
구글 크롬 개발자 도구 : 란 구글 크롬이 개발자를 위해 오류 확인 등의 기능을 제공하는 도구입니다.
01-3 알아두어야 할 기본 용어
표현식 : 이란 값을 만들어내는 간단한 코드를 말합니다.
문장 : 이란 하나 이상의 표현식이 모여 구성되는 것으로, 코드를 읽어 들이는 기본 단위입니다.
키워드 : 란 프로그래밍 언어가 처음 만들어질 때 정해진 특별한 의미가 있는 단어입니다.
식별자 : 란 이름을 붙일 때 사용하는 단어입니다.
주석 : 은 프로그램 코드르 설명하는 문장으로, 프로그램 진행에는 전혀 영향을 주지 않습니다.
🟢Chapter02 자료와 변수
02-1 기본 자료형
자료형 : 이란 자료의 종류를 의미합니다.
문자를 표현할 떄는 : 문자열 자료형을 사용합니다.
숫자를 표현할 때는 : 숫자 자료형을 사용합니다.
참과 거짓을 표현할 때는 : 불 자료형을 사용합니다.
02-2 상수와 변수
상수 : 는 변하지 않는 값을 저장하는 식별자입니다.
const : 키워드를 사용해 선언합니다.
변수 : 는 변하는 값을 저장하는 식별자입니다.
let : 키워드를 사용해 선언합니다.
상수 또는 변수를 생성하는 것을 : 선언이라고 합니다.
상수 또는 변수에 값을 넣는 것을 : 할당이라고 합니다.
02-3 자료형 변환
사용자로부터 글자를 입력 받을 때는 : prompt() 함수를 사용합니다.
어떤 자료형의 값을 다른 자료형으로 변경하는 것을 : 자료형 변환이라고 합니다.
숫자 자료형으로 변환할 때 : Number() 함수를 사용합니다.
문자열 자료형응로 변환할 때 : String() 함수를 사용합니다.
불 자료형으로 변환할 때 : Boolean() 함수를 사용합니다.
🟢Chapter03 조건문
03-1 if 조건문
if 조건문 : 은 조건에 따라 코드를 실행하거나 실행하지 않도록 하기 위해 사용하는 구문입니다.
else 조건문 : 은 if 조건무 뒤에 사용하며, if 조건문이 거짓일 때 사용합니다.
중첩 조건문 : 은 조건문을 중첩해서 사용하는 경우를 의미합니다.
if else if 조건문 : 은 중첩 조건문에서 중괄호를 생략한 형태로, 겹치지 않는 3가지 이상의 조건으로 나눌 때 사용합니다.
03-2 switch 조건문과 짧은 조건문
switch 조건문 : 은 값에 따라서 조건 분기를 걸어주는 조건문입니다.
조건부 연산자 : 는 A? B : C 와 같은 형태로 피연산자 3개를 갖는 연산자입니다. 조건 분기에 사용할 수 있습니다.
짧은 조건문 : 은 논리 연산자의 특이한 성질을 사용해서 조건 분기에 활용하는 코드입니다.
🟢Chapter04 반복문
04-1 배열
여러 개의 변수를 한 번에 선언해 다룰 수 있는 자료형을 : 배열이라고 합니다.
배열 내부에 있는 값을 : 요소라고 합니다.
비파괴적 처리 : 란 처리 후에 원본 내용이 변경되지 않는 처리를 의미합니다.
파괴적 처리 : 란 처리 후에 원본 내용이 변경되는 처리를 의미합니다.
04-2 반복문
for in 반복문 : 은 배열의 인덱스를 기반으로 반복할 때 사용합니다.
for of 반복문 : 은 배열의 값을 기반으로 반복할 때 사용합니다.
for 반복문 :은 횟수를 기반으로 반복할 때 사용합니다.
while 반복문 :은 조건을 기반으로 반복할 때 사용합니다.
break 키워드는 : switch 조건문이나 반복문을 벗어날 때 사용합니다.
continue 키워드는 : 반복문 안의 반복 작업을 멈추고 반복문의 처음으로 돌아가 다음 반복 작업을 진행합니다.
🟢Chapter05 함수
05-1 함수의 기본 형태
익명 함수란 : 이름의 없는 함수로 function () {} 형태로 만듭니다.
선언적 함수란 : 이름이 있는 함수로 function 함수 이름() {} 형태로 만듭니다.
함수의 괄호 안에 넣는 변수를 : 매개변수라고 합니다. 매개변수를 통해 함수는 외부의 정보를 값을 넣어서 생성합니다.
함수의 최종적인 결과를 : 리턴값이라고 합니다. 함수 내부에 return 키워드를 입력하고 뒤에 갑을 넣어서 생성합니다.
가변 매개변수 함수란 : 매개변수의 개수가 고정되어 있지 않는 함수를 의미합니다. 나머지 매개변수(...)를 활용해서 만듭니다.
전개 연산자 란: 배열을 함수의 매개변수로써 전개하고 싶을 때 사용합니다.
기본 매개변수 란 : 매개변수에 기본값이 들어가게 하고 싶을 떄 사용하는 매개변수입니다.
05-2 함수 고급
콜백 함수 란 : 매개변수로 전달하는 함수를 의미합니다.
화살표 함수 란 : 익명 함수를 간단하게 사용하기 위한 목적으로 만들어진 함수 생성 문법입니다. () => {} 형태로 함수를 만들고, 리턴값만을 가지는 함수라면 () => 값 형태로 사용할 수 있습니다.
즉시 호출 함수란 : 변수의 이름 충돌을 막기 위해서 코드를 안전하게 사용하는 방법입니다.
자바스크립트의 문법 오류를 덜 발생시키는 : 엄격 모드는 실수를 줄일 수 있는 방법입니다. 'use strick'라는 문자열을 블록 가장 위쪽에 배치해서 사용할 수 있습니다.
🟢Chapter06 객체
06-1 객체의 기본
요소란 : 배열 내부에 있는 값을 말합니다.
속성은 : 객체 내부에 있는 값을 말합니다.
메소드는 : 속성 중에 함수 자료형인 것을 의미합니다.
this 키워드는 : 객체 내부의 메소드에서 객체 자신을 나타내는 키워드입니다.
객체 생성 이후에 속성을 추가하거나 제거하는 것을 : 동적 속성 추가, 동적 속성 제거라고 합니다.
06-2 객체의 속성과 메소드 사용하기
실체가 있는 것 중에서 객체가 아닌 것을 : 기본 자료형이라고 하며, 숫자, 문자열, 불이 대표적인 예입니다.
객체를 기반으로 하는 자료형을 : 객체 자료형이라고 하며, new 키워드를 활용해서 생성합니다.
기본 자료형의 승급이란 : 기본 자료형이 일시적으로 객체 자료형으로 변화하는 것을 의미합니다.
prototype 객체란 : 객체의 틀을 의미하며, 이곳에 속성과 메소드를 추가하면 해당 객체 전체에서 사용할 수 있습니다.
06-3 객체와 배열 고급
속성 존재 여부 확인은 : 객체 내부에 어떤 속성이 있는지 확인하는 것을 의미합니다. 객체에 없는 속성은 접근하면 undefined가 나오게 되는데, 이를 활용하면 됩니다.
다중 할당은 : 배열과 객체 하나로 여러 변수에 갑을 할당하는 것을 의미합니다.
얕은 복사(참조 복사)는 : 복사하는 행위가 단순하게 다른 이름을 붙이는 형태로 동작하는 복사를 의미합니다.
깊은 복사는 : 복사 후 두 객체를 완전하게 독립적으로 사용할 수 있는 복사를 의미합니다.
🟢Chapter07 문서 객체 모델
07-1 문서 객체 조작하기
DOMContentLoaded 이벤트는 : HTML 페이지의 모든 문서 객체(요소)를 웹 브라우저가 읽어들였을 떄 발생시키는 이벤트입니다.
querySelector() 메소드는 : 문서 객체를 선택할 때 사용하는 문서입니다.
textContent 속성과 innerHTL 속성은 문서 객체 내부의 글자를 조작할 때 사용하는 속성입니다.
style 속성은 : 문서 객체의 스타일을 조작할 때 사용하는 속성입니다.
이벤트 리스너(이벤트 핸들러)는 이벤트가 발생할 떄 실행하는 함수를 의미합니다.
07-2 이벤트 활용
이벤트 모델은 : 이벤트를 연결하는 방법을 의미합니다.
이벤트 객체는 : 이벤트 리스너의 첫 번째 매개변수로 이벤트와 관련된 정보가 들어있습니다.
이벤트 발생 객체는 : 이벤트를 발생시킨 객체를 의미합니다. 이벤트 객체의 currentTarget 속성을 사용해서 확인할 수 있습니다.
🟢Chapter08 예외 처리
08-1 구문 오류와 예외
구문 오류는 : 프로그램 실행 전에 발생하는 코드의 문법적인 문제로 발생하는 오류를 의미합니다.
예외는 : 프로그램 실행 중에 발생하는 모든 오류를 의미합니다.
예외 처리는 : 예외가 발생했을 때 프로그램이 중단되지 않게 하는 처리입니다. 구문 오류는 예외 처리로 처리할 수 없습니다.
try catch finally 구문은 : try 구문 안에서 예외가 발생하며 catch 구문에서 처리하고, finally 구문은 예외 발생 여부와 상관없이 실행-야 하는 작업이 있을 때 사용합니다.
08-2 예외 처리 고급
예외 객체는 : 예외와 관련된 정보를 담은 객체를 의미합니다.
throw 구문은 : 예외를 강제로 발생시킬 떄 사용하는 구문입니다.
🟢Chapter 09 클래스
09-1 클래스의 기본 기능
객체 지향 패러다임은 : 를 우선적으로 생각해서 프로그램을 만든다는 방법론을 의미합니다.
추상화는 : 프로그램에서 필요한 요소만을 사용해서 객체를 표현하는 것을 의미합니다.
클래스는 : 객체를 안전하고 효율적으로 만들 수 있게 해주는 문법입니다.
인스턴스는 : 클래스를 기반으로 생성한 객체를 의미합니다.
생성자는 : 클래스를 기반으로 인선턴스를 생성할 때 처음 호출되는 메소드입니다.
09-2 클래스의 고급 기능
상속은 : 어떤 클래스가 갖고 있는 유산(속성과 메소드)을 기반으로 새로운 클래스를 만드는 것입니다.
private 속성/메소드는 : 클래스 내부에서만 접근할 수 있는 속성/메소드입니다.
게터는 : get○○() 형태로 값을 확인하는 기능을 가진 메소드를 의미합니다.
세터는 : set○○() 형태로 값을 지정하는 기능을 가진 메소드를 의미합니다.
오버라이드는 : 부모가 갖고 있는 메소드와 같은 이름으로 메소드를 선언해서 덮어 쓰는 것을 의미합니다.
🟢Chapter10 리액트 라이브러리
10-1 리액트의 기본
리액트는 : 사용자 인터페에스(UI)를 쉽게 구성할 수 있게 도와주는 라이브러리입니다.
컴포넌트는 : 리액트에서 화면에 출력되는 요소를 의미합니다.
JSX는 : 자바스크립트 코드 내부에서 HTML 태그 형태로 컴포넌트를 만들 수 있게 해주는 자바스크립트 확장 문법입니다.
10-2 리액트와 데이터
리액트 라이브러리를 본격적으로 사용해서 프론트엔드 웹 애플리케이션을 만들려면 다음과 같은 것을 공부해야 합니다.
Node.js : 자바스크립트를 웹 브라우저가 아닌 곳(서버 등)에서 실행할 수 있게 해주는 플랫폼입니다. 처음 등장했을 때는 백엔드 개발자들을 대상으로 설계되었지만, 현재는 전반적인 개발에서 사용되고 있습니다.
Node.js 웹 서버 개발 : 웹 애플리케이션은 프론트엔드만으로 만들어지지 않습니다. 백엔드도 간단하게 만들 수 있어야 합니다.(물론 팀의 규모가 커지면 당연히 분업화해서 지냉합니다.)Node.js 를 공부하고 Node.js 를 활용해 웹 서버를 만드느 방법도 살펴보기 바랍니다.
React Flux 패턴(Redux 등) : 리액트로 데이터를 쉽게 교환하기 우위해서 만들어진 라이브러리입니다. 큰 규모의 웹 애플리케이션 개발을 쉽게 하려며 알아야 하는 내용입니다.
출처 : 혼자 공부하는 자바스크립트 요약부분들 발췌
'WEB > JavaScript' 카테고리의 다른 글
학습방법이 잘 나와있는 저자인터뷰 (0) | 2022.11.10 |
---|---|
자바스크립트 공부 환경tip (Visual Studio Code보다 Chrome이 더 좋다.) (0) | 2022.11.04 |
댓글