Computer Science/FrontEnd

노마드 코더 바닐라 JS #1.0~#2.2

토마토. 2022. 2. 20. 00:04

#1.0 Welcome

#1.1 What Are We Building

모멘텀

- 로그인 : 사용자 기억

- Geolocation : 시계, 날씨, 위치

- to-do list

#1.2 Requirements

- 선수 : HTML, CSS

- HTML : 폼, 인풋, 버튼, body/head

- CSS : class, selector

#1.3 Software Requirements

해당 사항 없음

#1.4 Why JS

- 자바스크립트의 역사

1995.12. 

자바스크립트 10일만에 개발

넷스케이프라는 브라우저를 위해 인터렉티브하게 만드려고 개발한 언어

프론트엔드에서 유일하게 사용할 수 있는 언어

자바스크립트를 설치할 필요 없음

브라우저가 이해하는 세 언어 ; html, css, javascript

- 왜 자바스크립트가 유명한가?

프론트엔드에서 유일하게 사용할 수 있는 언어

- 자바스크립트의 문제

유일한 선택지임

#1.5 Why JS 2

- JS로 만들 수 있는 것

three.js : 자바스크립트 3D, 비디오 게임, 시각화

예술적 감각이 있다면, 할 수 있음. 

자바스크립트가 좋은 선택이 될 것이다. 

3D 모델링만 도움을 받으면 된다.

모든 상호작용을 자바스크립트로 만들 수 있다.

자바스크립트를 깊게 배우고 싶다면, 프레임워크로 넘어가면 된다. 

내가 하려는 것을 도와주는 프레임워크

ex) 리액트 네이티브 - ios, 안드로이드

ex) 일랙트론 - 컴퓨터 프로그램 : 피그마, 슬랙, 트위치, vs code

백엔드도 가능함

완전 강력한 언어. 둘다 할 수 있다. 

3D로 하려면, 자바스크립트 매우 중요함 : socket.io

자바스크립트 ml5.js 머신러닝도 가능함

하나의 언어만 알면 된다. 

#2.0 Your First JS Project

alert("hi");
undefined
1+1
2

브라우저는 html을 읽고, html은 css과 자바스크립트를 가져온다. 

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>Document</title>
    </head>
    <body>
        <script src="app.js"></script>
    </body>
</html>

이렇게 CSS, JS를 연결함

대부분의 시간을 자바스크립트를 수정하며 보낼 것이다. 

#2.1 Basic Data Types

// 데이터 타입 1. integer, float
2+2
4
1.5
1.5
// 데이터 타입 2. string
"hello"

#2.2 Variables

console.log(523432);
console.log("String");
console.log('String');

게으르는 법

console.log(523432);
console.log("String");
console.log('String');
console.log(5+2);
console.log(5*2);
console.log(5235/2432);

const a = 5;
const b = "a";
console.log(a*10);
console.log(a-10);
console.log(b);