AI 웹개발 취업캠프 - 4주차 위클리 학습일지 [NIPA/정보통신산업진흥원]

윤태경·2023년 8월 13일

NIPA웹개발취업캠프

📖학습

자바스크립트란

웹 사이트는 3가지 언어로 구성된다

HTML : 요소들의 배치와 내용을 기술하는 언어 - 뼈대
CSS : 색, 크기 애니메이션 등을 정의하는 스타일링 언어 - 외모
Javascript : 웹 사이트에 활력을 부여 - 근육

자바스크립트 엔진

자바스크립트는 자바스크립트 엔진에 의해 실행 된다. 자바스크립트 엔진은 자바스크립트가 실행될 수 있는 실행환경(runtime)이라고 부를 수 있다. 대표적으로 Chrome의 V8 엔진이 있다.

변수

변수는 값을 저장할 수 있는 공간이다. let이나 var 키워드로 변수를 생성할 수 있다. 변수를 만드는 작업을 선언한다라고 표현한다. var를 사용해서 선언한 변수는 중복해서 선언이 가능해 오류를 발생시킬 수 있다.

변수명을 짓는 규칙

기호를 사용할 수 없다. (예외: _, $)
숫자가 아닌 문자로 시작해야한다.
예약어는 사용할 수 없다. (if, else 등)

let age = 25;
console.log(age); // 25

var age2 = 30;
console.log(age2); // 30
var age2 = 40;
console.log(age2); // 40

상수

const 키워드로 상수를 선언할 수 있다. 변수와 마찬가지로 값을 저장한다. 읽기 전용이라서 재할당이 불가능 하다. 그렇기 때문에 선언과 동시에 초기화 되어야 한다.

const age = 25;
console.log(age); // 25

age = 30; // TypeError: "age" is read-only

자료형

Primitive Type(원시 타입) : 한번에 하나의 값만 가질 수 있다. (고정된 공간)
Non-Primitive Type(비 원시 타입) : 한번에 여러 개의 값을 가질 수 있다. (동적 공간)

Primitive Type

숫자형 (Number)
사칙연산이 가능한 숫자형 자료로 정수, 실수, 양의 무한대, 음의 무한대, NaN이 있다.

let number1 = 10;
let number2 = 3.14;
let number3 = Infinity;
let number4 = -Infinity;
let number5 = NaN;

문자형 (String)
큰 따옴표나 작은 따옴표로 감싸서 문자형을 나타낸다. 백틱(`)을 사용해 템플릿 리터럴로 문자열안에 변수를 넣을 수 있다.

let name1 = "철수";
let name2 = "영희";
let together = `${name1}와 ${name2}`
console.log(together); // 철수와 영희

형변환

자료형을 변환시키는 것을 형변환(casting)이라고 부른다.

명시적 형변환 : 프로그래머가 의도적으로 형변환

let numberA = 12;
let numberB = "2";
console.log(numberA + parseInt(numberB)); // 14

암묵적 형변환 : 자바스크립트에 의해 의도치않게 자동으로 형변환

let numberA = 12;
let numberB = "2";

console.log(numberA + numberB); // 122 문자열로 형변환
console.log(numberA * numberB); // 24 숫자로 형변환

연산자

대입 연산자 : 변수에 값을 대입

let a = 1;

산술 연산자

let a = 1;
let b = 2;

console.log(a + b); // 3 덧셈
console.log(a - b); // -1 뺄셈
console.log(a * b); // 2 곱셈
console.log(a / b); // 0.5 나눗셈
console.log(a % b); // 1 나머지

연결 연산자 : 두 개 이상의 문자열을 연결, 문자열과 숫자를 연결하면 암묵적 형변환에 의해 문자열로 연결된다. 덧셈을 할 때 양쪽이 숫자인지 유의해야 한다.

let a = "1";
let b = "2";

console.log(a + b); // 12

복합 연산자

let a = 5;

a = a + 10;
console.log(a); // 15

a += 10;
console.log(a) // 25

a -= 10;
console.log(a) // 15

a *= 2;
console.log(a) // 30

증감 연산자 : 후위 연산과 전위 연산으로 나뉜다. 전위는 증감이 바로 적용, 후위는 문장이 끝난 후 증감

let a = 10;

a++; // a + 1
console.log(a); // 11

a--;
console.log(a); // 10
console.log(++a); // 11
console.log(a++); // 11

논리 연산자

// NOT : 참 과 거짓 값을 뒤집는다.
// AND : 피 연산자 둘다 참이어야 참을 반환
// OR : 피 연산자 중 하나만 참이여도 참을 반
console.log(!true); // false NOT연산
console.log(true && false) // false AND연산
console.log(true || false) // true OR연산

비교 연산자

console.log(1 == "1"); // true 값만 비교
console.log(1 === "1"); // false 값과 타입을 비교
console.log(1 != "1"); // false 값은 같기 때문에
console.log(1 !== "1"); // true 값과 타입이 다르기 때문에
// 안전한 비교를 위해 === 연산자를 주로 사용

console.log(1 > 2); // false
console.log(1 <= 2); // true

typeof 연산자 : 변수의 자료형이 무엇인지 문자열로 반환한다.

let compareA = "1"
console.log(typeof compareA) // string

null 병합 연산자 : 피연산자 중에 null이나 undefined가 아닌 값을 선택한다.

let a; // undefined

a = a ?? 10;
console.log(a); 10

✔️학습후기

4주차 필수강의인 [Udemy]한입 크기로 잘라먹는 리액트를 보고 작성한 학습일지이다. 자바스크립트 기본부터 응용, 리액트, 리액트로 감성 일기장 만들기까지 이어지는 강의이다. 강사인 이정환님이 이해하기 쉽게 CodeSandBox로 예시를 보여주시며 잘 가르쳐 주신다. 지금 자바스크립트 기본까지 들었지만 앞으로의 강의가 기대가 된다. 빨리 감성 일기장까지 만들어 배포해보고 싶다.