React - React 를 사용하기 위해 되짚는 JavaScript 기초 (1)

안녕하세요.

Hynn 입니다.

 

이번 포스팅에서는 이전 포스팅에 이어서, React 에 대한 작성을 해보려고 합니다.

React 를 비롯해서 JavaScript 언어 위에서 구동되는 Library, Framework 가 존재합니다.

이 JavaScript 는 Web을 개발하는 3개의 구성요소이기도 합니다.

이를 살펴보고, 기본부터 돌아보도록 합시다.

 

 

1. 웹사이트를 구성하는 3개의 요소

• HTML
  • 요소의(Element) 의 배치 및 내용을 기술하는 언어
  • 색이나 크기같은 디자인을 수행하지 않고, 요소(Element) 의 배치와 내용만을 기술할 수 있음.
• CSS
  • 색, 크기, 애니메이션등을 정의하는 "Styling" 언어
• JavaScript
  • 웹 사이트에 동적요소를 구현하는 언어

 

2. JavaScript 가 실행되는 곳

 

JavaScript 는 런타임환경에서 구동되는 언어입니다. 일반적으로 우리가 아는 런타임환경은 NodeJS 라고 하는 런타임도 있고, 각 브라우저별로 제공하는 런타임이 존재합니다. 

NodeJS 는 서버측 에서 실행되는 자바스크립트의 런타임 환경을 가지고 있고 V8 엔진을 사용합니다. 크롬 브라우저에서 제공하는 것과 동일합니다. 

 

 유사하게 FireFox 는 SpiderMonkey, Safari 는 JavaScriptCore를 사용합니다. 이러한 엔진들은 모두 ECMA-262 표준에 따라 JavaScript를 지원하지만 기능의 차이가 일부 존재할 수 있습니다.

이를 알기 위해서는 MDN Web Docs 와 같은 문서를 참조하면 도움을 받을 수 있습니다.

아래의 사진의 예시를 보면, 각 브라우저별로 지원여부가 표기되어 있습니다. 따라서 기본적으로 모든 표준을 준수하지만, 일부 기능에서는 차이가 있을 수 있기 때문에, 기능을 구현시 이러한 점을 고려해야 할 수 있습니다.

 

MDN Web Docs

 

위의 사진과 같이 예시로 든 기능은 모든 브라우저에서 Full Support 를 제공합니다. 당연하게도 JavaScript 에서 가장 많이 사용되는 함수인 "map"을 예시로 든 것이라 그렇지만요!