✏️

리액트 선수지식 / HTML, CSS, JavaScript 본문

React

리액트 선수지식 / HTML, CSS, JavaScript

콩세 2023. 3. 22. 10:51

React 선수지식

 

HTML : 웹 사이트의 뼈대를 구성하기 위해 사용하는 마크업 언어

 

HTML에서는 Tag를 사용해 웹사이트의 구조와 내용을 채워넣는다.

ex) <html> </html> : 태그는 열었으면 꼭 닫아줘야 함!

 

태그의 종류

<html> : html의 시작과 끝을 나타냄

< head> : html의 머리부분 - 웹사이트의 속성 (제목, 설명 등 메타데이터)

     <title> : haed 태그 안에서 웹사이트의 제목을 나타내는 태그

<body> : html의 몸통부분 / head태그 다음에 나오며 웹사이트의 contents가 들어감.(실제로 웹사이트에서 보이는 콘텐츠)

 

페이지를 이동하게 될 경우 html 파일도 변경됨

복잡한 웹사이트의 경우 html 파일이 아주 많아지게 됨. 관리에 어려움

이 어려움을 해결하기 위해 등장한 것 : Single Page Application(SPA)

 

 

SPA : 하나의 페이지만 존재하는 웹사이트/웹 어플리케이션

페이지가 하나 = HTML파일이 하나

처음에는 HTML의 body태그가 비어있다가

해당 페이지에 접속할 때 그 페이지에 해당하는 content가

동적으로 body태그 내부를 담당하게 됨

 

리액트가 이렇게 채워넣는 역할을 한다!

 

 

 

 

 

 

 

 

 

CSS : 웹사이트의 레이아웃, 글꼴, 색상 등 디자인을 입히는 언어

 

 

웹사이트가 HTML만으로 존재한다면 버튼을 누르거나 정보를 입력하는 동적인 작업을 처리할 수 없음

동적인 작업을 처리하기 위해 JavaScript를 사용한다.

JavaScrpt : 스크립트 언어의 한 종류 / 프로그램이 실행되는 런타임이 코드가 해석되고 실행된다.

 

JavaScript 문법

자료형 : 데이터를 다루기 위해 정해놓은 데이터 타입

모든 변수들은 하나의 자료형을 가지게 된다. 일반적인 경우에는 변수를 선언하는 시점에 변수의 자료형이 정해진다.

하지만 JavaScript는 변수에 데이터가 대입되는 시점에 변수의 자료형이 정해진다 = 동적 타이핑 (Dynamic Typing)

 

변수 선언 시 var 또는 let을 사용한다.

- JavaScript 자료형

Number type : 숫자를 다루는 자료형. 정수, 소수 등

String type : 문자열. ex)let n1 = "hello"; / 문자열의 양 끝을 ''또는 ""로 묶어줘야 한다.

Boolean type : true / false

Null type : 값이 null / 값은 정의되었지만 정의된 값이 null인 경우

Undefined type : 변수를 선언만 하고 값을 대입하지 않은 경우 / 값이 정의되지 않은 경우

Arrary type : 배열은 나타내는 자료형 / 여러 숫자나 문자가 모여있는 것. 다양한 자료형이 함께 들어갈 수 있다.

Object type

 

- JavaScript 연산자

대입 연산자 : 변수에 값을 대입하기 위해 사용

     항상 오른쪽에서 왼쪽 방향으로 흐름이 흘러간다.

     ex) let a = 10;  = 10을 a에 대입

사칙 연산자 : 덧셈, 뺄셈, 곱셈, 나눗셈

산술 연산자 : 사칙연산자 + %(나머지 연산자) + **(지수 연산자)

증감 연산자 : 증가 연산자 ++ / 감소 연산자 --

관계 연산자(비교연산자) : 변수들의 값을 비교 / <, >, <=, >= / 변수 값의 크고 작음을 비교

동긍 연산자 : 변수 값이 같은지 다른지 비교

일치 연산자 : 변수의 값, 자료형까지 모두 같은지 비교 / ===, !==

이진 논리 연산자 : boolean값을 비교하는 연산자 / &&, ||

조건부 연산자(삼항연산자) : 조건에 따라 결과가 2개로 나누어짐

     ex) 조건식 ? true일경우값:fals일경우값

 

- JavaScript 함수

프로그래밍에서 함수 : 입력을 받아서 정해진 출력을 하는 것

함수의 입력 = 파라미터(parameters) 또는 인자(arguments)

자바스크립트에서 함수는 크게 두 가지

1) function statement 사용

function sum(a, b) {
     return a + b;
}
console.log(sum(10, 20));
// 출력 결과 : 30

2) arrow function expression 사용

const multiply = (a, b) => {
     return a * b;
}
console.log(multiply(10, 20));
// 출력 결과: 200

 

'React' 카테고리의 다른 글

React project build하기  (0) 2023.07.06
React project 초기 세팅  (0) 2023.07.05
JSX란? / JSX의 장점 및 사용법  (0) 2023.04.06
리액트란? / 리액트의 장단점  (0) 2023.03.22
React 입문  (0) 2023.03.22
'React' Related Articles more