반응형
Section 0. 준비하기
HTML과 CSS
- 마크업: 문서나 데이터를 처리하기 위해 문서에 추가되는 정보
- HTML: 마크업 언어의 한 종류 - 웹, 앱에 사용 → 웹사이트의 뼈대를 구성하기 위해 사용되는 마크업 언어
- Tag: <></> 태그는 열었으면 꼭 닫아줘야 함 (예외:
등) - 웹사이트의 뼈대를 구성하는 태그
- head 태그에 웹사이트의 속성이 들어감 (제목, 설명 등) → 속성: 메타 데이터
- body 태그 안에 들어간 내용이 사용자가 보게 되는 컨텐츠
<html> <head> <title></title> </head> <body> </body> </html> - SPA(Single Page Application) (↔ MPA)
- 페이지가 하나 = HTML 파일이 하나 - 바디 태그 내부를 동적으로 채워넣음 (리액트가 채워넣는 역할을 함)
- 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); // 출력 결과 4JavaScript의 연산자
- 대입 연산자 (Assignment operator): 항상 오른쪽에서 왼쪽으로 흘러감, ==
- 산술 연산자와 합쳐진 형태: +=, -=, *=, /= 등
- 산술 연산자: 사칙 연산자(+-*/), %(나머지), **(지수 연산) 등
- 증감 연산자: ++, --
- postfix 방식: a++ (반환 후 증가)
- prefix 방식: ++a (증가 후 반환)
- 관계 연산자 Relational operators (비교 연산자 Comparison operators): <, >, <=, >=
- 동등 연산자 (Equality operators): ==, !=
- 일치 연산자 (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(실습) 개발환경 설정하기
- node.js와 npm 설치하기 (node.js를 설치하면 npm도 자동으로 설치됨)
- vs code 설치하기 (IDE, 통합 개발 환경)
반응형
'웹 Web > 리액트 React' 카테고리의 다른 글
| [리액트 React] 처음 만난 리액트 Section 1. 리액트 소개, Section 2. 리액트 시작하기 (0) | 2023.03.24 |
|---|