[nomadcoders / Vanila JS] momentum 클론 코딩 - #2 Welcome to Javascript

uooʎɹɐǝp·2025년 1월 4일

JavaScript Vanila Js js 노마드코더 클론코딩

[nomadcoders / Vanila JS]

목록 보기

1/3

노마드코더의 <바닐라 JS로 크롬 앱 만들기>를 수강하며 배우거나 추가적으로 찾아본 것들을 정리한 내용입니다.
개념 복습용이나 면접 대비용으로 참고하면 좋을 듯 합니다!

Momentum clone 목표

#2.0 My First JS Project

HTML, CSS, JS 파일을 Momentum 폴더에 만듦

브라우저에서 css와 js를 실행해보니 인터렉티브한 페이지가 아니라 코드만 출력됨

→ HTML을 실행해야 원하는 페이지가 나올 것
즉 HTML은 CSS와 JS의 접착제 역할

<!--index.html-->

<!--css 파일을 html 파일로 불러오는 법 // 보통 파일 상단에 작성-->  
<head>
  <link rel="stylesheet" href="style.css">
  <title>Momentum</title>
</head>

<!--js 파일 불러오는 법 // 보통 파일 하단에 작성-->  
<body>
  <script src="script.js"></script>
</body>

#2.1 Basic Data Types

number (interger, float …)
string (ex: ”hello”+”my name is …”)

#2.2 Variables

→ 기본적으로 변수 이름은 carmel case 방식 사용(ex: veryLongVariableName)

variable을 “새로” 만들기 위해

const (constant: 바뀌지 않는 상수, 업데이트 불가능)
let → if myName 업데이트시 let 선언이 필요 없음
(var: 어디서든 업데이트 가능, but 실수로 업데이트할 수 있어서 const처럼 실수를 보호해주지 않음, 즉 구 버전 변수 선언 방식)

const a = 1;
const b = 2;
let myName = "Jain";

console.log(myName);

myName = "Jain Kim"; // 변수 업데이트 through "let"

console.log(myName);

#2.4 Booleans

const amIFat = true;

console.log(amIFat); // true

null vs undefined vs false, 모두 문자가 아니고 데이터 타입임

→ null은 아무것도 없는 상태로 채워진 것 “nothing, 비어있음”

→ undefined은 정의되지 않음 (ex: let something = Xx)

1 / 4 (토)

#2.5 Arrays (Data Structure)

변수 선언 후 배열 선언하기

const mon = "mon";
const tue = "tue";
const wed = "wed";
const thu = "thu";
const fri = "fri";
const sat = "sat";
const sun = "sun"; // 변수 선언

const daysOfWeek = [mon, tue, wed, thu, fri, sat, sun];
// 배열 선언

console.log(daysOfWeek);

Array에 요소 추가하기 → 배열이름.push(₩₩₩)

daysOfWeek.push("Add");
console.log(daysOfWeek);
console.log(daysOfWeek[999]); //undefined

#2.6 Objects → xxx.xxx 형태

예를 들어 Player의 property을 정의할 때

기존 코드

playerName

playerPoints

playerMessage

등등… player라는 entity(개체)가 중복됨

이럴 때 Object 객체를 이용

→ = 중괄호; 속에 속성을 넣는다, 쉼표로 구분

const player = {

  name: "yoon",
  
  points: 1212,
  
  message: true
  
  };
  
  console.log(player.name);
  console.log(player["name"]);// 같은 결과를 출력

속성 수정도 가능

속성 추가는?

→ 가능

  console.log(player); // function임

  player.lastName = "pizza"; // lastName이라는 속성 추가
  console.log(player);

then, Array와 Object의 차이점은?

→ Array: 모든 요소를 나열, 순서가 중요함
→ Object: entity의 property을 구조적으로 정의함

#2.7 Functions part 1

function을 만드는 법

: 함수 이름 뒤에 (소괄호)와 {중괄호} 추가!

function sayHello(){
  console.log("Hello! My name is ...");
}

sayHello();

위 코드 중 … 에 이름을 추가하고 싶다면?

#2.8 Functions part 2

서로 다른 Argument(인자, 여기선 이름)을 parameter(매개변수)로 함수에게 전달

function sayHello(name){ // name이라는 매개변수 정의
  console.log("Hello! My name is " + name);
}

sayHello("yoon"); // 인자 전달
sayHello("jay");
sayHello("pizza");

결과:

참고: 매개변수는 여러개 전달이 가능하다

아래 코드 참고

function sayHello(name, age){ // 쉽표로 parameter 구분
  console.log("Hello! My name is " + name + " and I'm " + age + " years old.");
} // +를 사용해서 문자열 합치기

sayHello("yoon", 20); // 쉼표로 argument  구분
sayHello("jay", 40);
sayHello("pizza", 60);

응용 1: 계산기 만들기

function plus(a, b){ // parameters
  console.log(a+b); // !참고! - plus 함수에서 정의한 변수는 plus 중괄호 안 코드 블럭에서만 유효함
}
function minus(a, b){
  console.log(a-b);
}

plus(1, 2); // arguments
minus(3, 1);

응용 2: 객체에 함수 넣기 = 메소드

→ 메소드란, 객체의 속성 중 하나인데 함수형태를 가진다

const player = { 
  name: "yoon",
  hello: function sayHello(otherName){ // 객체의 method
    console.log("Hello "+otherName+"!, I'm "+player.name);
  }
};

player.hello("Pizza");
player.hello("Jain");
player.hello("Nico");

즉 여기서,

hello: function sayHello(otherName){ // == 메소드

메소드 내부에서는 보통 this를 사용해서 자신의 속성에 접근한다

this는 메소드를 호출한 객체(=player)를 참조한다

즉 this.name == player.name

#2.11 Returns

const calculter = {
  adder: function(a, b){
    console.log(a+b);
  },
  minus: function(a, b){
    console.log(a-b);
  },
  multi: function(a, b){
    console.log(a*b);
  },
  divider: function(a, b){
    console.log(a/b);
  },
};

calculter.divider(2, 3); 
//0.666666: 메소드 divider 내부의 console.log(/)가 출력됨

console.log(calculter.divider(2, 3)); 
//undefined <- !!!

마지막 코드에서 undefined 뜨는 이유

: divider 메소드 자체는 값을 return하지 않기 떄문! 그래서 반환값이 undefined

→ 즉 JS에서는 함수가 명시적으로 return값을 반환하지 않으면, 기본적으로 undefined를 출력함

console.log()처럼 콘솔 말고

코드 상에서 결과를 알려주거나, 명시적으로 출력하는법?

→ 코드에 return문 추가 해서 반환 해주기!

예시: 한국 나이 계산기

const age = 20;
function calculateKrAge(ageOfForeigner){
  return ageOfForeigner + 2;
} //code로 결과값 받고 싶으면 return 추가!!

const KrAge = calculateKrAge(age); // 중요: return 반환값으로 대체됨

console.log(KrAge);

여기서 console.log(KrAge);를 추가하지 않아도

콘솔에 KrAge를 입력하면 KrAge의 계산값에 접근이 가능함

⇒ 콘솔로그와 차별화되는 return 문의 장점

#2.13 Conditionals

keyword: if

###실습: 사용자의 나이가 얼마인지 측정하는 조건문

→ age 변수를 정의할때, prompt라는 함수를 사용

prompt 함수란? → 사용지에게 창을 띄울 수 있게 해줌

prompt(message, defalut)와 같이 매개변수가 기본 2개이다

→ message는 사용자에게 보여줄 문자열

const age = prompt("How old are you?");

console.log(age);

결과:

그러나 prompt에 아무것도 입력하지 않으면 js의 코드 실행이 중단됨, 콘솔에도 출력되지 않고 로딩만 … → prompt function을 사용하지 않을 거임

그래서 웬만하면 HTML과 CSS로 꾸며진 자신만의 modal을 이용하는 걸 추천!

입력값의 type을 보고 싶다면?

→ console.log( type of ( age ) );

15를 입력했는데 type이 “string”으로 출력되는 문제 발생

→ type을 string to convert into number로 바꿔줘야함 → “parseInt”라는 함수 사용하기!

console.log( type of ParseInt( age ) ); // type: number
// cf: console.log(typeof ParseInt(lalala)); // type: NaN

#2.14 Conditionals part Two

###실습: NaN 판별 (Not a Number)

→ isNaN() 함수 사용

const age = prompt("How old are you?");

console.log(isNaN(age)); // 숫자일때만 false 출력

condition을 사용하는 법

기본 로직 :

if(`condition`) {

  // do true case
} else {
  // do false case
}

이때 condition 은 boolean이므로 true / false로만 구분이 되어야함

else는 생략 가능

#2.15 Conditionals part Three

else if 도 사용가능

예제:

const age = prompt("How old are you?");

if(isNaN(age)) {
  console.log("Please Write a Number.");
} else if (age<18) {
  console.log("You're too young.");
} else {
  console.log("You can drink.");
}

Operator 종류

AND == &&
→ false가 하나라도 있으면 F
→ 둘다 true여야만 T
OR == ||
→ true가 하나라도 있으면 T
→ 둘 다 false여야만 F

condition w. operator 정리

true && true == true
true && false == false
false && false == false

true || true == true
true || false == true
false || false == false

uooʎɹɐǝp

🫧 ೀ⋆｡˚

다음 포스트

[nomadcoders / Vanila JS] momentum 클론 코딩 - #2 Welcome to Javascript