HTML, CSS : 프로그래밍 언어는 아니지만 웹 사이트를 만들기 위해 필요함
Javascript : 인터렉티브 한 웹사이트를 만들어 줌
컴퓨터 요구사항
- 브라우저(인터넷 익스플로러 제외 크롬 등)
-> 크로미움을 기반으로 한 브라우저를 사용하는 것을 추천 ex) 크롬, 웨일
- VS Code(다운로드하지 않아도 됨 -> replit.com)
JAVASCRIPT
- 1995년 12월에 10일 만에 개발됨
- HTML, CSS로만 이뤄진 웹사이트가 인터렉티브하기를 원했고 JS를 만들게 되었음
- 프론트엔드에 쓸 수 있는 유일한 프로그래밍 언어
- 모든 브라우저에 내장되어있음 -> 다운로드받을 필요 없음
- socket.io(채팅 기능 등), 3D, ml5.js(머신러닝)
백엔드 : 루비, 파이썬, 고 , 자바 등의 언어 중 선택 가능
프론트엔드 : 자바스크립트가 유일
three.js : 자바스크립트로 3D를 구현하게 해주는 라이브러리
자바스크립트 기술을 가다듬어서 더 깊게 배우고 싶다 -> 프레임워크로 넘어가기
프레임워크 : 내가 하려는 일을 도와주는 도우미
ex) React Native : js만으로 안드로이드 iOS 앱을 만들 수 있음
ex) 일렉트론 : js, HTML, CSS로 데스크탑 앱을 만들수 있게 해줌
프론트엔드를 js로 만든 다음 백엔드까지 js로 만들기가 가능
크롬에서 F12를 눌러 개발자모드에서 Console창에 들어가면 js를 쓸 수 있으나 긴 코드 작성용은 아님
VSCode에서 js 파일, css 파일을 작성하고 브라우저에서 열면 코드가 실행되는 것이 아니라 입력된 그대로를 보여줌 -> 접착제 역할을 하는 HTML이 필요함 : 브라우저는 HTML을 열고 -> HTML은 CSS와 JS를 가져옴
==> css, js파일은 브라우저에서 여는 것이 아님!
html파일을 브라우저에서 열어야 하고, CSS 파일과 JS 파일은 HTML파일에서 불러오는 것
css 파일은 위에서 불러오면 되지만 보통 js파일은 끝에서 불러옴
index.html
<!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>style.css
body {
background-color: beige;
}app.js
alert("hi");
-> 브라우저는 HTML을 실행해서, <link rel="stylesheet" href="style.css"./>
이 줄을 보고 style이 적용되어야 한다는 걸 알고 CSS 파일 실행, js도 마찬가지
현재 브라우저에서는 2가지의 엔진이 돌아가는 중 - CSS 엔진, JS 엔진
'프로그래밍' 카테고리의 다른 글
| [노마드 코더] 바닐라 JS로 크롬 앱 만들기 - Day 3 (변수 const, let, var) (0) | 2021.07.02 |
|---|---|
| [노마드 코더] 바닐라 JS로 크롬 앱 만들기 - Day 2 (js의 data type, 변수) (0) | 2021.07.01 |
| [패스트캠퍼스 서포터즈 3기] 풀스택개발자를 위한 패스트캠퍼스 노드JS 후기 5 (마지막 후기) (0) | 2021.06.26 |
| [패스트캠퍼스 서포터즈 3기] 풀스택개발자를 위한 패스트캠퍼스 노드JS 후기 4 (백엔드 part 1 드디어 오픈) (0) | 2021.06.25 |
| [패스트캠퍼스 후기] 서포터즈 3기 - NODEJS강의 후기 3 (Axios Cheerio) (0) | 2021.06.20 |