본문 바로가기

WINK-(Web & App)/React.js 스터디

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

반응형

 

 

열심히 배워보겠습니다 !!!!!!! 나는 할 수 있다 아자아자 화이팅 !!!!!!!

 

콘솔
console.log('출력 값');
  • 괄호 안에 출력할 내용을 입력하면 된다.
  • 타 언어의 print와 역할이 같다.

 

주석처리
//저는 이종민입니다 이건 주석처리입니다
  • 컴퓨터를 무시하는 메시지
  • 코드를 비활성화하는데도 사용됨
⚠️ var
var x = 1;
var y = 2;

console.log(x, y);

 

  • 오늘날에는 사용하지 않음
    • 자바스크립트 초창기에 사용
    • 여러 문제점들을 갖고 있어 오류의 원인으로 작용

ES6 버전 이후부터는 이번 강에서 배울 let 과 const 로 대체

 

let과 const

let : 변수 - 넣은 데이터를 바꿀 수 있음

const : 상수 - 넣은 데이터를 바꿀 수 없음

let a=1;
const B=2; //상수는 보통 대문자로 명명

 

boolean : 참/거짓 여부
let bool1 = true;
let bool2 = false;
let bool3 = 1 < 2;
let bool4 = 1 > 2;

boolean은 참/거짓 여부를 알려주는 자료형이다.

3번의 경우는 2가 큰게 맞음으로 true

4번은 1이 더 작아서 false

let bool1 = !true;
let bool2 = !bool1;
let bool3 = !!bool2;

!연산자는 뒤에오는 boolean의 반대 값을 반환한다.

1번의 경우에는 boolean의 값이 true이므로 false를 반환하게 된다.

2번의 경우에는 bool1이 false이므로 반대값인 true가 반환된다.

3번도 마찬가지로 true의 반대인 false가 반환된다.

 

number : 숫자

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

let num1 = 10; // 정수
let num2 = 3.14; // 실수
console.log(1 + 2);
console.log(3 - num1);
console.log(num1 * num2);
console.log(num1 / num2);
console.log(10 % 3);

연산자를 사용할 수 있다

 

string : 문자열

' ' 또는 " " 로 둘러싼다

const str1 = 'Hello';
const str2 = "월드 🌐";

더하기 연산자는 이어 붙여진 값을 반환한다

str1 = str1 + " 🙂";
console.log(str3);

 

undefined 와 null

undefined : 아직 값이 지정되지 않음 / 데이터가 나올 곳이 아닌 자리 null : ‘비어 있다’는 정보를 적극 제공

let x;
console.log(x, typeof x);

x의 값이 지정되지 않았음으로 undefined가 출력됨

let x = null;
console.log(x, typeof x);

초기 설계부실로 null의 타입은 'object'로 반환됨

 

객체

데이터의 묶음 - 키 : 값의 조합

둘의 조합을 property라 부른다

const person1 = {
  name: '김철수',
  age: 25,
  married: false
};

 

 

출력하는법 

console.log(
	person1.name, // . 뒤에 키 이름
	person1['name'] // [] 안에 키 이름을 문자열로
);

 

 

property 추가하기

person1.job = 'programmer';
person1['bloodtype'] = 'O';

console.log(person1);

 

 

기존의 property 수정하기

person1.age++;
person1['job'] = 'PM';

console.log(person1);

 

const 인데 내용을 수정할 수 있는 이유

해당 상수 그 자체가 아닌, 그 내부 데이터는 변경 가능

아래에 배울 배열도 마찬가지

 

배열
const myArray = [true, 3.14, 'Hello', person1];

요소 추가 및 삭제법

myArray.push(123);
const popped1 = myArray.pop();
myArray.pop();

push : 요소를 추가함

마지막 요소를 반환하며 제거

그냥 제거만 하는 용도

 

switch문
const a = 1;

switch (a) {
	case 1:
		console.log('1');
		break;
	case 2:
		console.log('2');
		break;
	case 3:
		console.log('3');
		break;
	default:
		console.log('4');
}

break문이 없을시 다음 case문을 실행하게된다.

case중에 해당하는 값이 없거나 break문이 없을시 default가 실행된다.

반응형