페이지가 하나 = HTML 파일이 하나 - 바디 태그 내부를 동적으로 채워넣음 (리액트가 채워넣는 역할을 함)
MPA와 SPA의 구조
CSS: 웹 사이트에 레이아웃, 디자인을 입히는 언어
JavaScript 소개 및 자료형
JavaScript (ECMAScript): 웹 사이트에 생명을 불어넣는 역할 - 스크립트 언어의 한 종류 → 웹/앱(리액트 네이티브) 모두 사용
스크립트 언어(Script Language): 프로그램이 실행되는 런타임에 소스코드가 해석됨 (C, Java 같은 컴파일 언어는 컴파일을 통해 소스코드가 해석되고 실행 가능한 형태로 변환됨)
ES6(ES2015) 버전에서 표준 JS의 기반이 마련됨
JS 자료형(Data type): 변수를 선언할 때가 아닌 변수에 데이터가 대입되는 시점에 자료형이 결정됨 → Dynamic Typing (동적 타이핑)
var 변수명으로 선언 (let 선언과는 차이가 있음)
number type, string type, boolean type, null type, undefined type, array type, object type
변수 선언만 하고 값을 대입하지 않으면 undefined 타입
배열에 다양한 자료형의 변수가 함께 들어갈 수 있음
object type: 객체를 다루기 위한 자료형 → 객체: key, value로 이루어진 쌍의 집합. 맵 혹은 해시와 비슷함. key는 문자열, value는 아무 자료형이나 됨
obj[’key’] 또는 obj.key로 접근
// Number type
let n1 = 1234;
let n2 = 5.678;
// String type
let s1 = "hello";
let s2 = 'world';
// Boolean type
let b1 = true;
let b2 = false;
// Null type
let n = null;
// Undefined type
let u1;
let u2 = undefined;
// Array type
let arr = [1, 2, 3, 4];
// Object type
let obj1 = {a: "apple", b: "banana", c: "carrot"}; // 값으로 String 타입만을 사용한 객체
let obj2 = { // 값으로 객체를 사용한 객체
a: {a1: 1, a2: 2},
b: {b1: 3, b2: 4},
};
console.log(obj1['a']); // 출력 결과 apple
console.log(obj2.b.b2); // 출력 결과 4
JavaScript의 연산자
대입 연산자 (Assignment operator): 항상 오른쪽에서 왼쪽으로 흘러감, ==
일치 연산자 (Strict equality operators): ===, !== → 값뿐만 아니라 자료형도 같은지 검사
이진 논리 연산자 (Binary logical operators): &&, || 반환 값도 boolean
조건부 연산자 Conditional operators, 삼항 연산자 Ternary operators: 조건식 ? true일 경우 : false일 경우
JavaScript의 함수
함수: 입력을 받아서 정해진 출력을 하는 것
입력: 파라미터 / 인자
자바에서 함수를 정의하는 방법
function statement 사용
arrow function expression 사용
JS 함수를 직접 만들 일은 잘 없지만 리액트 컴포넌트 중 함수 컴포넌트가 하나의 JS 함수임을 기억하기
// function statement를 사용
function sum(a, b){
return a+b;
}
console.log(sum(10, 20)); // 출력 결과 30
// arrow function expression을 사용
const multiply = (a, b) => {
return a*b;
}
console.log(multiply(10, 20)); // 출력 결과 200
