<오늘 배운 내용 정리>
-
자바스크립트는 기본적으로 브라우저(크롬, 마이크로엣지, 웨일, 사파리 등)에 내장되어 있기 때문에 브라우저를 열어서 [마우스 오른쪽 클릭 -> 검사 -> 개발자도구의 console] 에서 코딩이 가능하지만, 여기서는 한 줄씩 밖에 코딩을 못하기 때문에, 정말 긴 프로그래밍이 필요한 경우 개발자도구에서 코딩을 하는 것은 불가능하다. 긴 코딩을 하고 싶다면 자바스크립트 파일을 만들어야 하는데, 이를 만들어내기에 유용한(긴 코딩에 유용한) 개발tool(VSCODE와 같은)을 사용하는 이유가 바로 이러한 이유 때문이다.
-
브라우저는 js, html, css를 모두 같이 인식하는데, 이 중 하나라도 없다면 우리가 알고있는 웹사이트와 같은 화면은 얻을 수 없다. 사용자가 화면에서 우리가 사용하고 있는 사이트와 같은 화면을 보게 하기 위해서는 이 3가지 언어가 모두 이용되어야 한다. 브라우저는 html을 열고, html(접착제)은 CSS(디자인)와 자바스크립트(동작)를 가져오는 역할을 한다. 이 3가지 언어를 모두 합쳐서 사용하는 언어가 바로 React.js 이다.
-
그렇다면, html에서 css와 js를 어떻게 가져올까?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css"/>
<title>Momentum</title>
</head>
<body>
<script src="app.js"></script>
</body>
</html>위 코드에서와 같이
<head> <link rel="stylesheet" href="style.css"/> </head>head 사이에 link 안에 href로 가져올 css 파일을 지정해주고,
<body> <script src="app.js"></script> </body>body 사이에 script 안에 src로 가져올 js 파일을 지정해준다.
