[Web] 기본 지식 : HTML, CSS, JavaScript, Node.js, React 란?

💡 웹 = HTML + CSS + JavaScript

 

• HTML은 문단, 제목, 데이터 표를 정의하거나 페이지에 이미지와 동영상을 삽입하는 등 웹 콘텐츠를 구성하고 의미를 부여하는 데 사용하는 마크업 언어입니다.
• CSS는 배경색과 글꼴을 설정하고 콘텐츠를 여러 열에 배치하는 등 HTML 콘텐츠에 스타일을 적용하는 데 사용하는 스타일 규칙 언어입니다.
• JavaScript는 동적으로 변경되는 콘텐츠를 만들고, 멀티미디어를 제어하고, 이미지에 애니메이션을 적용하는 등 거의 모든 작업을 수행할 수 있는 스크립팅 언어입니다.

(출처 : https://developer.mozilla.org/ko/docs/Learn/JavaScript/First_steps/What_is_JavaScript)

💡 HTML

: 웹페이지의 구조를 결정하는 언어

• HyperText : 관련 항목을 연결하기 위해 구성된 텍스트 (이미지 삽입 등)
• Markup : 하드카피나 소프트카피로 출력될 모든 활자에 대한 스타일 가이드
• Language : 컴퓨터 시스템이 명령어를 이해하고 해석할 때 사용하는 언어

(1) 특징

• 상호작용이나 예쁘게 꾸미기 위해 자바스크립트나 CSS라는 보조기술을 함께 사용
• (CSS : 꾸미기 & Javascript : 상호작용)

(2) 구성

• 태그 : 텍스트나 이미지 등의 삽입을 마크업이라는 기능을 통해 특정한 방식으로 표현하는 것이 가능한데, 이때 사용하는 것(Ex.시작 태그, 종료 태그)
• 요소 : 시작 태그, 글자, 내용, 종료 태그로 이루어진 조합
• 속성 : 시작 태그 안에 위치 & 요소에 관한 추가 정보 전달 및 스타일 지정, 자바스크립트를 사용한 조작과 같은 작업의 수행을 돕는 속성 값을 사용

💡 JavaScript

: HTML과 CSS로 구성된 웹 페이지를 동적으로 만들어주는 언어

 

(1) 기초 문법

자바스크립트(JavaScript) 기초 및 문법ㅣ정의, 기본 문법, 변수, 함수 - 코드스테이츠 블로그

자바스크립트(JavaScript) 기초 및 문법ㅣ정의, 기본 문법, 변수, 함수 - 코드스테이츠 블로그

💡 React

: 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용\

 

(1) 필요성

• html, css, javascript를 이용해 웹페이지를 만들 수는 있으나, react를 이용해 상호작용이 가능한 동적 UI를 쉽게 구축할 수 있기 때문에 자주 이용된다.

(2) 특징

• Data Flow : 단방향의 데이터 흐름을 가짐
• Component 기반 구조 : UI를 여러 개의 독립된 컴포넌트로 쪼개서 각각 생성 → 컴포넌트를 조립해 화면 구성
• Virtual DOM ( Virtual Document Object Model )
  • DOM : html, xml, CSS 등을 트리 구조로 인식 & 데이터를 객체로 간주하고 관리
  • 최소한의 변경사항만을 반영해 앱의 효율성과 속도 개선

(3) 기초 문법

[2022.06.27] REACT - 기초 문법

💡 Node.js

: javascript 실행 환경 = 자바스크립트를 컴퓨터에서 쉽게 실행시켜 줌

Node.js는 javascript의 실행환경이고, react는 javascript의 라이브러리 중 하나이기 때문에 react 또한 node.js를 기반으로 동작한다.

따라서, react를 사용하기 위해서는 node.js를 먼저 설치해주어야 함.

 

(1) 장점

일반 서버는 들어온 일을 차례대로 처리하기 때문에 앞선 일이 오래 걸릴 경우, 시간이 가중된다. 하지만 Node.js 서버는 모든 요청을 한번에 받고, 순서와 상관없이 처리 속도가 빠른 것부터 결과를 가져다주기 때문에 앞선 일이 오래 걸린다고 해서 오래 기다려야 한다는 문제를 해결한 서버이다.