*이 게시글은 인프런-처음 만난 리액트 강좌를 보고 정리한 글입니다.
목차
1. 프론트엔드
2. API
3. HTML과 SPA
4. CSS
5. Javascript, ES6, 바벨
1. 프론트엔드(Front-End)
프론트엔드는 사용자가 볼 수 있는 화면, 즉 사용자 인터페이스(User Interface, UI)를 말한다.
대비되는 용어로 백엔드가 있는데 백엔드는 웹 애플리케이션의 사용자가 보지 못하는 영역인 서버나 데이터베이스를 관리하는 기술이다.
쉽게 말해 프론트엔드는 사용자가 보는 화면과 그 안에 있는 요소들을 만들고 백엔드는 사용자가 볼 수 없는 데이터베이스나 서버를 관리한다.
리액트는 프론트엔드 언어이다.
2. API
API는 응용 프로그램에서 사용할 수 있도록, 운영체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스이다.
UI가 사용자와 프로그램을 연결해주는거라면 API는 프로그램과 프로그램을 연결해주는 것이라고 생각하면 된다.
스마트폰 화면에서는 사람이 이용하기 편하도록 버튼이 있다.
만약 버튼이 없다면 사용자는 스마트폰을 사용하기가 어려울 것이다.
이런 경우 사용자를 도와주는 것이 바로 UI이다.
API도 마찬가지이다.
지도를 이용한 맛집 찾기 프로그램을 만들고자 하는데 일반인들은 이런 지도 기능들을 제공할만한 기반이 되는 데이터도 없고 관련 프로그램도 없다.
그리고 일반인들 입장에서는 그런 지도 데이터를 공개해도 여러 문제점 때문에 그 지도 데이터를 사용하기 어려울 것이다.
그래서 이 지도 데이터를 일종에 스마트폰의 버튼처럼 그 지도 데이터를 접근하기 쉽게 만들어 사용자들에게 공개한 것이 바로 지도 API이다.
3. HTML과 SPA
HTML은 웹 브라우저를 통해서 사용자에게 보이는 웹 문서를 작성하는 언어로 웹 문서의 내용 작성에 집중을 한다.
마크업종류의 한 종류로서 기존에서는 웹에서만 사용되었지만 최근에는 웹브라우저를 이용해서 데스크탑 용 앱을 만들 수 도 있기 때문에 그런 곳에서도 사용된다.
| *마크업 : 문서나 데이터를 처리하기 위해 추가되는 정보 *마크업 언어: 마크업 정보를 표현하는 언어 |
HTML은 웹사이트의 뼈대를 구성하기 위해 사용하는 마크업 언어
HTML에서는 태그라고 부르는 것으로 웹사이트의 구조를 만들고 웹사이트에 들어갈 내용을 채워넣는다.
태그는 아래와 같이 홑화살괄호를 사용하며 홑화살괄호안에 태그 이름을 넣어서 사용하며 <태그이름>으로 태그를 시작하며 </태그이름>으로 태그를 끝내는 형태를 가진다.
웹사이트의 뼈대를 구성하는 태그에는 html 태그, head태그, body 태그가 있다.
- html 태그 : html의 시작과 끝을 알리는 태그
- head 태그 : 웹사이트의 속성
- body 태그 : 실제로 웹사이트에서 보이는 내용
우리가 사람의 머리를 보면 그사람이 누구인지 알 수 있는 것 처럼 head 태그를 보면 제목, 속성등이 나와있어 이 웹사이트가 어떤 사이트인지 알 수 있다.
이러한 속성들을 메타 데이터라고 한다.
우리가 웹사이트를 둘러보다보면 웹사이트에 보이는 화면이 계속 바뀌는 것을 볼 수 있다.
웹사이트에서 보이는 내용이 Html에서 body태그라고 했으니까 그렇다면 body태그안이 계속 바뀐다는 얘기일까?
그렇다. 페이지가 바뀔 때마다 아래 그림과 같이 새로운 html파일을 불러와서 사용자에게 보여준다.
그렇다면 복잡한 웹페이지의 경우 이런 페이지들이 수십~수백개 이상일텐데 이렇게 많은 페이지를 어떻게 관리할까?
이런 문제를 해결하기 위해 나온 것이 바로 SPA이다.
SPA는 말그대로 하나의 페이지만 존재하는 웹페이지 혹은 웹 애플리케이션이다.
아래의 왼쪽 그림은 전통적인 웹 애플리케이션을 나타낸 것이고 아래의 오른쪽 그림은 SPA를 나타낸 것이다.
전통적인 방식인 Html페이지가 수십~수백개가 있는 것이 아니라 HTML이 1개, 즉 단 하나의 페이지만 존재한다.
SPA에서 유일한 HTML파일에 body태그의 내부가 텅 비어있다가 사용자가 해당 페이지에 접속할 때 그 페이지의 컨텐츠를 가져와서 동적으로 body태그 내부를 채워넣는 형태이다.
이렇게 동적으로 body 태그 내부를 채워넣는 역할을 하는 것이 리액트라고 생각하면 된다.
4. CSS
CSS는 웹사이트의 레이아웃과 글꼴, 색상등의 디자인을 입히는 언어이다.
HTML로 웹사이트의 구조를 만들었다면 그 위에 CSS로 디자인을 입혀야 아름다운 웹사이트가 완성된다.
5. JavaScript
만약 웹사이트가 HTML만으로 구성되어있다면 사용자가 버튼을 누르거나 정보를 입력하는 등의 동적인 작업을 처리할 수 없다. 이러한 동적인 작업을 하기위해 JavaScript를 사용한다. (Java와 관련이 없다)
자바의 정식명칭은 ECMAScript로 버전을 매길때도 맨 앞글자 EC를 따서 EC5, EC6 이런식으로 나타낸다.
JavaScript는 이름에서도 알 수 있다시피 Script언어인데 다른언어와 가장 큰 차이점은 프로그램이 실행되는 runtime에 코드가 해석된다.
C언어나 Java같은 컴파일언어는 컴파일이라는 과정을 통해 소스코드가 해석되고 실행가능한 형태로 변환되는데 javascript같은 script언어는 runtime(실행시간)에 코드가 해석된다.
Javascript는 오랫동안 웹개발에만 사용되었는데 단순히 웹페이지에서만 국한되지 않고
Node.js 런타임을 통하여 서버쪽
NW.js, Electron 등의 도구를 사용하여 데스크탑 앱을 만들 수도 있고
react-native, NativeScript 등의 도구를 사용하여 모바일 앱도 만들 수 있다.
그리고 하드웨어에서도 Node.js를 통하여 JavaScript를 사용할 수 있기 때문에 Iot진영에서도 사용될 수 있다.
5-1 ES6
ES6은 ECMAScript6을 의미하며, 자바스크립트의 버전을 가리킨다.
ES6은 2015년에 도입되었고 2015년 이후에도 계속해서 새로운 자바스크립트 버전이 나오고 있는데
ES6에서 새로운 문법이 많이 추가가 되었다.
5-2 바벨(Babel)
최신 Javascript 문법으로 작성된 코드를 이전 Javascript 문법으로 변환시켜주는 도구이다.
Javascript는 표준이 존재하는데, 이 표준에 따라 Javascript를 개발하고 매년 새로운 버전을 만드는데 그 중 ES5에서 ES6이 되면서 새로운 기능들이 많이 추가가 되었다. 그래서 예전 브라우저를 쓰는 사람도 최신형 문법을 사용할 수 있게 해주는 도구가 필요해지게 된 것이다.
참고문헌
1. 스파르타코딩클럽 (spartacodingclub.kr)
3. [무료] 처음 만난 리액트(React) - 인프런 | 강의 (inflearn.com)
4. 1장. 자바스크립트 입문 · GitBook (vlpt.us)
5. 맨날 한귀로 듣고 흘리는 바벨(Babel)이 뭘까? (velog.io)
6. API 란?. 저도 API가 무엇인지 자세히 알지 못하였기 때문에 검색을 하며 스스로… | by 초보개발자 | Medium
'React' 카테고리의 다른 글
| 6. 리액트 입문-JSX가 뭘까 (0) | 2023.06.02 |
|---|---|
| 5. 리액트 입문-Create-react-app (0) | 2023.06.01 |
| 4. 리액트 입문-리액트는 무엇이며 Virtual DOM은 무엇인가 (0) | 2023.05.31 |
| 3. 리액트 입문-개발환경 설정하기 (0) | 2023.05.29 |
| 2. 리액트를 배우기 전 알아야 하는 자바스크립트 기초 문법 정리 (0) | 2023.05.28 |