React 준비운동!

아, 오늘 시간이 조금 생겨서~ 글 하나 더 투척할게요 ㅎ

 

지난 시간, 이야기 했던것 처럼 리액트를 사용하려면 HTML, CSS, Javascript를 접해보고 이게 뭔지, 어떤 특징이 있고 무엇을 할 수 있는지 정도는 알아야 리액트를 사용할 수 있을거에요

 

먼저, 본 글은 이전 게시글은 'React 개발 환경 구축하기' 파트에 이어서 작성하려고 하니까, 아직 준비가 안되신 분들은 아래 링크를 클릭해서 '개발환경'을 구축하고 다시 와주세요!

 

https://stack-full.tistory.com/5

React 개발 환경 구축하기

 

I. 리액트 기초지식

• HTML
• CSS
• Javascript

먼저, 웹사이트를 구성하는 가장 기본요소인 HTML 부터 살펴볼게요, 전반적인 내용들은 아래 링크들을 클릭해서 HTML Tutorial을 한번 해보시길 추천해드려요!

 

https://developer.mozilla.org/ko/docs/Web/HTML

HTML: Hypertext Markup Language | MDN

 

https://www.w3schools.com/html/default.asp

HTML Tutorial

 

II. 살펴보기

 

HTML은 Hyper Text Markup Language의 약어로, 마크업 언어(Markup Language)의 한 종류라고 정의할 수 있겠네요, 마크업은 어떤 정보를 표현하기 위한 용어가 되겠는데요 HTML은 주로 웹에서 사용되었지만 Node.JS가 활발하게 사용되고 있는 요즘에는 데스크톱용 앱을 만들수도 있습니다.

프로그래밍 언어는 어떠한 연산을 통해 문제를 해결하는 언어 vs 화면에 내용이나 데이터를 표시하는 언어(마크업)

실제로, 우리가 이전에 설치한 IDE인 VSC도 사실 HTML,CSS,Javascript를 활용해 만든 데스크톱 앱 이거든요, 알게 모르게 그런 사례가 더러 있어요

 

실제 사례가 궁금하신 분들은 아래 링크를 클릭해서 페이지 이동하신 뒤, 화면을 조금만 아래로 스크롤하면 visual studio code를 찾을 수 잇을거에요 ㅎ

https://www.electronjs.org

 

HTML에서는 보통 태그(tag)라는 명령어를 이용해 웹 사이트의 구조를 만들고 내용을 작성해 넣거나 외부 API 통신을 통해 화면에 여러가지 데이터를 표현하기도 해요,

네이버 웹사이트 -> 마우스 우클릭, 페이지 소스보기 실행화면

여기 그 코드를 잠깐 살펴보고 가자면, HTML은 < 와 > 사이에 약속된 명령어를 사용해 화면에 보여줄 내용, 그것들의 배치를 결정하는 어떤 요소들을 작성하거든요~ 모든 HTML 명령어를 나열할 수 없지만 기본적인 특징만 살펴보세요

 

두번째로 CSS를 설명드릴게요,

CSS는 Cascade Style Sheet의 약어로 웹사이트의 글꼴, 색상등의 모양과 형태, 배치를 결정하는 언어라고 할 수 있어요, 보통 CSS만 사용하기보다 이전에 살펴본 HTML과 함게 사용해서 아름다운 웹사이트를 만들때 사용해요, 근데..CSS는 뭐랄까 쉽게 시작해서 어렵게 끝난다고 해야하나? 알고 있어야 하는 명령, 속성, 선택자...엄청 많아요, 근데 일단 그래요~

 

그래서 준비했어요 😘 , 아래 링크를 클릭해 개요와 그 문법등 내용을 살펴보세요!

 

https://developer.mozilla.org/ko/docs/Web/CSS

CSS: Cascading Style Sheets | MDN

https://www.w3schools.com/css/default.asp

CSS Tutorial

 

세번째, Javascript(자바스크립트) 를 살펴볼까요?

자바스크립트는 프로그래밍 언어중 하나에요, Node.JS 이전에는 단순이 HTML,CSS를 조작/제어하는 목적으로 사용해서 버튼이나 웹브라우저를 제어하는 용도로 사용했다가 이제는 서버를 개발하고 프로그래밍을 통해 앱을 제작할 수 있는 언어로 발전되었죠

 

이름이,... 자바 - 자바스크립트 왠지 관련이 있는 언어로 볼수 있는데 실제로 관련은 있어요,..탄생 배경을 살펴보자면요?

https://ko.wikipedia.org/wiki/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8

자바스크립트 - 위키백과, 우리 모두의 백과사전

 

아, 이것 역시 아래 링크를 참고하시면 자세한 문법과 따라하기 학습을 제공받을 수 있어요 😁

 

https://developer.mozilla.org/ko/docs/Learn/JavaScript/First_steps/What_is_JavaScript

JavaScript가 뭔가요? - Web 개발 학습하기 | MDN

https://www.w3schools.com/js/default.asp

JavaScript Tutorial

 

III. 요약

• HTML은 Hyper Text Markup Language의 한 종류, 웹 사이트의 구조를 제작하는데 사용
• CSS는 Cascade Style Sheet로 HTML을 꾸밀때 사용
• Javascript는 프로그래밍 언어중 하나로 웹 서비스를 개발하고 데스크톱 앱을 제작하는데 사용

아, 그리고 관련 언어에 따른 버전은 아래와 같은데 그냥 그렇구나~ 하고 보셔도 됩니다.

• HTML5 : 보통 HTML 이라고 하면 최신 버전 HTML5를 의미함
• CSS3 : 보통 CSS 라고 하면 최신 버전의 CSS3를 의미함
• Javascript (ES6) : 보통 JS라고 하면 ES6를 의미함

진짜로 이것만 알면 된다고?

 

네, 근데 리액트는 주로 javascript 문법을 좀 더 알아두는게 좋은데요 그래서 관련 설명을 조금 더 작성해보도록 할게요, 점심먹고 와서..🤣

 

모두 맛점 하세요 :p