한입 크기로 잘라먹는 리액트 - 자바스크립트 기본(1)

이정환님의 한입 크기로 잘라먹는 리액트 강의를 듣고 정리한 글이다.
https://www.udemy.com/course/winterlood-react-basic/

자바스크립트 란

웹 사이트는 HTML, CSS, Javascript 3가지 언어로 만들어 진다.

• HTML : 요소들의 배치와 내용을 기술하는 언어, 색이나 크기 등의 디자인 수행 X
• CSS : 색, 크기, 애니메이션 등을 정의하는 스타일링을 위한 언어
• Javascript : 웹 사이트에 활력을 부여하는 언어

자바스크립트는 웹 사이트를 실질적으로 움직이는 언어로 경고창, 서버로 데이터를 받거나 전송 등 거의 모든 일을 맡아 수행하는데 다른말로 웹을 움직이는 근육이라고 부른다.

자바스크립트 엔진

자바스크립트는 자바스크립트 엔진에 의해 실행된다. 자바스크립트 엔진 웹 브라우저에 포함되어 있으며 대표적으로 Chrome 브라우저의 V8 엔진이 있다.

자바스크립트 엔진을 내장한 웹 브라우저는 자바스크립트가 실행될 수 있는 환경인 실행환경(runtime)이라고 부를 수 있다.

변수와 상수

변수

값을 저장할 수 있는 이름을 가진 공간을 변수라 한다. 자바스크립트에서는 let 키워드를 통해 변수를 만들 수 있다. let 키워드와 함께 변수를 만드는 작업을 변수를 선언한다라고 표현한다.

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

age = 35;
console.log(age); // 35

변수명을 짓는 몇가지 규칙

• 변수명에는 기호를 사용할 수 없다. 예외로 사용할 수 있는 기호 ( _, $ )
• 변수명은 반드시 숫자가 아닌 문자로 시작해야한다.
• 예약어는 피해야한다. (if, else 등)

let 키워드 외에도 var도 존재한다. 똑같이 변수를 선언하고 불러오고 수정도 가능하다. 그러나 var는 프로그래머들을 함정에 빠트릴 수 있다.

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

var age = "35";
console.log(age) // "35";

위 처럼 똑같이 변수 선언이 가능하다. 이거는 잘못된 동작이다. 짧은 코드에서는 파악이 가능하지만, 코드가 길어진다면 오류를 발생할 확률이 높아진다. 위에선 숫자형으로 쓰였지만 아래에선 문자형으로 쓰이면서 에러가 발생할 수 있다.

let키워드는 변수를 중복해서 선언하는 것을 허용하지 않기 때문에 함정에 빠질 가능성을 줄여준다.

상수

변수와 똑같이 값을 이름으로 부르기 위해 존재한다. 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 age = 25; // 정수
  
  let tall = 175.9; // 실수
  
  let inf = Infinity;
  
  let minusInf = -Infinity;
  
  let nan = NaN;
  
  console.log(age + tall) // 200.9
  console.log(age * tall) // 4397.5

• 문자형 (String)

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

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

  • 불리언 (Boolean)

    참 혹은 거짓을 나타내는 데이터 타입이다. true나 false로 표현한다.

    let isSwitchOff = false;

  • Null

    아무것도 없다는 것을 지칭하는 값이자 자바스크립트에서는 자료형으로 사용한다. null은 의도적으로 값이 아무것도 안 담고 있다는 것을 가리킬 때 사용하는 값이다.

    let a = null;
    console.log(a); // null

  • Undefined

    변수를 선언후 아무것도 할당하지 않으면 자동으로 undefined 값을 할당 받게 된다.

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

형변환

값은 유지하면서 자료형은 변경할 수 있는 형변환, 문자열과 숫자를 곱했는데 결과는 숫자로 나오게 된다. 자바스크립트가 문자열을 자동으로 숫자로 인지해서 나타난 결과이다. 자바스크립트 엔진은 다른 자료형과 연산을 수행할 때 적절하게 자료형을 변환시켜 결과를 돌려준다. 이처럼 자료형을 변환시키는 것을 형변환(casting)이라고 부른다.

let numberA = 12;
let numberB = 2;

console.log(numberA * numberB); // 24

let numberC = "2";
console.log(numberA * numberC) // 24
console.log(numberA + numberC) // 122 
console.log(numberA + parseInt(numberC)) // 14

우리가 명시를 하지 않고 의도하지 않아도 자동으로 형변환이 일어나는 것을 자바스크립트가 묵시적(암묵적)으로 형변환을 한다라는 의미로 묵시적 형변환이라고 부른다.

parseInt 메소드를 이용하면 문자열을 숫자로 의도적으로 형변환하여 연산이 가능하다 이를 명시적 형변환이라고 한다.

연산자

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

  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++); // 10

• 논리 연산자

  • 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 연산자

  자바스크립트는 타입에 자유롭다. 숫자형인 변수에 문자형을 넣을 수도 있다 이를 동적 타입 언어라고 하는데 유연하게 코드를 짤 수 있지만 에러가 발생할 수도 있다.

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

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

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

  let a; // undefined
  
  a = a ?? 10;
  console.log(a); 10

조건문

연산의 결과인 참 거짓에 따라 각기 다른 명령을 실행할 수 있도록 하는 조건문

let a = 3;

if (a >= 7) {
    console.log("7 이상")
} else if (a >= 5) {
    console.log("5 이상")
} else {
    console.log("5 미만")
}

let country = "ko";

if (country === "ko") {
    console.log("한국");
} else if (country === "cn") {
    console.log("중국");
} else if (country === "jp") {
    console.log("일본");
} else {
    console.log("미 분류");
}

모든 조건을 하나씩 else if 치려면 힘들 것이다. 이렇게 조건이 많을 때 사용할 수 있는 switch 문이 있다.

let country = "ko";

switch (country) {
    case "ko":
        console.log("한국");
        break
    case "cn":
        console.log("중국");
        break
    case "jp":
        console.log("일본");
        break
    case "uk":
        console.log("영국");
        break
    default:
        console.log("미분류");
        break
}

break 문이 없다면 모든 코드가 수행할 명령으로 인식되므로 적절한 위치에 break문을 넣어야한다.