* 웹 어플리케이션 개발 ( 웹사이트 )
1. web application
- 화면 필요 ( 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}
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 객체가 관리 (***************)
Set/Map 같은 컬렉션 제공됨(ES6)
-JSON ==> object 객체가 관리
2> BOM ( Browser Object Model)
- 웹 브라우저 관련 객체
- 종류
Window 객체
Screen 객체
Histroy 객체
Location 객체
Navigator 객체
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
'[study]이론정리 > HTML & CSS & JavaScript' 카테고리의 다른 글
| js 2일차 -객체(2) _ BOM (Browser Object Model) (0) | 2024.05.03 |
|---|---|
| js 2일차 - 객체(1) _ 데이터관련, spread 연산자 + 얕은복사, 깊은복사 (0) | 2024.05.03 |
| js 1일차 - 연산자, 문장, 객체 (1) | 2024.05.02 |
| js 1일차 - 개요, 식별자, 변수, 상수 (1) | 2024.05.02 |
| CSS 총정리 (2) | 2024.05.02 |
