SSR vs CSR
| SSR(Server Side Rendering) | CSR(Client Side Rendering) | |
| 방식 | 서버사이드 렌더링의 약자로 서버로부터 완전하게 만들어진 html파일을 받아와 페이지 전체를 렌더링 하는 방식이다. | 클라이언트 사이드 렌더링이란 사용자의 요청에 따라 필요한 부분만 응답 받아 렌더링 하는 방식이다. |
| 장점 | SEO, 검색엔진 최적화: 검색엔진이 웹을 크롤링 하면서 페이지에 컨텐츠 색인을 생성하는 과정 어플리케이션은 화면을 구성하는 각각의 페이지가 있기때문에 SEO에 유리 빠른 초기 로딩(사용자가 기다리는 시간이 적다) |
빠른 속도(초기화면 랜더링시X) 필요한 부분만 요청하고 응답하기 때문에 서버 부화 감소 사용자 친화적(깜박임X) |
| 단점 | 요청시마다 새로고침 → 깜박임 생김 서버부화: 새로운 요청이 생길때마다 바뀌지 않아도 되는 부분도 렌더링된다. |
SEO불리 → 자바스크립트를 사용하여 사용자와 상호작용 후에 페이지 내용 로드 초기로딩 속도 느림 → 모든 js 파일을 다운 받아와야함 |
자바스크립트
1. 자바스크립트
자바스크립트(JavaScript)는 객체(object) 기반의 스크립트 언어이다.
HTML로는 웹의 내용을 작성하고, CSS로는 웹을 디자인하며, 자바스크립트로는 웹의 동작을 구현할 수 있다.
자바스크립트는 주로 웹 브라우저에서 사용되나, Node.js와 같은 프레임워크를 사용하면 서버 측 프로그래밍에서도 사용할 수 있다.
현재 컴퓨터나 스마트폰 등에 포함된 대부분의 웹 브라우저에는 자바스크립트 인터프리터가 내장되어 있다.
+) 인터프리터
자바와 같은 언어는 소스 파일을 작성한 후, 해당 파일을 컴파일(compile)하여 사용자가 실행할 수 있는 실행 파일(.exe)로 만들어 사용한다.
하지만 인터프리터 언어는 이러한 컴파일 작업을 거치지 않고, 소스 코드를 바로 실행할 수 있는 언어를 의미한다.
자바스크립트는 웹 브라우저에 포함된 자바스크립트 인터프리터가 소스 코드를 직접 해석하여 바로 실행해 준다.
*인터프리터 언어 : 한줄읽고 한줄 번역하는 것
*컴파일러 언어 : 실행전 모든 번역본을 만들어내는것
2. 자바스크립트 실행환경
브라우저와 Node.js 모두 js 엔진을 내장하고있다.
브라우저는 웹페이지 렌더링을 하는 것이 주된 목적이지만 Node.js 는 서버 개발 환경을 제공하는 것이 주된 목적이다.
(파일을 생성하고 수정하는 등의 동작은 브라우저에서 보안 상의 이유로 금지되어 있다.)
+) 실행환경에 따라 자바스크립트가 사용가능한 기능
*브라우저 : HTML 요소를 조작하고 웹페이지를 동적으로 업데이트할 수 있음
*Node.js : 서버측에서 파일시스템을 액세스하고, 네트워크 요청을 수행하고, 서버측 렌더링을 처리할 수 있습니다.
3. 자바스크립트 적용
| 인라인 스크립트 | js 코드를 HTML 문서의 script 태그 사이에 배치하여 페이지에 직접 추가 |
| 외부 스크립트 | 자바스크립트 코드를 확장자가 .js인 외부 파일을 넣고 script 태그의 속성을 사용하여 HTML 문서에 포함시킬 수 있음 |
| js Console | 브라우저에는 js코드를 실행할 수 있는 js 콘솔이 있음 |
자바스크립트 변수
1. 변수 선언 방식
| 변수 선언 | 분류 | 규칙 |
| var | 전역변수 | 중복 선언이 가능. |
| let | 지역변수 | 중복 선언 불가능, 재할당 가능 |
| const | 상수, 지역변수 | 중복 선언 불가능, 재할당 불가능, 반드시 선언과 초기화를 동시에 진행 |
2. 변수의 타입
기본 자료형(primitive type)과 참조 자료형(reference type)이 있다.
(1) 기본 자료형 : 변수에 값(value) 자체가 담긴다.
*number, 숫자
*string, 문자열
*boolean, 논리값
*null, 널
*undefined, 정의되지 않은 값
*symbol, 심벌
(2) 참조 자료형 : 보관함의 주소(reference)가 담긴다.
*object, 객체
3. 호이스팅
함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말한다.
var 변수 선언과 함수선언문에서만 호이스팅이 일어난다.
var 변수/함수의 선언만 위로 끌어 올려지며, 할당은 끌어 올려지지 않는다.
let/const 변수 선언과 함수표현식에서는 호이스팅이 발생하지 않는다.
자바스크립트 연산
*비교 연산자
| == | 왼쪽 피연산자와 오른쪽 피연산자의 값이 같으면 참을 반환함. |
| === | 왼쪽 피연산자와 오른쪽 피연산자의 값이 같고, 같은 타입이면 참을 반환함. |
*논리 연산자
| && | 논리식이 모두 참이면 참을 반환함. (논리 AND 연산) false값 찾아서 반환. false 없으면 마지막값 |
| || | 논리식 중에서 하나라도 참이면 참을 반환함. (논리 OR 연산) true값 찾아서 반환. true 값이 없으면 맨마지막값 |
| ! | 논리식의 결과가 참이면 거짓을, 거짓이면 참을 반환함. (논리 NOT 연산) |
*typeof 연산자
| 값 | typeof 연산자의 결과값 |
| 숫자, NaN | "number" |
| 문자열 | "string" |
| true, false | "boolean" |
| null | "object" |
| undefined | "undefined" |
| 함수 | "function" |
| 함수가 아닌 객체 | "object" |
let myBool = true;
let myStr = "";
let notDef;
let myNull = null;
console.log(typeof myBool); // boolean
console.log(typeof myStr); // string
console.log(typeof notDef); // undefinded
console.log(typeof myNull); // object
자바스크립트 함수
1. 함수 선언법
| 함수 선언식 | 함수 표현식 |
| 일반적인 프로그래밍 언어에서의 함수 선언과 비슷한 형식 | 정의한 function을 별도의 변수에 할당하는 것 자바스크립트에서는 함수도 객체로 취급받기에 가능한 표현 |
| function 함수명() {}식으로 선언 가능 | let 함수명 = function() {}식으로 선언 가능 |
+) 함수 선언식과 표현식 차이점
- 함수 선언문의 경우 반드시 함수명이 정의돼 있어야 하는 반면, 함수 표현식은 함수명의 정의가 필수는 아니다.
- 함수 선언식은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅에 영향을 받지 않는다.
*함수 선언식
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Document</title>
</head>
<body>
</body>
<script>
function sayHello() { // hoisting
console.log("Hello");
}
function printSum(a, b) {
console.log(a + b);
}
sayHello();
printSum(100, 200);
printSum("asdf", "qwer");
</script>
</html>
*함수 표현식
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Document</title>
</head>
<body>
</body>
<script>
let myFunc = function(x) {
console.log(x);
}
let youtFunc = myFunc;
myFunc("hello");
youtFunc("world");
</script>
</html>
2. callback 함수
파라미터로 함수를 전달받아, 함수의 내부에서 실행하는 함수이다.
콜백함수는 이름이 없는'익명의 함수'를 사용, 함수의 내부에서 실행되기 때문에 이름을 붙이지 않아도 된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Document</title>
</head>
<body>
</body>
<script>
function myCall(f) {
f();
}
let f = function() {
console.log("안녕");
}
myCall(f);
</script>
</html>
