[2025 1학기 React.js 스터디] 강민지 #1주차

1주차 첫 블로깅 !!!!! 스타트

1. 콘솔 & 주석

console.log('Hello');

• console.log = 타 언어의 print
• ;(세미콜론) = 문장 끝 부호, 필수 ❌

console.log('Hello'); // 안녕하세요~!

// console.log(false);

• // - 주석달 때, 코드 비활성화할 때

2. 변수 & 상수

⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️var⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️

var x = 1;

• 오늘날 사용 ❌ ———- let, const로 대체

2-1. let (변수)

let a = 1; 
let b = a; // 데이터를 다른 주머니로
a = "에이"; // 주머니 a 속 데이터 변경

• 주머니 속 데이터 변경 ⭕
• : 자바스크립트에서는 숫자, 텍스트, 불리언, 객체 등 어떤 데이터도 담을 수 있다!

2-2. const (상수)

const A = 1; 
// A = 2 안됨~~~ 데이터 변경 불가

• 주머니 속 데이터 변경 ❌
• 보통 대문자로! (국룰)

🌟 변수 명명 규칙

• 영문, 한글, 숫자 등 가능
• BUT 숫자로 시작 ❌
• 특수문자는 $ or _
• 띄어쓰기 사용 ❌
• 예약어 사용 ❌

3. 자료형 & 연산자

3-1. boolean (자료형)

let bool1 = true; // 참
const bool4 = 1 > 2; // false 출력

• 참/거짓 여부

console.log(typeof bool1);
// console.log('boolean'); 과 동일

let bool5 = !true; //즉 true의 반대값인 false

• typeof 연산자 = 자료형 반환
• ! 연산자 = 반대값

3-2. number (숫자 자료형)

let num1 = 10; // 정수
let num2 = 3.14; // 실수

• 정수/실수, 용량 구분 없음

3-3. string (문자열 자료형)

const str1 = '안녕';
const str2 = "Wink";
console.log(typeof '1'); // 이때 1은 숫자 아니고 문자!!

• 작은따옴표/큰타옴표 구분 ❌

3-4. undefined & null (자료형)

• undefined : 값이 지정되지 않음 / “모른다”
• null : 비어 있음 / “실패했다”

4. (+ 연산자

4-1. 비교 연산자

const a = 1;
const b = 2;

console.log(a == b, a != b); 
// false, true 출력

• == : 자료형 달라도 값이 같음
• 반대 : ! =
• === : 자료형, 값 모두 같음
• 반대 : ! ==

const str1 = 'ABC';
const str2 = 'DEF';

• 부등호: 사전순서상 뒤로오는 쪽이 더 큼

4-2. 부수효과 연산자

~ ++ vs ++ ~

• ~ ++ : 값을 증가시키지 않은 채 사용
• ++ ~ : 값을 증가시킨 채 사용

4-3. 할당 산술 연산자

let x = 3;
x += 2;
console.log(x); // 출력 5
x -= 3;
console.log(x); // 출력 2

• 문자열은 +=만 가능

4-4. boolean 관련 연산자

console.log(true && false); // false 출력
console.log(true ll false); // true 출력

• &&(and): 양쪽이 모두 true 면 true
• ll(or): 한쪽만 true 면 true

4-5. 삼항 연산자

let num5 = 103247 + 1;

console.log(
  'num5는 3의 배수' +
  (num5 % 3 === 0 ? '입니다.' : '가 아닙니다.')
);
// num5는 3의 배수 입니다.

• (조건) ? (참일 때 값) : (거짓일 때 값)

5. 객체 & 배열

5-1. 객체

const person1 = {
    name: '강민지',
    age: 22,
  };

// 출력 방식  
console.log(person1.name) // 식별자 명명 규칙에 맞을 시
console.log(person1['name'])

• 키 : 값의 조합 = property
• 자료형 이외의 모든 데이터

5-2. 배열

const myArray = [true, 3.14, 'Hello', person1];
console.log(myArray, myArray.length); // 배열의 요소개수

console.log(myArray[0])

// 요소 추가
myArray.push(123);

// 요소 삭제
myArray.pop();

• 키 = number 타입

6. if & else 문

const a = 1;
const b = 2;

if (a < b) {
	console.log('a가 b보다 작다.');
} else if (a > b) {
	console.log('a가 b보다 크다.');
} else {
	console.log('a와 b는 같다.');
}

// else if 여러 개여도 ok

• if ↔ else (T/F)

7. Switch 문

const firePower = 1;

switch (firePower) {
	case 1:
		console.log('레어');
		break;
	case 2:
		console.log('미디움');
		break;
	case 3:
		console.log('웰던');
		break;
	default:
		console.log('오류');
}

• break 제거하면, 원하는 케이스부터 아래 (원하지 않는)케이스들까지 모두 출력됨
• default : 위의 case 중 해당하는 값이 없을 때