Notice

Recent Posts

Recent Comments

Link

« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

Tags more

Archives

Today

Total

관리 메뉴

072DATA

모던 JavaScript 튜토리얼 ( 모던 자바스크립트, 엄격 모드, 변수와 상수 ) - 스터디 1주차 본문

카테고리 없음

모던 JavaScript 튜토리얼 ( 모던 자바스크립트, 엄격 모드, 변수와 상수 ) - 스터디 1주차

0720 2024. 12. 3. 21:29

모던 자바스크립트?

왜 그냥 자바스크립트가 아니라 모던 자바스크립트 일까요?

해당 페이지의 튜토리얼을 진행하다보면 '모던' 자바스크립트가 그냥 자바스크립트와 무엇이 다른지 궁금해졌습니다.

모던 자바스크립트의 정의

모던 자바스크립트의 정의로는 2015년에 나온 ECMAScript 2015(6판)와 그 이후의 판을 구현한 자바스크립트

라고 정의가 되는데 여기서 ECMAScript에 대한 의문도 생기게 되는 것 같습니다.

ECMAScript?

ECMA International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어입니다.

ECMAScript 개정안

표준화가 필요했던 배경

브라우저 전쟁과 호환성 문제
- 1990년대 Netscape와 Microsoft는 각자의 브라우저(Navigator와 IE)에서 서로 다른 JavaScript 구현을 했습니다
- 같은 코드가 브라우저마다 다르게 동작하는 문제가 발생했습니다
- 웹 개발자들은 브라우저별로 다른 코드를 작성해야 했습니다

웹의 급속한 성장
- 웹이 빠르게 성장하면서 JavaScript의 일관된 구현이 필요해졌습니다
- 크로스 브라우저 호환성이 중요한 이슈로 대두되었습니다

그래서 모던 자바스크립트가 뭐라고?

따라서 표준화가 필요했던 이유 중 가장 큰 문제는 브라우저 간의 다른 구현 방식이 가장 큰 문제였습니다.

개발 생산성 저하나, 유지보수의 어려움, 사용자 경험 저하 등 이러한 문제들이 결국

ECMAScript를 추진하게 된 주요 동기가 된 것이고, 모던 자바스크립트는

표준화된 명세를 따르기 때문에 언급했던 문제들을 해결하기도 하고 개발자들이 더 효율적으로

코드를 작성 할 수 있도록 발전한 현대적 표준을 따르는 자바스크립트라고 정리가 될 것 같습니다.

자바스크립트 기본

자바스크립트의 기본 튜토리얼을 쭉 진행했을 때 이전에 놓쳤던 부분, 새롭게 알게되는 부분이 많았습니다.

그 중에서 가장 궁금하고 신기했던 부분들을 추려내서 설명을 해보려고 합니다.

1. 엄격모드

1.1 엄격 모드란?

자바스크립트는 기존 기능을 변경하지 않고 새로운 기능을 추가하면서 발전해왔습니다.

이는 기존 코드의 호환성을 유지할 수 있다는 장점이 있었지만,

언어 자체의 실수나 불완전한 부분을 수정하기 어렵다는 단점도 있었습니다.

이런 상황에서 ES5(ECMAScript 5)는 새로운 기능을 추가하고 기존의 일부 기능을 수정하였습니다.

하지만 기존 코드에 영향을 주지 않기 위해, 이러한 변경사항들은 특별한 지시자인

"use strict"를 사용할 때만 적용되도록 설계되었습니다.

"use strict";
// 이 코드는 엄격 모드로 실행

1.2 "use strict"? 사용해본 적 없는데?

네 저도 "use strict" 라는 지시자를 사용해본적이 없던 것 같습니다.

모던 자바스크립트를 사용하고 있는 입장에서 이 지시자를 사용하지 않았다는게

제가 이 튜토리얼을 진행하면서 되게 궁금했던 오류고 어째서 이 부분에 대해서 생소했는지? 알아 보았습니다.

정답은 생각보다 간단할 것으로 추측되는데, 아주 자연스러운 현상으로

우리는 이미 현대적인 자바스크립트 개발 방식을 사용하고 있다는 겁니다.

1.2.1 프레임워크/라이브러리 환경

현대의 많은 개발자들은 React, Vue와 같은 프레임워크나 라이브러리를 사용하여 개발을 진행합니다.

이러한 환경에서는

프레임워크가 자동으로 strict mode를 적용
빌드 도구(바벨, 웹팩 등)가 코드를 자동으로 변환
ES6 모듈 시스템을 사용할 때 자동으로 strict mode 적용

    import React from 'react'

    //리액트 환경에서 use strict를 자동 적용

1.2.2 바닐라 자바스크립트 환경

순수 자바스크립트만을 사용하는 환경에서도 "use strict" 지시자를 볼 일이 없었는데

그 이유는

최신 브라우저들은 현대적인 JavaScript 기능 지원
ES6 이후 문법 사용 시 자동으로 더 엄격한 규칙 적용
현대의 코드 에디터와 ESLint 같은 도구들이 잠재적 문제를 사전에 감지

과거의 문법

    var name = "John";  // 함수 스코프, 호이스팅 발생

현대의 문법

    // 이런 현대적 문법을 사용하면 자동으로 strict mode로 동작
    let name = "John";
    const age = 30;

이 외에도 화살표 함수나 템플릿 리터럴 그리고 배열 구조 분해, 객체 구조 분해 등

많은 현대적 문법을 사용하고 있었고 자동으로 엄격한 규칙이 적용되어서

명시적으로 "use strict"를 선언하지 않아도 안전하게 코드를 작성할 수 있었던 것 입니다.

1.3 정리

정리해보면 엄격 모드("use strict")는 자바스크립트가 더 안전하고

현대적인 방식으로 동작하도록 만들어주는 장치입니다.

제가 느낀 현재의 자바스크립트 개발 환경에서는 이를 직접 지시할 필요도 경험도 없었습니다.

이 안에서는 되게 여러가지의 이유와 주제들이 존재하며 파내고 파내다보니 새로운 지식들이 생겨났고

결론을 냈을 때 모던 자바스크립트에서 새로운 기능들은 우리가 모르는 사이에 이미 엄격 모드의 규칙을 포함하며

현대적인 개발 도구나 모듈 시스템이 자동으로 적용시켜주고 있었습니다.

2. 변수와 상수

2.1 var의 시대

과거 자바스크립트에서는 var를 사용해 변수를 선언했습니다.

하지만 var에는 몇 가지 심각한 문제가 있었습니다.

var의 문제점

호이스팅 (Hoisting)

console.log(name); // undefined
var name = "John";

변수 선언이 코드 최상단으로 "끌어올려지는" 현상
선언 전에 변수를 참조할 수 있는 이상한 상황 발생

중복 선언 가능

var user = "John";
var user = "Pete"; // 문제없이 작동

같은 변수를 여러 번 선언할 수 있어 의도치 않은 덮어쓰기 발생

함수 스코프

function example() {
 var x = 1;
 if (true) {
     var x = 2;  // 같은 x를 참조
     console.log(x);  // 2
 }
 console.log(x);  // 2
}

var는 블록 스코프가 아닌 함수 스코프를 가지기 때문에, 상위 함수의 렉시컬 환경에 있는 x의 값이 변경되고 이러한 동작은 예측하기 어려워 대응이 늦어집니다.

퀴즈

각 콘솔창에는 어떤 숫자가 출력될까요?

var x = 1; 

function example() {
    var x = 2;    

    if (true) {
        var x = 3;
    }

    console.log("문제 1: ", x);
}

console.log("문제 2: " , x);

정답

문제 1: 3
문제 2: 1

2.2 현대적 해결책: let과 const

ES6에서는 이러한 문제들을 해결하기 위해 let과 const를 도입했습니다.

let의 특징

TDZ가 존재함

TDZ는 정말 쉽게 말해서 변수가 선언 되기 전에 "접근 금지 구역"이 존재한다라고 생각하면 됩니다!
```
  function example() {
      // TDZ 시작
      console.log(name); // 에러! 아직 접근 금지 구역

      let name = "John"; // 여기서 TDZ 끝
      console.log(name); // "John" - 이제 사용 가능
  }
```
let도 호이스팅은 되지만 결국 TDZ로 인해서 해당 변수를 참조할 수는 없습니다.

중복 선언 불가

블록 스코프를 가짐

블록 스코프는 { } (중괄호) 안에서만 변수가 유효한 것을 의미합니다.

      let x = 1;

      {             // 블록 스코프 시작
          let y = 2;  // 블록 안에서만 사용 가능한 변수
          console.log(x); // 1 (외부 변수는 블록 안에서 접근 가능)
          console.log(y); // 2 (블록 안에서 정상 동작)
      }             // 블록 스코프 끝
      console.log(x);
      console.log(y); // 참조 에러: y is not defined
                      // (y는 블록 밖에서 접근 불가능)

y는 블록 {} 안에서 선언되었기 때문에 블록 밖에서는 접근할 수 없음
x는 블록 밖에서 선언되었기 때문에 블록 안에서도 접근 가능

const의 특징

재할당 불가

  const PI = 3.14;
  PI = 3.15; // 타입 에러: Assignment to constant variable

단, 객체나 배열의 내부 값은 변경 가능

      // 배열의 경우
      const arr = [1, 2, 3];
      arr.push(4);       // 가능 [1, 2, 3, 4]
      arr.pop();         // 가능 [1, 2, 3]
      arr[1] = 5;        // 가능 [1, 5, 3]
      arr = [4, 5, 6];   // 에러! 재할당 불가

      // 객체의 경우
      const user = {
          name: "John",
          age: 30
      };
      user.age = 31;     // 가능
      user.city = "NY";  // 가능
      delete user.age;   // 가능
      user = {};         // 에러! 재할당 불가

2.3 실무에서의 권장사항

기본적으로 const 사용
- 변수의 값이 변경될 일이 없다면 const 사용
- 코드의 의도를 명확히 전달할 수 있음

변경이 필요한 경우에만 let 사용
- 반복문의 카운터나 값이 바뀌어야 하는 경우에만 사용

var는 사용하지 않기
- 레거시 코드를 제외하고는 var 사용을 피함
- 예측 가능하고 안전한 코드를 위해 let/const 사용

마치며

오늘은 https://ko.javascript.info/ 에서 소개하는 자바스크립트에 튜토리얼을 진행해 보았고

목차 소개~자바스크립트 기본 부분을 살펴봤습니다.

물론 샅샅히 다 보진 않았지만..ㅎㅎ 제가 읽었던 범위에서 가장 궁금하고

소개하고 싶었던 내용을 담아서 정리해보았습니다.

궁금했던 부분을 해소할 수 있어서 좋았고 앞으로도 기대가 되네욥

참조했던 링크 남기며 마치겠습니다. 감사링

참조 링크

https://blog.nextinnovation.kr/tech/ecmascript6/

https://violetboralee.medium.com/%EB%AA%A8%EB%8D%98-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80-f7e115f03533

https://ccomccomhan.tistory.com/288#google_vignette

https://ko.javascript.info/