웹을 만들기 위해선 HTML, CSS, JS를 이용해야 합니다. 보통 아래와 같이 페이지 별로 코드를 짜게 되죠.
<!--A페이지 (A.html) -->
<html>
<head>
<script ...>
<link ...>
</head>
<body>
<div>...</div>
...
</body>
</html>
그러나 점점 웹이 복잡해 지면서 더 많은 html, Javascript가 들어가게 됩니다. 점점 하나의 html 파일에 수많은 Javascript 라이브러리, HTML 요소들을 포함하게 됩니다.
하나의 파일에 코드 수가 점점 많아지면 개발자의 입장에서는 유지보수하기가 어려워집니다. 어느 코드에 문제가 생겼는지 확인하기 위해 수천 줄의 코드를 확인해야 할 수도 있고, 코드끼리 의존성이 깊을수록 복잡해질 거예요.
<!--A페이지 (A.html) -->
<html>
<head>
<script ...>
<script ...>
<script ...>
<script ...>
<script ...>
<script ...>
<link ...>
<style>
...
</style>
...
</head>
<body>
<h3>개발 다마고치 짱</h3>
<div>...</div>
<div>...</div>
<div>...</div>
<script>
...
</script>
...
</body>
</html>
또한 ****수많은 javascript 라이브러리를 불러와서 사용하다 보면 라이브러리 객체들끼리 이름이 같아 충돌할 수도 있고 관리하기도 어려워 집니다.
<!--analytics 객체(변수)를 사용할 수 있는 서로 다른 스크립트 2개를 불러온다-->
<script src='<https://www.google-analytics.com/analytics.js>'></script>
<script src='<https://www.grab-analytics.com/analytics.js>'></script>
<script>
//analytics 객체가 어디 스크립트(google인지 grab인지)인지를 알 수 없다(충돌)
analytics.send();
</script>
React를 사용하면 깔끔하게 이런 문제들을 해결할 수 있습니다. React는 페이스북에서 만든 라이브러리로 웹 개발을 편하게 개발할 수 있도록 도와줍니다. 그러면 React의 특징에 대해 간략하게 다뤄보겠습니다.
처음에 javascript는 브라우저에서만 실행되는 언어였습니다. javascript를 읽고 실행시키기 위해 브러우저들은 서로 다른 엔진(코드 인터프리터)을 가지고 있습니다.
점점 javascript가 널리 사용되면서 '웹 개발 말고 다른 곳에서도 사용할 수 있지 않을까'라는 이야기가 나왔습니다. 그래서 브라우저에서 뿐만 아니라 자체적으로 프로그램을 만들어서 실행할 수 있도록 나온 기술이 node.js 입니다.
node.js는 대표적으로 서버 프로그램을 개발할 때 많이 사용됩니다. 우리가 다음 시간에 배우게 될 서버 개발은 node.js 를 이용해서 하게 될 거예요!!