[React.js] 한입크기로 잘라먹는 리액트 Day.01 _ 인프런

👉 인프런의 한입크기로 잘라먹는 React.js 강의를 수강하는 이유가 궁금하다면 ?

2024.04.16 - [front end +/강의노트] - [인프런] 한입크기로 잘라먹는 리액트 Day.00

[인프런] 한입크기로 잘라먹는 리액트 Day.00

 

⚡수강범위

오늘은 다른 일정상 1일차만 수강했다.

오늘 공부한 내용

⚡내용정리

기초적인 내용이지만, 정리해보려고 한다.

1. 변수

let age = 27;
// age라는 변수에 27이라는 초기값을 설정

age = 30;
// 값을 변경 할 수 있다.

let age1;
// 초기값을 설정하지 않으면 console.log(age1);확인 시 undefined로 출력

let age (X)
// 변수는 중복으로 선언 할 수 없다.

 

2. 상수

const birth = "111.1115.111";
// const는 let과 달리, 값을 변화시킬 수 없기 때문에 필수로 초기값을 설정해줘야 한다.

 

변수와 상수는 값을 저장하는 박스!

3. 변수 명명 규칙

// $(달러표시), _(언더바)를 제외한 기호는 사용 할 수 없다.
let name# (X)
let $_name = 0; (O)


// 숫자로 시작 할 수 없다.
let 1name (X)
let name1 = '이름'


// 예약어를 사용 할 수 없다.
let let (X)
let if (X)


// 누구든 알아보기 쉬운 이름으로 변수 이름을 설정 하는 것을 지향한다.
let a = 1257;
// 보다는
let salesCount = 1257;

 

4. 자료형(Type)

자료형
- 원시타입 - Number
           - String
           - Boolean
           - null
           - undefined
- 객체타입 - Object - Array
                    - Function
                    - RegexExp

 

이번 시간엔 원시타입에 대해서만 알아보았다. 객체 타입은 추후 다룰 예정이다.

원시타입이란?

프로그래밍에 있어서 가장 기본적인 값들의 타입들을 의미한다.

 

4-1. Number Type

존재 할 수 있는 모든 숫자들의 값들을 포함한다.

let num1 = 27;
let num2 = 1.5; 
let num3 = -20;

console.log(num1 + num2);
console.log(num1 - num2);
console.log(num1 * num2);
console.log(num1 / num2);
console.log(num1 % num2); // 나머지 구하는 연산 : 모듈러 연산

// 숫자로 보이지 않는 독특한 number type
let inf = Infinity // 양의 무한대
let mInf = -Infinity // 음의 무한대

let nan = NaN; // not a number : 연산 실패 했을경우에 사용

4-2. String Type

문자열 타입

// 문자열은 무조건 '' 혹은 ""을 반드시 사용!
let myName = '유니버스' 
let myLocation = '우주'

let introduce = myName + myLocation;
console.log(introduce) // 유니버스우주


// **템플릿 리터럴 문법**
let introduceText = `${myName}은 ${myLocation}에 거주합니다`
// 백틱 기호를 사용 하면, 문자열 안에 변수 값을 동적으로 넣을 수 있다 
console.log(introduceText); // 유니버스은 우주에 거주합니다

 

템플릿 리터럴 문법이란?

내장된 표현식을 허용하는 문자열 리터럴

표현식 / 문자열 삽입, 여러 줄 문자열, 문자열 형식화, 문자열 태깅 등 다양한 기능을 제공

백틱기호(``)를 사용

 

4-3. Boolean Type

참, 거짓만을 저장하는 타입 -> 상태를 확인 할 때 사용

let isSwitchOn = true;
let isEmpty = false;

 

4-4. Null Type

변수에 아무런 값도 갖지 않도록 지정

let empty = null;

 

4-5. Undefined Type

let none;
console.log(none) // undefined

 

undefined 와 null의 차이점!
null은 개발자가 직접 초기값으로 입력해야 한다.
undefined는 변수 선언시 값을 할당하지 않아도 자동으로 지정된다.

 

⚡새로 알게된 내용

vscode가 편리한 이유는 다양한 확장프로그램들을 제공하기 때문인 것 같다.

나 역시도 다양한 확장 프로그램들을 사용 하고 있지만, 이번 강의를 통해 새로운 확장프로그램을 알게 되었고 다른 사이드프로젝트나 개인 포폴등을 코딩할 때 너무 유용하게 사용중이다!

Error Lens