노마드 코더 - 바닐라 JS로 크롬 앱 만들기

Notice

Recent Posts

Recent Comments

Link

« 2025/06 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

Tags more

Archives

Today

Total

관리 메뉴

Coding Archive

노마드 코더 - 바닐라 JS로 크롬 앱 만들기 본문

🖥️ Clone Coding/Java Script

노마드 코더 - 바닐라 JS로 크롬 앱 만들기

코등어 2022. 6. 3. 23:54

#1 INTRODUCTION

three.js는 javascript로 3D를 구현하게 해주는 라이브러리로 데이터 시각화도 구현이 가능하다.

javascript 기술을 좀 더 깊게 배우고 싶다면 프레임워크로 넘어가면 된다.

→ 프레임워크는 쉽게 말해 내가 하려는 일을 도와주는 도우미이다.

(ex. React Native - javascript만으로 안드로이드랑 ios앱을 만들 수 있게 해 준다.

Electron - javascript와 html, css로 데스크톱 앱을 만들 수 있게 해 준다.)

Replit는 브라우저를 사용하여 코드를 작성하고 앱과 웹사이트를 만들 수 있게 한다. (브라우저에 vsc 같은 프로그램을 깔 수 없을 때 사용)

#2 WELCOME TO JAVASCRIPT

0. Your First JS Project

. javascript를 다루는 방법은, 브라우저의 console을 사용하면 된다.

. 터미널을 사용해서 폴더를 생성

. html 파일을 브라우저에 끌어다 열고, 그 안에서 실행

→브라우저는 html을 실행하고 html에서 css와 js 코드를 불러온다.

(html이 css랑 javascript을 연결해주는 접착제 같은 역할)

css, js만으로는 브라우저에 뭔가를 실행시킬 수 없다. (css나 js는 브라우저에서 연다고 실행 ×)

. css와 javascript의 위치는 아래와 같다.

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

1. Basic Data Types

데이터 타입의 종류

(1) Number

1) 정수(Integer) // 1, 2, 3, 4...

2) 소수(Float) // 1.555, 2.545345...

->Number타입은 서로 연산기호(+, -, *, /)를 이용하여 계산할 수 있다.

(2) String

처음부터 끝까지 문자(Text)로 구성되어 있다는 의미이다.

큰따옴표("")또는 작은따옴표('')의 사이에 넣어서 표현하며, " " 등의 공백도 포함 가능하다.

String타입의 합은 두 개를 합쳐서 출력한다.

ex)"Hello, " + " My name is Nico" // Hello, My name is Nico

String+Number = String

ex) "Hello"+2 // "hello2"

2. Variables

. Js에서 변수 (variable)을 주고 싶을 때 쓰는 것은 const이며, const = constant(상수) 항상 변하지 않는 값을 의미

. 변수를 지정하면 일일이 수정해야 하는 번거로움이 줄어든다. (변수의 값만 바꿔주면 되기 때문)

ex) 5의 변수를 a로 선언/ 2의 변수를 b로 선언

const a = 5;
const b = 2;

console.log(a + b);
console.log(a * b);
console.log(a / b);

. Js에선 변수의 이름을 지정해줄 때 띄어쓰기를 하지 않고, 보통 대문자를 써서 표시해준다.

=> camelcase (중간중간 대문자가 들어가 있는 게 낙타같이 생겼다고 해서 붙여짐)

const myName = "nico";

console.log("hello " + myName);

3. const and let

. 변수만 들 때 let, const, var 차이

1) const 재선언 금지, 재할당 금지

const a = b;
const a = c;  // 재선언 금지

const a = b;
a = c;  // 재할당 금지

2) let 재선언 금지, 재할당 가능

let a = b;
let a = c;  // 재선언 금지

let a = b;
a = c;  // 재할당은 가능

3) var 재선언 가능, 재할당 가능

var a = b;
var a = c;
a = d;  //재선언, 재할당 가능

. variable(변수) 만드는 방법은 2가지.

const → 상수이므로 값 변경 불가능
let → 변숫값 변경 가능

const를 기본적으로 사용하고 업데이트가 필요한 변수라면 let을 사용한다.

과거에는 var형 변수를 썼는데, 언어에 대한 보호를 받지 못하고, 변수 값 변경이 가능했다. → 되도록 쓰지 말자!

const a = 5;
const b = 2;
let myName = "nico";

console.log(a + b);  // 7
console.log(a * b);  // 0
console.log(a / b);  // 2.5
console.log("hello " + myName);  // hello nico

myName = "nicolas";

console.log("your new name is " + myName);  // your new name is nicolas(업데이트 된 myName의 값을 반영)

4. Booleans

booleans : 데이터 타입의 한 종류 (number, string, boolean...)

boolean 값으로 true, false가 있다.

또 다른 값으로는 null, undefined가 있다.

true =/= "true" (""안에 들어가는 건 string)
false =/= "false" (""안에 들어가는건 string)
null = 값이 없음(비어 있음). 자연적으로 발생하지 않으며, 값이 없다는 것을 확실히 하기 위해 쓴다.
변수에 null(값이 없다)이 할당된다. 즉, 값이 정의됨
null =/= undefined
null =/= false
undefined = 값이 정의되지 않음. 변수는 선언했지만 값을 할당하지는 않음.

5. Arrays

데이터 정리하는 법 → 데이터 구조

데이터 구조 중 가장 기본적인 건 배열이다.

배열은 데이터를 나열하기 위한 방법 중 하나이다.

배열(array)

- 하나의 변수 안에 데이터의 list를 가지는 것.

- 다른 프로그래밍 언어에도 있는 가장 기초적이고, 필수적인 데이터 값을 리스트로 정리하는 것

- array는 [ ] 대괄호로 열고 닫는다.

- 항상 [ ] 안에 콤마(,)로 데이터들을 나열한다. 변수도 쓰일 수 있고, boolean, text, 숫자 등 데이터 정렬이 가능하다.

const daysOfWeek = ["mon", "tue", "wed", "thu", "fri", "sat", "sun"];

위의 변수에서 5번째 element 값을 알고 싶을 땐

console.log(daysOfWeek[4])

라고 해야 5번째 값을 출력할 수 있다.

컴퓨터는 숫자를 0부터 세기 때문에, “mon”은 0번째라고 생각하면 된다.

위의 상태에서 daysOfWeek이란 변수에 하나의 값을 더 넣고 싶다면 아래와 같이한다.

const daysOfWeek = ["mon", "tue", "wed", "thu", "fri", "sat", "sun"];

daysOfWeek.push(“holiday”)

→ push는 추가하는 기능.

+) Q

const로 선언하면 변하지 않는 거라고 했는데 const daysOfWeek = ["mon", "tue", "wed", "thu", "fri", "sat"]; 에서

어떻게 daysOfWeek.push("sun"); 을 써서 내용물을 추가할 수 있는지?

array 안의 내용물은 예외인 건지?

const a = 2; 이렇게 있으면 a = 4; 이렇게 변경하는 건 불가능하다.

하지만 배열과 같은 경우 내용물 안의 요소들은 변경이 가능하다.

선언한 변수를 박스로 생각하면 const daysOfWeek = ["mon", "tue", "wed", "thu", "fri", "sat"]; 이렇게 선언을 하면 이후에 daysOfWeek = ["hi"]; 이렇게 수정하는 건 불가능하다. 왜냐하면 박스 그 통째로 바꾸려고 하기 때문이다.

하지만 그 박스 안의 내용물들을 추가하거나 삭제할 수는 있다.

6. Objects

설명이 필요하지 않은 데이터 리스트들은 array를, 설명이 필요한 정보가 담긴 데이터 리스트들은 object를 사용한다.

object는 property를 가진 데이터를 저장해주며, { }를 사용해 열고 닫는다.

object의 property값은 (=)이 아닌 (:)로 표현, 그리고 연결은 ;가 아닌 ,(쉼표)로 연결한다.

const player = {
name : tomato,
color : red,
food : true,
};

console.log(player);  // {name: "tomato", color: "red", food: true}

property를 불러오는 방법은 2가지가 있다.

console.log(player.name); // tomato

console.log(player["name"]); // tomato

또한 property를 바꾸는 것은 가능하지만 선언된 object를 바꾸는 것은 불가능하다.

*const는 let과 다르게 update가 안되지만 리스트의 경우 전체를 변경하는 게 아니라 속성 값을 수정/추가하는 경우에는 update가 가능하다.

ex)

const player = {
name : tomato,
color : red,
food : true,
number : 5,
};

console.log(player);  // {name: "tomato", color: "red", food: true, number: 5}

player.color = "blue";
console.log(player.color);  // blue

player.number = player.number + 5;  
console.log(player.number);  // 10

console.log(); 에서 console은 object이고, 그 안에 log라는 것이 있다는 것이다.

'🖥️ Clone Coding > Java Script' 카테고리의 다른 글

노마드 코더 - 바닐라 JS로 크롬 앱 만들기(3) (0)	2022.06.07
노마드 코더 - 바닐라 JS로 크롬 앱 만들기(2) (0)	2022.06.04
생활코딩 WEB2- JavaScript 정리(3) (0)	2022.05.28
생활코딩 WEB2- JavaScript 정리(2) (0)	2022.05.26
생활코딩 WEB2- JavaScript 정리 (0)	2022.05.23

'🖥️ Clone Coding/Java Script' Related Articles

Comments

Coding Archive

노마드 코더 - 바닐라 JS로 크롬 앱 만들기 본문

노마드 코더 - 바닐라 JS로 크롬 앱 만들기

0. Your First JS Project

1. Basic Data Types

2. Variables

3. const and let

4. Booleans

5. Arrays

6. Objects

'🖥️ Clone Coding > Java Script' 카테고리의 다른 글

티스토리툴바