HTML과 CSS
HTML(Hyper Text Markup Language) : 웹사이트의 뼈대를 구성하기위해 사용하는 마크업 언어 / Tag
<html>
<head>
//웹사이트의 속성
<title>경험저장소</title>
</head>
<body>
//실제로 웹사이트에서 보이는 콘텐츠
</body>
</html>SPA(Single Page Application) : 하나의 페이지만 존재하는 웹사이트, 어플리케이션
CSS(Cascading Style Sheets) : 웹사이트의 디자인 요소
JavaScript 소개 및 자료형
JavaScript(ECMAScript) : 웹사이트의 동적요소, 주로 웹사이트에서만 사용되어왔으나 최근에는 ReactNV나 Electron에서도 사용됨, 프로그램이 실행되는 런타임에 코드가 실행됨(script 언어의 특징)
자료형(Data Type)
//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 obj = {a:"apple", b:"banana"};//Number 타입으로만 이루어진 배열
let arr1 = [1,2,3,4,5];
//String 타입으로만 이루어진 배열
let arr2 = ["h", "e", "l", "l", "o"];
//Number 타입과 String 타입을 함께 사용한 배열
let arr3 = [1, "h", 2, "i"];
//다양한 자료형들을 함께 사용한 배열
let arr4 = [true, 1, undefined, false, "h", 2, null, "i"];
console.log(arr1[0]); //1
console.log(arr2[1]); //e
console.log(arr3[2]); //2
console.log(arr4[3]); //false//값으로 String 타입만을 사용한 객체
let obj1 = {a:"apple", b:"banana", c:"carrot"};
//값으로 Number 타입만을 사용한 객체
let obj2 = {a:1, b:2, c:2};
//값으로 다양한 자료형들을 함께 사용한 객체
let obj3 = {a:"hello", b:100, c:[1,2,3,4]};
//값으로 객체를 사용한 객체
let obj4 = {
a:{a1:1, a2:2},
b:{b1:3, b2:4},
c:{c1:5, c2:6},
}
console.log(obj1['a']); //apple
console.log(obj2.a); //1
console.log(obj3['c']); //[1, 2, 3, 4]
console.log(obj4.c.c2); //6
JavaScript의 연산자
연산자(Operator)
//대입연산자(Assignment operator) : 좌 <- 우 방향
let a = 10;
let b = 20;
console.log(a); //a
console.log(b); //b
//산술연산자(Arithmetic operators) : +, -, *, /, %, **
let a = 2;
let b = 4;
console.log(a + b); //6
console.log(a - b); //-2
console.log(a * b); //8
console.log(a / b); //0.5
console.log(a % b); //2
console.log(a ** b); //16
a += b;
console.log(a); //6
a -= b;
console.log(b); //2
a *= b;
console.log(a); //8
a /= b;
console.log(a); //2
//증가연산자(++), 감소연산자(--)
let a = 1;
let b = a++;
console.log(a, b); //2,1
let c = 1;
let d = ++c;
console.log(c, d); //2, 2//관계연산자(Relational operators)
//비교연산자(Comparison operators) : <, >, <=, >=
let a = 1;
let b = 2;
console.log(a < b); //true
console.log(a > b); //false
console.log(a <= b); //true
console.log(a >= b); //false
//동등연산자(Equality operators) : 값 : ==, !=
//일치연산자(Strict equality operators) : 값과 자료형 : ===, !==
let a = 1;
let b = '1';
console.log(a == b); //true
console.log(a != b); //false
console.log(a === b); //false
console.log(a !== b); //true
//이진논리연산자(Binary logical operators) : &&, ||
//조건부연산자(Conditional operator), 삼항연산자(Ternary operator) : 조건식? true:false
JavaScript의 함수
함수란 입력(파라미터(parameters), 인자(arguments))을 받아서 정해진 출력을 하는 것
//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 : javascript로 네트워크 어플리케이션을 개발가능하게 하는 환경
npm : node.js를 위한 패키지 매니저, 외부 패키지 버전과 의존성 관리, 삭제 등 관리
( macOS : terminal, windows : powershell )
$ node --version$ npm --version
IDE (Integrated Development Environment) : 통합개발환경
반응형
'REACT > [inflearn] 처음만난 리액트' 카테고리의 다른 글
| 6강. State와 Lifecycle (0) | 2022.11.03 |
|---|---|
| 5강. Components and Props (0) | 2022.11.03 |
| 4강. Rendering Elements (0) | 2022.11.02 |
| 3강. JSX (0) | 2022.10.28 |
| 1강. 리액트 소개 / 2강. 리액트 시작하기 (0) | 2022.10.26 |