* 웹 어플리케이션 개발 ( 웹사이트 )
1. web application ( studentOAP )
- 화면 필요 ( html, JSP/Servlet)
브라우저 ------------------------> 서버 ( html, JSP/Servlet, Spring Framework, Spring Boot )
<--------------------------
응답: html(css,js)
2. REST API
-----------------------> 서버 ( Spring Framework, Spring Boot )
장치 <----------------------
XML, JSON ( JavaScript Object Notation)
{key:value, key:value}
장치?
- 도구 이용
- postman 툴 ( GUI )
Talend API Tester 툴 ( GUI ) - *
curl 툴 ( CMD )
Swagger ( 자바언어 ) - *
3. full stack 어플리케이션 ( 화면 + REST API)
React.js(JS) ------------------------> 서버 ( Spring Framework, Spring Boot )
<--------------------------
응답: JSON
4. MSA ( Micro Service Application)
###########################################################################
###########################################################################
1장. JS 개요
###########################################################################
1. (Vanilla) Javascript(JS) 개요
- Java 언어와 무관
- 웹브라우저에서 실행됨 ( JS 엔진 )
크롬의 JS 엔진: v8
html 랜더링 기능: 랜더링 엔진
- V8엔진을 크롬 브라우저뿐만 아니라 일반 서버에서도 실행될 수 있도록 만듬.
==> node.js
클라이언트 서버
(크롬브라우저:V8) (node.js:V8)
- JS 라이브러리
==> jQuery
- JS 프레임워크 (프런트 앤드 기술 )
=> React.js (*, 페이스북)
=> Vue.js ( 중국계 미국인 )
=> Angular ( 구글 )
- React 종류 3가지
가. React.js
- CSR ( Client Side Rendering )
나. Next.js
- SSR ( Server Side Rendering )
다. React Native
- 모바일 용
- JS 표준화 ==> ES6 ( ECMAScript 6: 2015 년 )
일반적인 JS는 ES5 의미한다.
- TypeScript (******)
JS + 타입지정 ==> 개발향상 기대
*.tsc --------> *.js
도구이용
2. JS 특징
- 인터프리터 언어 ( 컴파일 없이 한줄 씩 실행 )
- 대소문자 구별함.
- JS 엔진에서 실행.
- html 태그에 포함되어 정의함.
가. <head> 태그안에 JS 정의가능
- <script> 태그 이용
나. <body> 태그안에 JS 정의가능
- <script> 태그 이용
- 주석문은 자바와 동일 ( //, /*~*/ )
###########################################################################
###########################################################################
2장. 식별자와 데이터 종류
###########################################################################
1. 식별자 (identifier)
- JS 문법에 지정하는 영단어.
- 대소문자 구별
- 첫글자는 반드시 영문자 또는 _ 또는 $ 만 가능.
이후에 숫자지정 가능.
- 자바와 비슷하게 시스템 정의 식별자(예약어,키워드) 와 사용자 정의 식별자(변수, 함수(메서드), 클래스명)가 있음.
2. 데이터 종류 ( 외우기 )
가. 기본 데이터형
- 수치데이터: 정수와 실수 포함 ==> Number 객체 관리
- 문자데이터: 문자와 문자열 포함 ==> String 객체 관리
예> '홍길동', "홍길동"
- 논리데이터: true/false ( 일반데이터도 boolean 값으로 처리 가능 ) ==> Boolean 객체 관리
- undefined : 변수 초기화 안된 상태 의미. (*****) ==> Object 객체 관리
- null : 초기화는 되었는데 값(객체)없음 의미. ==> Object 객체 관리
- NaN : Not a Number ==> Number 객체 관리
예> Number.parseInt("홍길동"); ==> NaN 발생
자바: Integer.parseInt("123"); ==> 123
Integer.parseInt("홍길동"); ==> 에러
나. 참조 데이터형 ( 객체 데이터 의미 )
- 배열(객체): [값, 값2, ..]
- JSON(객체): {key:value, key:value}
- 함수(function): 기능처리
예> function fun(){}
==> 함수가 데이터란 의미는 함수를 변수에 저장할 수 있음을 의미한다. (*************)
- 클래스(class): class Cat{
생성자
메서드(함수문법)
function fun(){}
}
3. typeof 연산자
- 데이터 타입을 알 수 있음.
- 반환값은 문자열로 반환.
- 문법: typeof 값
###########################################################################
###########################################################################
3장. 변수와 상수
###########################################################################
1. 변수 용도
- 데이터 저장
2. 변수 특징
- 데이터형을 지정하지 않는다. (******)
변수에 저장되는 데이터 종류(데이터타입)을 제한안함.
즉 하나의 변수에 모든 데이터를 저장할 수 있음.
3. 문법
가. var 키워드 이용 ( OLD 방법 )
- var 변수명; // 변수선언, undefined 값이 저장됨.
변수명=값; // 변수초기화
- var 변수명=값;
- 특징:
변수명 중복가능.
함수 스코프를 따른다. ( 함수(function)가 아닌 {} 에서는 외부에서도 사용 가능 )
예>
if(true){
var n = 10;
}
console.log(n); // 사용가능
function fun(){
var n2 = 10;
}
console.log(n2); // 사용 불가능
나. let 키워드 이용 ( ES6 지원 )
- let 변수명; // 변수선언 , undefined 값이 저장됨.
변수명=값; // 변수초기화
- let 변수명=값;
- 특징:
변수명 중복 불가능.
블럭 스코프를 따른다.
예>
if(true){
let n = 10;
}
console.log(n); // 사용 불가능
function fun(){
let n2 = 10;
}
console.log(n2); // 사용 불가능
4. 데이터 형변환
1) + 를 제외한 나머지 산술연산자 ( -, *, / , % )는
문자열이 자동으로 수치로 형변환되어 연산됨.
+ 는 연결처리됨.
2) 일반 데이터가 boolean 로 처리 (********************)
- false로 처리되는 일반 데이터
0
"" (빈문자열)
undefined
null
NaN
- true로 처리되는 일반 데이터
==> 위의 false로 처리되는 5가지 제외한 나머지 모두 true로 처리됨.
//JS에서 가능한 표현식
if(10){
console.log("10은 true");
}
5. 기본형 변수 vs 참조형 변수
1) 기본형 변수
- 기본형 데이터를 저장하는 변수
예>
let n = 10;
let n2 = n;
n2값을 변경해도 n값은 변경이 안됨.
2) 참조형 변수
- 참조형 데이터를 저장하는 변수
예>
let x = [10,20,30];
let x2 = x;
x2값을 변경하면 x값도 변경이 됨.
6. 상수 (ES6 지원) ==> React.js에서 주로 사용.
- const 키워드 이용
- 문법:
const 상수명 = 값;
- 값 변경이 불가
- let 키워드 동작을 따름.
( 중복불가, 블럭 스코프 따름 )
*주의할 점 (**************)
const NUMS = [10,20,30];
NUMS[0]=100;
NUMS는 주소값을 가지고 있고 주소값 자체가 변경된 것이 아니기 때문에
위 코드는 에러없이 동작이 된다.
즉 변경전과 변경후의 배열의 주소값은 동일함. 단지 배열의 요소가 달라진 것이다.
###########################################################################
###########################################################################
4장. 연산자
###########################################################################
1. 산술연산자
+
-
*
/
%
=> + 제외한 나머지는 문자열형태의 숫자가("10") 자동으로 수치로 변환되어 연산된다.
+ 는 연결이 된다.
=> 자바: 10/3 ==> 3
JS: 10/3 ==> 3.333333
2. 대입연산자
a=b
a+=b
a-=b
a*=b
a/=b
a%=b
3. 비교연산자
a == b ( 같냐?, equal 연산자 ( 값만 비교 ))
a === b ( 같냐?, identical 연산자 ( 값과 타입까지 비교 ), *******)
a != b (같지 않냐?)
a !== b (같지 않냐?)
a > b ( 크냐 )
a >= b (크거나 같냐)
a < b ( 작냐)
a <= b (작거나 같냐 )
// 비교연산자2 - equal vs identical
let n = "10";
let n2 = 10;
console.log(n == n2); // true, equal 연산자 ( 값만 비교 )
console.log(n === n2); //false, identical 연산자 ( 값과 타입까지 비교 )
- undefined 비교시에는 반드시 === (identical)를 사용해야 된다.
이유는 실제는 null값일지라도 undefined와 == 비교하면 true 반환됨.
4. 논리 연산자
- && (and )
|| (or)
! (not)
- 기본형식-1
논리값 && 논리값 ==> 두 개 모두 true인 경우에 true 반환
논리값 ||논리값 ==> 두 개중 하나만 true여도 true 반환
!논리값 => true값을 false, false 값을 true 반환
- 주의할점
JS에서는 true/false 만 논리값으로 사용되지 않는다.
일반값도 논리값으로 사용될 수 있다.
false로 처리되는 값: 0, "", undefined, null, NaN
true로 처리되는 값: false 제외한 나머지.
- 기본형식-2 (*********************************** X 100 )
나중에 react.js 조건부 랜더링에서 사용된다.
일반값1 && 일반값2 (******매우중요) ==> 일반값1 이 true이면 일반값2 반환한다.
일반값1 이 false이면 일반값1 반환한다.
일반값1 || 일반값2 ==> 일반값1 이 true이면 일반값1 반환한다.
일반값1 이 false이면 일반값2 반환한다.
5. 증감연산자
- 기본:
++n;
n++;
--n;
n--;
- 주의할점:
다른 연산자와 같이 사용시 전치/후치에 따라서 결과값이 달라질 수 있다.
예>
let result = ++n; // 먼저 1증가하고 나중에 result에 할당
let result = n++; // 먼저 result 할당하고 나중에 증가
6. 3항 연산자
- 문법:
(조건식)?참:거짓;
- 중첩 가능
###########################################################################
###########################################################################
5장. 문장
###########################################################################
1. 문장종류
- 문장
- 실행문
:순차문
:제어문 - 조건문( 단일if문, if~else문, 다중if문, switch 문(내부적으로 ===(identical)을 사용함 )
- 반복문 ( for문, while문, do~while문, foreach문)
==> break문
continue문
- 비실행문: 주석문 ( //, /* ~ */ )
- let 변수는 블럭scope를 갖는다. ( 자바와 동일한 문법 )
var 변수는 함수scope를 갖는다.
###########################################################################
###########################################################################
6장. 객체 (object) - **********************
###########################################################################
1. 종류 3가지
==> 자바처럼 상속과 비슷한 개념(프로토타입(prototype) 관계)으로 계층구조화 되어 있음.
최상위 객체는 Object 이다.
==> 객체의 구성요소는 변수,메서드(정적메서드, 인스턴스 메서드),생성자를 가짐.
1) 데이터(기본+참조) 관련 객체
-문자관련 ==> String 객체가 관리
-수치 ==> Number 객체가 관리
-날짜 ==> Date 객체가 관리
-배열 ==> Array 객체가 관리 (자바의 List 역할, ***************)
Set/Map 같은 컬렉션 제공됨(ES6)
-JSON ==> object 객체가 관리
2) BOM ( Browser Object Model)
- 웹 브라우저 관련 객체
- 종류
Window 객체 ( window 변수로 참조 )
Screen 객체 ( screen 변수로 참조 )
Histroy 객체 ( histroy 변수로 참조 )
Location 객체 ( location 변수로 참조 )
Navigator 객체 ( navigator 변수로 참조 )
- 웹브라우저를 open하면 자동으로 생성됨.
3) DOM ( Document Object Model )
- html 문서 관련 객체
- Document 객체 ( 자동으로 생성됨. document 변수로 참조 )
2. 데이터 관련 객체
1) 문자데이터 관련 객체
- String 객체 관리
- 생성방법 3가지
가. 리터럴값만 이용 (권장)
let s = "hello";
나. new 생성자 이용
let s2 = new String("hello");
다. 생성자 이용
let s3 = String("hello");
- 문자열 표현방법 3가지
가. 'hello' 이용
나. "hello" 이용
다. `hello` 이용( 백틱, template literal ) (*****************************)
* 백틱장점 2가지
1) 변수삽입 가능: ${변수}이용
2) 들여쓰기, 엔터 같은 동작이 그대로 적용되어 출력포맷의 가독성이 높아진다.
- 메서드 조회
http://developer.mozilla.com
2) 수치 데이터 관련 객체
- 정수와 실수를 모두 관리한다.
- Number 객체가 관리한다.
- 생성방법 3가지
가. 리터럴값만 이용 (권장)
let n = 100;
나. new 생성자 이용
let n2 = new Number(100);
다. 생성자 이용
let n3 = Number(100);
- Number객체 메서드 정리
3) 날짜 데이터 관련 객체
- Date 객체가 관리.
- 생성방법 2가지
let d = new Date();
let d2 = Date();
4) 배열 데이터 관련 객체
- Array 객체가 관리
- 특징: 자바의 List 처럼 동작됨.
- 생성방법
var n = [10,20,30];
var n = [];
var n = new Array();
var n = new Array(10,20,30);
var n = Array();
var n = Array(10,20,30);
3. spread 연산자 ( 전개구문 )(************************)
기능: 배열|JSON 요소를 펼치는 기능으로서
기존 배열을 펼쳐서 새로운 배열을 만들 때 사용함.
문법: [...배열]
예>
// spread 연산자 (전개 구문)
var n = [10,20,30];
var x = n; // 얕은 복사(주소값 복사, x 변경하면 n도 영향 받음)
//1. 배열 복사
var n2 = [...n]; // 깊은 복사 ( 실제값 복사, n2 변경해도 n은 영향 없음 )
console.log(n2);
//2. 기존 배열에 새로운 값을 추가
var n = [10,20,30];
var n2 = [...n, 40, 50]
var n2 = [40, 50, ...n]
console.log(n2);
//3. 배열 연결
var n = [10,20,30];
var n2 = [100,200,300];
var n3 = [...n, ...n2];
console.log(n3);
// 4. 문자열 전개
var x = [...'hello'];
console.log(x); // ['h', 'e', 'l', 'l', 'o']
4. BOM ( Browser Object Model)
- 웹 브라우저 관련 객체
- 종류
Window 객체 : 전역객체( window 변수를 생략하고 사용이 가능하다.(***) )
웹브라우저 창 자체를 의미.
Screen 객체 : 창의 크기 정보 ( width/height )
History 객체 : 웹 페이지의 뒤로/앞으로 기능
Location 객체 : 웹 브라우저의 URL 정보
Navigator 객체 : 웹 브라우저 자체 정보
- 특징: 웹 브라우저를 open하면 자동으로 객체생성이 된다.
개발자는 명시적 생성없이 참조해서 사용할 수 있음.
어떤 변수명으로 되어 있을까?
Window 객체 참조: window 변수를 사용한다.
Screen 객체 참조: screen 변수를 사용한다.
History 객체 참조: history 변수를 사용한다.
Location 객체 참조: location 변수를 사용한다.
Navigator 객체 참조: navigator 변수를 사용한다.
5. Window 객체
- 전역객체
- window 변수로 참조 가능.
하지만 일반적으로 생략해서 사용.
- screen, location, history. navigator, document 은
Window 객체의 속성이다.
원래는 window.screen
window.location
window.history
window.navigator
window.document 사용하는것이 원칙이지만 일반적으로 window 는 생략하고 사용된다.
1) 새로운 창 열고 닫기
- window.opener : 자식창에서 부모창 참조할 때 사용.
- 부모에서 새로운 창(자식창)을 만드는 방법
var childWin = open("child.html"); // window.open("child.html", 옵션); 동일
현재 창 닫기
window.close();
부모창 닫기
opener.close();
자식창 닫기
childWin.close();
2) setTimeout(function(){}, 1/1000);
- 한번 만 실행됨.
3) setInterval(function(){}, 1/1000);
- 매번 실행
- 해제방법: clearInterval(fun);
4) alert("경고창")
confirm("진짜 삭제할거임?")
propmt("이름을 입력하세요");
5. JSON 객체 (*******************)
1)문법
{"key":value, key1:value1,...}
2) 특징
- value는 함수도 가능하다.
만약 함수인 경우에 일반 key 접근시 this 사용해야 된다.
- 속성 접근은 .(dot) 이용하거나 ["key값"] 형식의 연관배열 사용 가능 (************)
연관배열의 특징은 "key값" 을 변수로 사용할 수 있다. (*****)
- value값은 변수로 사용가능.
만약 key와 value가 동일하면 key만 지정가능.
예> { username:username } ==> {username}
- value가 함수인 경우에는 :function 생략가능해서 자바의 메서드처럼 사용가능.
예>
setUsername:function(n){this.username=n}
==> setUsername(n){this.username=n}
- 메서드 정의 앞에 set / get 키워드 지정 가능.
기존 메서드처럼 사용하면 안되고( person.setUsername("이순신"), person.getUsername() )
속성처럼 사용해야 된다. ( person.setUsername="이순신", person.getUsername )
예>
set setUsername(n){this.username=n}
get getUsername(){return this.username;}
- key값도 변수로 사용가능. [변수명]
예> var xxx = "username";
{[xxx]:"홍길동" }; ==> {"username":"홍길동"}
+ 이용해서 연결해서 사용가능
{[xxx+"01"]:"홍길동" }; ==> {"username01":"홍길동"}
- 중첩가능
- "{key:value}" --------> {key:value}
"[10,20]" --------> [10,20]
JSON.parse("{key:value}");
{key:value} ----> "{key:value}"
[10,20] ----> "[10,20]"
JSON.stringify({key:value})
"10" --------> 10
Number.parseInt("10");
10 ----------->"10"
String(10)
##################################
6. 함수 ( function *************************** X 200)
1) 개요
- 용도: 기능처리 담당 ( 자바의 메서드 역할 )
2) 종류1
- 일반함수: 일반적으로 사용되는 함수 의미.
- generator 함수 : Generator 객체를 반환하는 함수.
- 비동기 함수: Promise를 객체를 반환하는 함수 ( 동기 vs 비동기 )
3) 함수 작성 방법 2가지
가. 함수 선언식 ( 이름있는 함수 )
function 함수명([파라미터,..]){
문장;
[return 값;]
}
==> js 실행할 때 함수가 생성됨.
따라서 선언보다 먼저 호출이 가능하다.
나. 함수 표현식 ( 이름없는 함수, 익명함수 )
var 변수 = function ([파라미터,..]){
문장;
[return 값;]
};
변수가 함수명으로 사용됨.
==> var 변수=함수 코드를 만나면 함수가 생성됨.
반드시 선언후에 호출할 수 있다.
4) 함수특징
- 반드시 호출해야 된다.
(함수명을 이용)
- 호출후 반드시 호출한 곳으로 돌아온다.
- 호출할 때 인자값을 설정할 수 있고
돌아올때 리턴값이 존재할 수 있다.
- JS 함수는 함수호출시 인자값의 갯수가 달라도 된다. (******)
- 파라미터 갯수 > 인자값 갯수 경우에 인자값이 저장되고 남은
파라미터에는 undefined가 저장되는데 undefined 대신에 임의의 초기값을 설정할 수 있다.
==> 함수의 default 파라미터라고 부른다.
==> function fun(n=초기값,n2=초기값){}
- 파라미터 갯수 < 인자값 갯수 경우에 파라미터에 저장되고 남은
인자값은 소실된다. 이 경우에 소실되는 인자값을 배열로 가져올 수 있다.
==> 함수의 rest 파라미터라고 부른다.
주의할 점은 파라미터 가장 마지막에만 사용된다.
==> function fun(n,...n2){}
function fun(n,n2,...n3){}
fun(10,20,30);
- 함수호출시 spread 연산자 이용한 방식으로 인자값을 전달 할 수 있다.
예>
function fun(n,n2){}
var x = [10,20];
fun(x[0],x[1]); //기본
fun(...x); //spread
- 기본형 데이터와 참조형 데이터 인자값 사용
- 기능에 따라 4가지 형태
가. 파라미터없고 리턴값없는 형태
나. 파라미터있고 리턴값없는 형태
다. 파라미터없고 리턴값있는 형태
라. 파라미터있고 리턴값있는 형태
- JS함수는 일급객체(first-class) 이다. (************)
일급객체의 핵심개념은 함수를 데이터로 처리하는 것이다.
함수이용해서 할수 있는 작업은 다음과 같다.
가. 함수를 변수에 저장할 수 있다.
나. 함수호출시 인자값으로 함수를 사용할 수 있다. ===> 콜백함수를 구현 가능
예> arr.forEach(인자값);
personList.forEach(function(data,idx){});
다. 함수호출후 리턴값으로 함수를 사용할 수 있다. ==> 중첩함수를 구현 가능
예>
var x = function(){};
function fun(){
// return 값;
//return x;
return function(){};
}
- 콜백함수(callback *********************)
=> 개념: 사용자가 명시적으로 호출하지 않고
시스템이 특정상황에 호출하는 함수를 의미한다.
=> 주로 이벤트 처리시 사용된다.
=> 구현방법
명시적으로 호출할 때 시스템이 호출할 수 있는
함수명을 전달하는 방법으로 구현이 가능하다.
7. arrow 함수 ( 자바의 lambda와 비슷, -> thin arrow)
- JS에서는 => (fat arrow )이용
- 함수선언식 및 함수표현식 모두 arrow 함수로 변경 가능.
- 종류는 기능에 따른 4가지
가. 파라미터없고 리턴값없는 형태
나. 파라미터있고 리턴값없는 형태
다. 파라미터없고 리턴값있는 형태
라. 파라미터있고 리턴값있는 형태
// arrow 함수
// 가. 파라미터없고 리턴값없는 형태
var fun = function(){console.log("가. 일반 fun");};
fun();
var fun = ()=>{console.log("가. arrow fun");};
var fun = ()=>console.log("가. arrow fun");
fun();
//나. 파라미터있고 리턴값없는 형태
var fun = function(n){console.log("나. 일반 fun", n );};
fun(100);
var fun = (n)=>{console.log("나. arrow fun", n );};
var fun = n=>console.log("나. arrow fun", n );
fun(100);
// 다. 파라미터없고 리턴값있는 형태
var fun = function(){return 100};
var result = fun();
console.log("다. 일반 fun", result);
var fun = ()=>{return 100};
var fun = ()=> 100;
var result = fun();
console.log("다. arrow fun", result);
// 라. 파라미터있고 리턴값있는 형태
var fun = function(n, n2){return n+n2};
var result = fun(10, 20);
console.log("라. 일반 fun", result);
//arrow 변경하시오
var fun = (n, n2)=>{return n+n2};
var fun = (n, n2)=>n+n2;
var result = fun(10, 20);
console.log("라. arrow fun", result);
8. generator 함수
1) 문법
function* fun(){
console.log("1");
yield 값
console.log("2");
console.log("3");
}
2)특징
- 함수를 호출하면 Generator 객체로 반환됨.
호출시 함수코드 블럭이 실행이 안됨.
- 함수코드 블럭을 실행하기 위해서는 next() 호출해야 된다.
- 함수코드 블럭의 여러 실행문을 분할해서 실행할 수 있다.
yield 키워드 이용
- 함수실행 중단
가. 일반함수
function fun(){
console.log("1");
console.log("2");
if(true) return;
console.log("3");
}
fun();
나. generator함수
function* fun(){
console.log("1");
yield
console.log("2");
yield
console.log("3");
}
var gen = fun();
gen.next(); // 1
//중단
gen.return();
3) 용도
- 많은 데이터를 이용해서 처리를 해야되는 작업을
분할해서 작업이 가능하다.
9. 즉시실행함수(즉시호출함수)
==> 함수를 정의하면서 실행됨.
- 문법:
(function(){
console.log();
})();
- JS 라이브러리를 만드는 곳에서 주로 사용됨.
예> jQuery
###########################################################################
###########################################################################
7장. 이벤트
############################################################################
1. 이벤트 개요
1) 용어정리
가. 이벤트(event)
- 사용자 및 시스템(웹브라우저)이 특정상황에 발생시키는 사건(동작) 의미.
예> 사용자가 마우스를 이용해서 버튼을 클릭/더블클릭/드래그/마우스오버/.....
사용자가 키보드를 이용해서 input태그에 값을 입력...
시스템(웹브라우저)가 window(창)에 html을 랜더링하기 위해서
DOM 트리를 만드는데, DOM 트리가 모두 완성됨을 알 수 있는 정보를 얻을 수 있음.
나. 이벤트타입(event type): 이벤트 종류
마우스 이용: click, change, mouseover, mouseout, dbclick,....
키보드 이용: keyup, keydown, keypress
포커스 관련: focus, blur(포커스해제)
submit버튼: submit
시스템 관련: load
다. 이벤트 핸들러 ( event handler )
- 이벤트가 발생했을 때 실제로 처리하는 코드를 가진 함수 의미.
- 예>
function fun(){}
var fun = function(){};
라. 이벤트 소스 ( event source )
- 이벤트가 발생된 태그(버튼)
2) 이벤트 처리 방법 ( 이벤트소스와 이벤트 핸들러 연결작업 )
가. DOM Level 0
- 인라인 방식
=> html 시작 태그에서 이벤트처리.
=> 시작태그에서 on이벤트타입으로 된 속성이용
예> <button onclick="함수()"></button> ==> HTMLButtonElement 객체관리(속성,메서드)
<a href="daum"></a> ==> HTMLAnchorElement 객체관리
=> 특징은 html과 JS 분리가 안된 방식으로 권장 안함.
- 고전 방식
=> 특징은 html과 JS 분리해서 이벤트처리가 됨
=> JS에서 이벤트소스를 얻고 on이벤트타입를 지정해서 처리.
문법:
JS: 이벤트소스.onclick=function(){};
이벤트소스.href="naver";
html: <button id="x">Ok</button>
<button id="y">OK2</button>
=> 이벤트소스 얻는 방법 (button)
document.메서드() 이용
예> 요소(태그) 하나 반환하는 경우
- var result = document.getElementById("x");
..
- var result = document.querySelector("css의 선택자문법");
css의 선택자문법: #id, .class, 태그명, [속성명], 부모 > 자식,
요소 여러개 반환하는 경우 ( 배열로 반환 )
- var result = document.querySelectorAll("css의 선택자문법");
css의 선택자문법: #id, .class, 태그명, [속성명], 부모 > 자식,
나. DOM Level 2
=> 특징은 html과 JS 분리해서 이벤트처리가 됨.
=> JS에서 이벤트소스를 얻고 addEventListener() 메서드로 이벤트 처리함.
문법:
JS: 이벤트소스.onclick=function(){}; // DOM Level 0
JS: 이벤트소스.addEventListener("이벤트타입",이벤트핸들러, useCapture); // DOM Level 2
==>document.querySelector("#x").addEventListener("click",function(){}); //콜백함수
var fun = function(){};
document.querySelector("#x").addEventListener("click", fun); //콜백함수
html: <button id="x">Ok</button>
==> useCapture 개요
- 기본값은 false
- 이벤트 전파와 관련된 동작방식을 변경하는 용도.
a. 자식--->부모
-버블링(bubbling)이라고 부름
b. 부모--->자식
- 캡처링(capturing)이라고 부름
- useCapture 값을 true로 지정하면 부모-->자식으로 전파(캡처링(capturing))으로 동작.
false로 지정하면 자식-->부모으로 전파(버블링(bubbling))으로 동작.
==> 이벤트 전파 방지 가능 (*****)
- 이벤트객체의 stopPropagation() 이용.
예> event.stopPropagation();
3) 이벤트 객체 (*************)
- 이벤트 소스(button)에서 발생되는 이벤트 정보를 관리하는 객체.
- 이벤트 객체를 사용해서 다양한 작업을 할 수 있다. ( 변수, 메서드)
- 이벤트 객체를 얻는 방법은
이벤트 핸들러(함수)에서서 event 변수명으로 얻어온다.
예>
function fun(){
console.log(event);
}
- 속성과 메서드가 제공됨.
속성: event.target
메서드:
이벤트전파방지: event.stopPropagation();
기본동작방지: event.preventDefault();
예> <form>태그의 submit 기능
###########################################################################
###########################################################################
8장. DOM
############################################################################
1. 개요
- Document Object Model
=> Document(html문서)
Object(JS객체)
=> 사용자가 만든 html(태그및속성)문서를
웹브라우저가 랜더링하기 위해서
html내의 요소(태그및속성)에 해당되는 객체(HTMLButtonElement,HTMLAnchorElement)를
생성해서 메모리에 올리고(DOM Tree)
메모리에 올라간 객체를 참조해서 관리하는 방법론.
우리는 메모리에 올라간 JS객체(DOM)의 속성과 메서드를 이용해서
동적인 화면처리가 가능하다.
- DOM 접근방법 ( html 문서를 참조하는 Document 객체를 이용, 실제 참조는 docuement 변수를 이용 )
# 하나의 요소(객체)를 반환
document.getElementById("아이디값");
document.querySelector("css 선택자");
# 여러개의 요소(객체)를 반환 ( 배열 )
document.querySelectorAll("css 선택자");
2. DOM의 값 종류
1) 시작태그와 종료태그의 content(body)
예>
<p>홍길동</p>
<p><span>홍길동</span></p>
<div>홍길동</div>
<div><span>홍길동</span></div>
- content 접근은 innerText / innerHTML 사용한다.
2) <input> 태그같은 폼의 태그의 값
- value 속성 사용한다.
3. 폼과 관련 내용 정리
1) 기본내용
<form action="target.html" method="get|post" id="myForm">
아이디:<input />
<input type="submit" value="로그인" >
<button>로그인</button>
<input type="button" value="로그인" > <== submit 안됨, JS이용하면 가능함.
</form>
2) 동적으로 form의 속성값을 변경할 수 있다.
var f = document.querySelector("myForm"); // HTMLFormELEMENT 객체
f.action="구글";
f.method="get|post"
f.submit();
3) submit은 기본으로 동작됨. 기본동작을 방지할 수 있다.
event.preventDefault();
4. 객체분해할당 ( destructuring , ********************* X 201)
가. 배열 객체 분해 할당
const [변수,변수2]= [값,값2];
나. JSON 객체 분해 할당 (******************)
const {key변수, key2변수}= {key:값, key2:값};
* 함수호출시 객체전달(배열|JSON)하면
함수쪽에서 객체분해할당 문법으로 데이터를 얻을 수 있다. (*********)
###########################################################################
###########################################################################
9장. 클래스
############################################################################
1. 문법
-JS에서는 접근지정자가 없다. ( public,private..)
-JS에서는 class가 키워드가 됨.
HTML에서는 <p class="x"> 태그 속성이 있음.
React.js에서는 충돌됨. 따라서 class대신에 className을 사용한다. 예> <p className="x">
class 클래스명{
변수( 메서드 및 생성자내에서만 선언이 가능. this.변수 문법을 따름 )
메서드
생성자
}
- 클래스를 작성후에는 반드시 객체생성해야 된다.
var 변수 = new 클래스명();
- 메서드명을 변수로 설정 가능
예> let xxx = "setName";
class Person{
[xxx](name){}
}
- 메서드명 앞에 set/get 키워드를 지정하면 메서드가 아닌 변수처럼 동작됨.
예> get getName(){
return this.name;
}
p.getName; // 변수처럼 사용.
- 생성자( constructor )
자바: 클래스명으로 생성자를 작성
오버로딩이 지정 가능
JS: constructor 명으로 생성자를 작성
단 한번만 지정 가능
- 상속 (inheritance )
extends 키워드 이용
부모요소를 자식이 상속받음.(생성자 상속안됨)
부모에서 선언된 변수는 반드시 부모에서 초기화해야 된다. super() 이용
예> class Cat extends Pet{
constructor(name,age,gender){
super(name, age); // 부모에서 초기화 필수
this.name=name; // 에러발생
this.gender=gender;
}
메서드 재정의 가능.(overriding)
static 메서드 지원( 클래스명.메서드 사용, 객체생성과 무관)
generator 함수사용 가능.
###########################################################################
###########################################################################
10장. 모듈
############################################################################
1. 개념
- .js 파일 하나하나를 모듈이라고 부른다.
- 여러 js간에 접근해서 사용하려는 방법이고
만약에 main.js 에서 header.js를 접근하고자 한다면
main.js 에서는 import 사용하고
header.js 에서는 export 해야 된다.
하나의 js에서는 export 를 여러번 할 수 있다.
export default 는 한번만 사용할 수 있다.
export 된 요소를 import 하는 문법은 다음과 같다.
import {요소, 요소2} from '경로';
export default 된 요소를 import 하는 문법은 다음과 같다.
import 요소 from '경로';
export 와 export default 가 혼합된 요소를 import 하는 문법은 다음과 같다.
import 요소, {요소, 요소2} from '경로';
//변형된 import 로서 별칭지정 가능
// export 별칭지정
import {yyy as Y} from './body.js';
// export default 별칭지정
import {default as X} from './body.js';
###########################################################################
###########################################################################
11장. 비동기
############################################################################
1. 동기 vs 비동기
가. 동기
function fun(){
"1출력"
fun2(); function fun2(){ "2출력"} //1시간 작업
"3출력"
}
fun();
실행결과:
1출력
2출력
3출력 ( 1시간 이후에 출력됨 )
나. 비동기
function fun(){
"1출력"
fun2(); //비동기 function fun2(){ "2출력"} //1시간 작업
"3출력"
}
fun();
실행결과:
1출력
3출력
( 1시간 이후에 출력됨 )
2출력
2. 비동기 만드는 방법
가. Promise 객체 이용
- 문법: 함수를 작성할 때 Promise객체를 반환한다.
예>
#일반함수
function fun(){
}
#비동기 함수
function fun(){
//성공시 호출함수: resolve
//실패시 호출함수: reject
return new Promise(function(resolve, reject){});
}
- 실제 구현
resolve 호출에 대한처리: .then(function(){})
reject 호출에 대한처리: .catch(function(){})
- then().then() 체인 가능
나. async/await 키워드 이용 (*************)
-내부적으로 Promise 사용됨.
-문법:
# 일반함수
function fun(){
}
# 비동기함수
async function fun(){
"1출력"
///////////////
xxx = await fun2(); // await 함수가 실행이 끝날때까지 fun() 실행을 중지시킴.
///////////////
"2출력"
}
var result = fun(); // result 값이 Promise 객체이다.
###########################################################################
###########################################################################
12장. Ajax
############################################################################
1. AJAX ( Asynchronous Javascript And Xml ) - 에이잭스, 아작스
- 비동기 + 자바스크립트 + xml(데이터포맷의미, 현재는 JSON)
==> 클라이언트에서 JS 이용해서 서버와 비동기로 데이터 통신(JSON)을 하는 방식.
2. 서버와 통신하는 2가지 방법
1) 비 Ajax
요청: a태그, 새로고침,
명시적인url입력후엔터,
form의submit
웹브라우저 --------------------> 서버
<-------------------
응답: html
-응답을 html로 받으면 웹 브라우저의 전체 화면이 리로딩 됨.
- 1M가 되는 전체 html을 서버에서 받아야 된다. ( 네트워크 부하가 심하다)
- 전체 html을 받기 때문에 깜박이 있음. 사용자 UI/UX 매우 불편하다.
2) Ajax
요청: JS이용 ( XMLHttpRequest 객체)
웹브라우저 --------------------> 서버 ( reqres.in )
<-------------------
응답: JSON
예> {mesg:"logout">
- 응답을 JSON로 받으면 웹 브라우저의 전체 화면이 리로딩 안됨.( 깜박거림이 없음)
- 크기가 매우 작은 JSON 데이터를 받는다. ( 네트워크 부하가 거의 없다.)
- 전체 html을 받지 않기 때문에 깜박임이 없음. 사용자 UI/UX 매우 편함.
- React 같은 Front-end 프레임워크는 내부적으로 Ajax 로 서버와 연동함.
3) Ajax 구현
가. 명시적인 XMLHttpRequest 이용 ( OLD 방법, 사용안함 )
- https://reqres.in/api/users/2
나. async + await + fetch() 이용 (***************)
- https://reqres.in/api/users/2
#####################################
React.js에서 매우 많이 사용되는 코드 패턴
1. arrow 함수
2. 객체분해할당(특히 JSON )
3. async, await 이용한 비동기처리
==> 서버와 연동시 필수
4. fetch() 함수
==> 서버에 요청하는 함수
==> 일반적으로 async, await와 같이 사용.
5. 백티 사용
6. 모듈
- import 및 export
7. Array객체 메서드
- map함수
- filter함수
- foreach함수
'Programming > HTML & CSS & JavaScript' 카테고리의 다른 글
| jQuery 2일차 - Traversing(필터링), Attributes, Manipulation, Util (0) | 2024.05.20 |
|---|---|
| jQuery 1일차 - 설치, ready, DOM(this), selectors, 2차필터링 (0) | 2024.05.16 |
| js 6일차 - 비동기, Ajax (0) | 2024.05.16 |
| js 6일차 - 클래스, 모듈 (0) | 2024.05.16 |
| js 5일차 - DOM(DOM, 객체분해할당) (0) | 2024.05.09 |