250901 [ Day 40 ] - CSS (4), JavaScript (1)

TaeHyun·2025년 9월 1일
CSSJavaScriptstudy

TIL

목록 보기
42/185

시작하며

드디어 CSS가 끝나고 오늘부터 JavaScript를 배우기 시작했다. JavaScript의 첫인상은 기대와는 상당히 많이 달랐다. CSS처럼 웹 개발에서 기능적인 부분만 담당하는 언어인 줄 알았는데 Python처럼 범용 프로그래밍 언어였다. 하지만 급하게 만들어진 언어라 아직도 이상한 부분이 꽤 많이 남아있는 것 같았다.

Transition

  • 속성의 값이 변할 때 그 변화를 일정 시간 동안 부드럽게 적용할 수 있게 해주는 속성
  • transition: 속성명 지속시간 변화곡선 지연시간;
  • 변화 곡선 : ease, linear, ease-in, ease-out, cubic-bezier

Animation

  • 애니메이션을 나타내는 CSS 스타일
  • @keyframes : CSS의 애니메이션 효과를 직접 지정하는 기능
@keyframes 이름 {
    from {시작 스타일;}
    to {끝 스타일;}
}
.class {
		animation: 이름 지속시간 형태 반복횟수;
}
  • 기본 설정
    • 이름 : 지정할 애니메이션의 이름
    • 지속 시간 : 애니메이션 지속 시간
    • 형태 : ease / linear 등 시간 함수
    • 반복 횟수 : 반복 횟수 지정 / infinite (무한 반복)

  • 애니메이션 설정
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

  • 애니메이션 적용
.spinner {
    width: 50px;
    height: 50px;
    border: 3px solid black;
    border-top: 3px solid white;
    border-radius: 50%;

    /* animation 적용 */
    animation: spin 1.4s linear infinite;
}

JavaScript

  • 급조된 언어
  • 문제가 많아 패치가 자주 있음
  • ES6 이후 Modern JS 많이 개선 됨
  • console.log() = 파이썬의 print()

JS 변수

var

  • Modern JS에서는 var를 사용 X
    • 중복 선언의 문제로 프로그램의 일관성이 깨질 위험이 있음
    • 디버깅 어려움
    • 선언 이전에 호출이 가능
// 변수의 선언
var a;
console.log(a);

// 초기화, 값의 할당
a = 10;
console.log(a);

// 값의 재할당
a = 100;
console.log(a);

// 변수의 중복 선언
var a = 1000;
console.log(a);

let

  • 변수 값의 재할당 가능
// 변수의 선언
let b;
console.log(b);

// 초기화
b = 3.14;
console.log(b);

// 재할당
b = "재할당";
console.log(b);

// 변수의 중복선언 불가
let b = 100;

const

  • Constant(상수)의 약자
  • 변수의 재할당 불가능
    • 프로그램의 일관성 상승
  • 재할당이 필요한 변수가 아니라면 사용을 권장
// 변수의 선언만 하는 것 불가
const c;

// 변수의 선언과 초기화를 함께
const c = 1000;
console.log(c);

// 재할당 불가
c = 10000;
console.log(c);

변수 이름 규칙

  • JS는 관례적으로 camelCase 사용
  • let myVar
// 숫자 시작 불가능
let 1

// 키워드 사용 불가능
let let
let if

// 변수에 공백 불가능
let my var;

// 특수문자 : _ $ 사용 가능
let $myVar;
let my_var;

원시 자료형

  • 변수에 값을 저장하는 자료형 (const로 값 변경 불가능)

문자열 (string)

  • 기본적인 사용
let text = "안녕하세요";
console.log(text);
// 안녕하세요

  • 문자열의 연산
let text2 = " 반갑습니다";
console.log(text + text2); // 문자열의 결합
// 안녕하세요 반갑습니다

  • 약타입 언어의 특징
let name = "태현";
let age = 27;
console.log("안녕하세요 저는 " + name + "입니다. 나이는 " + age + "살입니다.");
// 안녕하세요 저는 태현입니다. 나이는 27살입니다.

template literal

  • 변수와 문자열을 함께 쓸 수 있도록 하는 문법 (파이썬의 f-string)
console.log(`안녕하세요 저는 ${name}입니다. 나이는 ${age}살입니다.`);
// 안녕하세요 저는 태현입니다. 나이는 27살입니다.

숫자형 (number)

  • 정수와 실수를 구분 X
let num = 100;
let num2 = 3.14;
console.log(num, num2);
// 100 3.14

불리언/논리형 (boolean)

  • 참 거짓을 표현하는 true false (소문자로 표기)
let isTrue = true;
let isFalse = false;
console.log(isTrue, isFalse);
// true false

null (빈 값)

  • "값이 없음"을 명시
  • 이후에 값을 할당하라는 의미로 사용
let greeting = null;
console.log(greeting);
greeting = "안녕";
console.log(greeting);
// null
// 안녕

undefined

  • 값이 정의되지 않은 상태를 표현
let x;
console.log(x);
// undefined

객체 자료형 / 참조 자료형

  • 변수에 메모리상의 주소를 저장 (const로 주소가 아닌 값은 변경 가능)

배열 (Array)

let fruits = ["사과", "바나나", "수박", "포도", "딸기"];
console.log(fruits);
// Array(5)
// 0: "사과"
// 1: "바나나"
// 2: "수박"
// 3: "포도"
// 4: "딸기"
// length: 5

  • 인덱싱 (일반적인 방법으로는 음수 인덱싱 불가능)
console.log(fruits[4]);
console.log(fruits[-1]);
// 딸기
// undefined

  • .at(idx) 사용 시 음수 인덱싱 가능
console.log(fruits.at(4));
console.log(fruits.at(-1));
// 딸기
// 딸기

  • 인덱싱으로 값 변경 가능
fruits[3] = "샤인 머스킷";
console.log(fruits);
// Array(5)
// 0: "사과"
// 1: "바나나"
// 2: "수박"
// 3: "샤인 머스킷"
// 4: "딸기"
// length: 5

  • 이중 배열
const korean = [
    ["가", "나", "다"],
    ["라", "마", "바"],
    ["사", "아", "자"],
];
console.log(korean[1][1]);
// 마

객체 (object)

  • 키-값 쌍을 값으로 가진 자료형
let cat = {
    name: "장화",
    age: 10,
    isCute: true,
};
console.log(cat);
// age: 10
// isCute: true
// name: "장화"

  • 객체의 값 조회 방법
  1. 점 표기법 (키가 문자열인 경우만 가능)
console.log(cat.name);
console.log(cat.age);
console.log(cat.isCute);
// 장화
// 10
// true

  1. 대괄호 표기법 (키에 변수를 사용하고자 하는 경우에는 반드시 대괄호 표기법 사용)
console.log(cat["name"]);
console.log(cat["age"]);
console.log(cat["isCute"]);
// 장화
// 10
// true

let myKey = "name";
console.log(cat[myKey]);
// 장화

자료형 확인

  • typeof 사용
console.log(typeof "문자"); // string
console.log(typeof 100); // number
console.log(typeof 3.14); // number
console.log(typeof true); // boolean
console.log(typeof false); // boolean
console.log(typeof null); // object? -> 설계상의 실수
console.log(typeof undefined); // undefined
console.log(typeof fruits); // object
console.log(typeof cat); // object

형변환

암시적 형변환

  • 자동으로 수행하는 형변환
console.log("2" + 3);
console.log("" + 100);
// '23'
// '100'

명시적 형변환

  • 의도적으로 지정하는 형변환
  1. 문자열로 변환 String()
let str1 = 123;
let str2 = true;
let str3 = undefined;

console.log(String(str1), typeof String(str1));
console.log(String(str2), typeof String(str2));
console.log(String(str3), typeof String(str3));
// 123 string
// true string
// undefined string

  • .toString() 사용
console.log(str1.toString(), typeof str1.toString());
// 123 string

  1. 숫자로 변환 Number()
let n1 = "123";
let n2 = false;
let n3 = "문자열";
let n4 = 3.14;
let n5 = "3.14";

console.log(Number(n1), typeof Number(n1));
console.log(Number(n2), typeof Number(n2));
console.log(Number(n3), typeof Number(n3));
console.log(Number(n4), typeof Number(n4));
// 123 'number'
// 0 'number'
// NaN 'number'
// 3.14 'number'

console.log(Number(undefined), typeof Number(undefined));
console.log(Number(null), typeof Number(null));
// NaN 'number'
// 0 'number'

  • parseInt / parseFloat 사용
console.log(parseInt(n4, 10));
console.log(parseFloat(n5));
// 3
// 3.14

산술 연산자

let a = 20;
let b = 3;

console.log(a + b);
console.log(a - b);
console.log(a * b);
console.log(a / b);
console.log(a % b);
console.log(a ** b);
// 23
// 17
// 60
// 6.666666666666667
// 2
// 8000
  • 파이썬과 달리 // 몫 나누기 연산자 없음

비교 연산자

동등 비교

  • 같다 : == / ===
  • 다르다 : != / !==
  • == , != : 값만 비교, 자료형은 비교 X (사용X)
  • === , !== : 값과 자료형 모두 비교
console.log(1 == "1"); // true
console.log(1 != "1"); // false
console.log(1 === "1"); // flase
console.log(1 !== "1"); // true

마치며

Python을 다뤄보니 확실히 다른 언어도 이해하기 쉬워져서 상당히 많은 내용을 다룬 것 같다. 그런데 Python만 다루다가 JavaScript를 다루니까 이상하게 느껴지는 부분도 많고, 적응이 안 되는 부분이 상당히 많은 것 같다. 과연 앞으로 JavaScript에 잘 적응할 수 있을지 걱정이 된다.

NOTION

MY NOTION (CSS. 02)
MY NOTION (JavaScript. 01)
MY NOTION (JavaScript. 02)

profile
TaeHyun
Hello I'm TaeHyunAn, Currently Studying Data Analysis
이전 포스트

250829 [ Day 39 ] - CSS (3)

다음 포스트

250902 [ Day 41 ] - JavaScript (2)

0개의 댓글