-출처: 소플의 처음 만난 리액트
# HTML
= 웹사이트의 구조를 만드는 언어
- 태그
# SPA
= Single Page Application
MPA vs. SPA
수십 수만개의 페이지 X ➡ 하나의 페이지 O
: React 에 의해 동적으로 content 내부를 채워넣게 된다.
- 전통적인 방식의 웹 애플리케이션은(왼쪽) : 사용자가 페이지를 요청할 때마다 새로운 페이지가 로딩되어 화면에 나타나는 것이다. 그리고 각 페이지는 HTML 파일을 가지고 있다.
- 반대로 오른쪽은 단 하나의 페이지만 존재한다. 여기에서 페이지가 하나라는 것은 HTML 파일이 하나라는 뜻이다.
처음에는 이 HTML 파일의<body>태그의 내부가 텅 비어 있다가 해당 페이지에 접속할 때, 그 페이지에 해당하는 콘텐츠를 가져와서 동적으로<body>태그 내부를 채워 넣게 된다. 참고로 리액트가 이렇나 역할(이곳을 채워 넣는) 을 한다고 생각하면 된다.
# CSS
= Cascading Style Sheets
= 웹사이트의 디자인을 입히는 역할을 하는 언어
- 레이아웃
- 글꼴
- 색상
HTML로 웹사이트의 구조를 만들었다면,
그 위에 CSS로 웹사이트의 디자인을 입혀야
아름다운 웹사이트가 완성이 됩니다.
CSS는 그 속성들이 워낙 많고 복잡해서
일일이 외워서 사용하려면 시간이 꽤 오래 걸립니다.
주요 CSS 속성들만을 요약해서 배우면 됩니다.
(15장에서 자세히 다루고 있음)
# ES6
ES는 자바스크리브의 정식 명칭인 ECMAScript를 의미하고, 뒤에 나오는 숫자는 버전을 의미합니다. ES6는 2015년에 발표되었기 때문에 ECMAScript 2015 또는 ES2015라고 부르기도 합니다. 이 강의에서는 ES6로 통일해서 부르도록 하겠습니다.
자바스크립트의 자료형
자료형은 프로그래밍 언어에서 데이터를 다루기 위해 미리 정해 놓은 데이터의 유형입니다.
- 정수
- 배열
동적 타이핑 dynamic typing
모든 변수들은 하나의 자료형을 갖게 되는데, 일반적인 프로그래밍 언어에서는 변수를 선언하는 시점에 해당 변수의 자료형이 결정됩니다. 그런데 자바스크립트에서는 변수를 선언할 때가 아닌 변수에 데이터가 대입되는 시점에 해당 변수의 자료형이 결정됩니다. 이처럼 동적으로 자료형이 결정되는 것을 동적 타이핑이라고 부릅니다.
var i = 100;여기서 var은 변수를 의미하는 영단어인 variable을 말합니다. let을 사용하기도 합니다. 두 방식의 차이점에 대해 설명하면 내용이 어려워질 수 있기 때문에 따로 다루지는 않겠습니다. 변수를 선언할 때 되도록이면 let을 사용하도록 하겠습니다.
//number
let n1 = 1234;
let n2 = 5.678;
//string
let s1 = "hello";
let s2 = "world";
//boolean
let b1 = true;
let b2 = false;
//null
let n = null;
//undefined
let u1;
let u2 = undefined;
//array
let arr=[1,2,3,4];
//object
let obj = {a: "apple", b:"banana", c: "carrot"}- 변수에 값이 대입되는 순간 동적 타이핑 방식으로 해당 변수의 자료형이 결정됩니다.
- 그래서 undefined타입은 값이 아직 정의되지 않은 상태를 의미하고, Null 타입은 값이 정의되긴 했는데 정의된 그 값이 null인 것을 의미합니다.
//number 타입으로만 이루어진 배열
let arr1 = [1, 2, 3, 4, 5];
console.log(arr[0]);
// 출력 결과: 1
//값으로 String 타입만을 사용한 객체
let obj1 = { a: "apple", b: "banana", c: "carrot" };
//값으로 객체를 사용한 객체
let obj2 = {
a: { a1: 1, a2: 2 },
b: { b1: 3, b2: 4 },
c: { c1: 5, c2: 6 },
};
console.log(obj1['a']);
// 출력 결과: apple
console.log(obj1.a);
// 출력 결과: apple
console.log(obj2.c.c2);
// 출력 결과: 6자바스크립트의 연산자
- 대입 연산자
=
항상 오른쪽에서 왼쪽 방향으로 흐름이 흘러갑니다. 수학에서의 equal과는 그 의미가 다르다고 볼 수 있습니다. equal의 오른쪽에 있는 값을 equal의 왼쪽에 대입시킨다고 해석하면 됩니다.
let a = 10;
let b = 20;- 산술 연산자
+-*/%**
console.log(a+b);
//출력 결과: 6
console.log(a-b)
//출력 결과: -10
console.log(a*b);
//출력 결과: 200
console.log(a/b);
//출력 결과: 0.5
console.log(a%b);
//출력 결과: 10
console.log(a**b);
//출력 결과: 10을 20번 거듭제곱한 결과- 산술연산자는 대입 연산자와 함께 사용되는 경우가 많습니다. 따라서 이 둘을 합쳐서 간편하게 쓸 수 있도록 만든 대입 연산자들이 있습니다.
let a = 2;
let b = 4;
a += b; // a = a+b
console.log(a);
// 출력 결과: 6- 증감연산자
증가 연산자++, 감소 연산자--
postfix 방식: 증감연산자를 변수 뒤에 붙이는 방식
prefix 방식: 변수의 앞에 붙이는 방식
let a = 1;
let b = a++;
console.log(a, b)
// 출력 결과: 2, 1
let c = 1;
let d = ++c;
console.log(c,d)
// 출력 결과: 2, 2- 관계 연산자
<><=>=
= 비교 연산자
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- 동등 연산자
==!=
: 두 개의 변수의 값이 같은지 다른지 판단할 수 있게 해줍니다. - 일치 연산자
===!==
: 두 개의 변수가 자료형까지 같은지 엄격하게 비교할 수 있습니다.
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);
//출력 결과:false- 이진 논리 연산자
&&||
let a = true;
let b = false;
console.log(a&&b);
//출력 결과: false
console.log(a||b);
//출력 결과: true- 조건부 연산자
= 삼항 연산자
let a = true;
let b = false;
console.log(a ? 1 : 2);
//출력 결과: 1
console.log(b ? 3 : 2);
//출력결과: 2자바스크립트의 함수
프로그래밍에서 함수는 입력을 받아서 정해진 출력을 하는 것을 의미합니다.
- 파라미터 or 인자: 함수의 입력
- 함수를 정의하는 방법
1) function statement
2) arrow function expression
//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 설치 ( JavaScript runtime )
- JavaScript 로 네트워크 애플리케이션을 개발할 수 있게 해주는 환경
- 원활한 실습 진행을 위해선 왼쪽의 안정화된 버전을 선택하면 된다.(오른쪽이 가장 최신 버전)
✔ npm 설치 ( node package manager )
( Node.js를 설치하면 자동으로 설치됩니다 )
- Node.js 를 위한 패키지 매니저
- 패키지 매니저 :
프로젝트에서 필요로 하는 다양한 외부 패키지들의 버전과
의존성을 관리하고 편하게 설치 및 삭제를 할 수 있게 도와주는 역할을 합니다.
- Windows의 경우, Powershell을 열어 다음 코드로 npm이 정상적으로 설치되었는지 버전을 확인할 수 있습니다
PS C:\Users> node --version
v20.10.0
PS C:\Users> npm --version
10.2.3
PS C:\Users> ✔ VS Code 설치
- Visual Studio Code (마이크로소프트 사, 무료)
- VS Code와 같은 프로그램을 IDE라고 합니다.
- IDE ( Integrated Development Environment ) 통합개발환경
- 쉽게 설치해서 사용할 수 있는 수많은 플러그인이 있기 때문에
단순히 Javascript 나 React 개발뿐만 아니라 다양한 프로그래밍 언어로 코딩할 때도 사용이 가능합니다
📍정리
- HTML : 웹사이트의 구조 ( SPA = Single Page Application )
- CSS : 웹사이트의 디자인
- 자바스크립트 : 웹페이지에서 동적인 부분을 구현하기 위한 스크립트 언어
- 개발환경 구축하기
✔ Node.js ( ⊃npm )
✔ VS Code
