32+DAY_멋사 프론트엔드 부트캠프 14기_TIL

What I Learned Today

오전에는 JS에서의 주석과 세미콜론, 타입에 대해 배웠다.

 

• JS에서의 주석은 한 줄 주석과 여러 줄 주석을 사용한다.

// 한 줄 주석

/*
어려
줄
주석
*/

 

• JS는 세미콜론을 자동으로 삽입(ASI)한다. 따라서 세미콜론을 추가하는 것은 선택이다.
  • 하지만 세미콜론을 사용한다면 고려할 사항이 많다.
  • 세미콜론을 사용하지 않는다면 단순한 규칙 하나만 기억하면 된다.
    • 절대 [, (, ' 으로 줄을 시작하지 말자.
    • [, (, ' 으로 줄을 시작해야 한다면 줄 앞에 세미콜론을 하나 붙여준다.
  • 린터(Linter)를 사용하면 더 이상 걱정할 것이 없다.

 

• JS의 타입

/*
JS의 다양한 타입

기본(원시, Primitives) 타입(유형)
문자열(String) 유형
숫자(Number) 유형
불리언(Boolean) 유형 (참/거짓)
null 유형
undefined 유형
심볼(Symbol) 유형
아주 큰 정수(BigInt) 유형
*/

// ---------------------------------
// String
// ---------------------------------

// '작은 따옴표로 묶인 텍스트 데이터';
// "큰 따옴표 쌍으로 묶인 문자 값";

// It's my birthday today!
console.log("It's my birthday today!");

// 문자열 안에 따옴표를 사용하고 싶을때는 \를 사용한다.
console.log("나의 100m 달리기 최고 기록은 12'26\"이야.");
console.log('나의 100m 달리기 최고 기록은 12\'26"이야.');

// 문자열 연결(String Concatenation)
console.log("나의 100m 달리기 " + "최고 기록은 12'26\"이야.");
console.log("나의 100m 달리기" + " 최고 기록은 12'26\"이야.");
console.log("나의 100m 달리기" + " " + "최고 기록은 12'26\"이야.");

// ---------------------------------
// Number
// ---------------------------------

console.log(10000); // 10000
console.log(10_000); // 10000 코드를 볼 때 보기 쉽게 _를 사용
console.log(10.9843); //
console.log(0.49393);

// 산술 연산 (숫자 간 처리)
// +, -, *, /, %

console.log(10000000 + 112312); // 더하기
console.log(10000000 - 112312); // 빼기
console.log(10000000 * 112312); // 곱하기
console.log(10000000 / 112312); // 나누기
console.log(10000000 % 6); // 나머지

// JavaScript 숫자(정수)의 안전 범위 표현
console.log(Number.MIN_SAFE_INTEGER);
console.log(Number.MAX_SAFE_INTEGER);

// ---------------------------------
// Boolean
// ---------------------------------

true; // boolean
("true"); // string

false; // boolean
("false"); // string

// ---------------------------------
// undefined
// ---------------------------------

// 선언된 변수의 기본값으로 사용됨
undefined;
console.log(undefined);

// ---------------------------------
// Null
// ---------------------------------

null;
console.log(null);

// ---------------------------------
// Symbol
// ---------------------------------

console.log(Symbol());
console.log(Symbol(2025));
console.log(Symbol("고유식별자"));

// ---------------------------------
// BigInt
// ---------------------------------

console.log(BigInt(Number.MAX_SAFE_INTEGER + 10));
console.log(10000n);

 

오후에는 변수와 함수에 대해 배웠다.

 

• 변수

// 변수(Variables)

// ---------------------------------
// 의미없는 코드
// ---------------------------------
// 4 + 27 = 31 -> 단지 숫자

console.log(31);
console.log(4 + 27);

// ---------------------------------
// 의미있는 코드
// ---------------------------------

// 처음 가진 사과의 갯수 = 4
// 변수 선언 및 값 할당

let initialApples = 4; // camelCase
console.log("initialApples =", initialApples);

// 잘못된 변수 이름
// 공백
// let initial apples [x]
// 첫글자가 숫자
// let 4people [x]
// 예약어
// let return [x]
// 하이픈 기호
// let dark-impact [x]

// 추가로 구매한 사과의 갯수 = 27
// let 추가로_구매한_사과의_갯수 = 27;
let addBuyApples; // 기본값 (undefined)
// let addBuyApples = undefined (암묵적)
console.log("addBuyApples =", addBuyApples); // undefined

// 선언된 변수에 값 할당
addBuyApples = 27;
console.log("addBuyApples =", addBuyApples); // undefined -> 27

// console.log("추가로 구매한 사과의 갯수 =", 추가로_구매한_사과의_갯수); // 27

// 현재 내가 가진 사과의 갯수 = 처음 가진 사과의 갯수 + 추가로 구매한 사과의 갯수
let currentApples =
     initialApples + addBuyApples;
console.log("현재 내가 가진 사과의 갯수 =", currentApples); // 31

// let 변수 vs var 변수
// var 변수는 잘 사용하지 않는다고 하셨다.

// 블록 스코프 (block scope)
{
    var myName;
    console.log(1, myName);

    myName = "yamoo9";
    console.log(2, myName);
}

myName = "y9";
console.log(3, myName);

{
    let myName2;
    console.log(1, myName2);

    myName2 = "yamoo9";
    console.log(2, myName2);
}

myName2 = "y9";
console.log(3, myName2);

// let 변수 vs const 변수(상수, constant)

// 변수(let) = 시간의 흐름에 따라 값이 변경됨
// 상수(const) = 처음 선언 시, 값이 할당된 이후 변경되지 않음

 

• 함수

// 함수란?
// 특정 순서에 따라 작업이 실행되는 코드 묶음(블록)

// drawWater 함수 [
//  1. 빈 양동이 가져오기
//  2. 양동이 들고 우물로 이동하기
//  3. 우물에서 물 길어오기
//  4. 집으로 귀가하기
// ]
// drawWater 함수 부르기(call)

// 함수 선언 (Function Declaration) 구문
function makeRamen() {
     console.group("라면 먹자 !!");
     console.log("1. 물, 스프, 후레이크를 한꺼번에 넣는다.");
     console.log("2. 물이 끓으면 면을 넣는다.");
     console.log("3. 면이 풀릴때 계란을 넣는다.");
     console.log("4. 식탁으로 옮긴다.");
     console.log("5. 먹는다.");
     console.groupEnd();
}

// 함수 사용 (Call Function)
// 재사용성 (Reusability)
makeRamen();

// 함수 뒤 소괄호의 의미
// 동사형태
// 함수를 "호출(실행)한다" 의미 - 약속된 규칙
// 함수기능()

// 함수 이름으로 기능을 유추해보세요.
// 직관적이고 쉬운 함수 이름이 잘 지어진 이름
// playMusic(); // 음악 재생
// stopMusic(); // 음악 정지
// pauseMusic(); // 음악 일시정지

// 적절하지 않은 함수 이름
// function return () { } 예약어 사용
// function 2break() { } 첫글자가 숫자
// function conti nue() { } 공백 사용
// function cla----- ss() { } 하이픈 사용

// 함수 매개변수 (Function Parameters)

// 함수 밖에 있는 [ 전역 ] 변수 (global scope variables)
// 코드 실행 범위 어디서나 접근이 가능한 변수
// let year = 4027;

// 함수 선언
function writeDiary(year, month, day, location) {
// 함수 내부에 선언된 변수
// 함수 안에서 사용
// 지역 변수 (local scope variables)
// 변수 + 문자 = 문장
// 변수('문자') + 변수('문자') = 문자 연결
    console.log(year + "년 " + month + "월 " + 
    day + "일에 " + location + "에 다녀온 일기를 쓴다."
    );
}

// 함수 호출(실행)
writeDiary(2025, 6, 10, "서울 N 타워");
writeDiary(2025, 7, 1, "부산 광안리 해수욕장");
writeDiary(2025, 10, 30, "원주 디자인 뮤지엄");

 

The Problem I Faced

let 변수와 var 변수의 차이가 잘 이해되지 않았다.

그리고 var 변수를 잘 사용하지 않는 이유도 궁금했다.

나중에 오늘 배운 내용과는 방향이 달라서 나중에 알려주신다고 하셨는데 궁금한 건 못 참아..

 

What I Tried to Do

구글 검색을 통하여 공부했다.

 

How I Solved It

• var 변수
  • 재할당 가능 
  • 중복해서 선언 가능
    • 기존에 선언해 둔 변수의 존재를 까먹고 값을 재할당하는 실수가 발생하기 쉽다.
• let 변수
  • 재할당 가능 
  • 중복 선언 불가능
    • 이미 선언한 변수를 다시 선언할 경우 에러가 발생한다.
      • 따라서 코드의 안정성을 높여줄 수 있는 방식이다.

 

일단은 이 정도로만 기억해 두고 다음에 설명을 해주실 때 집중해서 들어야겠다.

 

So

 

Aha Moments

console.group을 사용하여 콘솔 출력값을 묶을 수 있다는 것을 알게 되었다.

심지어는 접을 수도 있어서 훨씬 보기 편해졌다.

함수 이름은 동사형태로 지어야 한다.

JS 실습도 조금씩 들어있어서 해보았는데 너무 재밌다.

HTML, CSS보다 재미있는 것 같다