공삼
article thumbnail
Published 2023. 8. 25. 23:54
[ES5] 엄격모드란? StrictMode? Front-End


엄격모드 StrictMode

ECMAScript5 (ES5)에서 도입된 "StrictMode" 또는 "엄격모드"는 자바스크립트의 실행 컨텍스트 내에서 코드를 더 엄격하게 처리하는 방식을 의미한다. 

 

엄격모드를 사용하면 더 많은 에러를 발견하고 예방하며, 작은 동작 차이를 제어할 수 있다.

 

엄격모드를 활성화 하려면

엄격모드를 활성화하려면 스크립트의 최상단이나 함수 내의 첫 줄에 "use stricet"; 문을 추가하면 된다. 

 

반드시. 최상단에 있어야 엄격모드가 활성화 된다.

 

React에서 사용한 나는 이런식으로 작성하였다. 

 

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

// 엄격 모드 활성화
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

 

엄격모드 적용 사항

  • 암묵적인 전역 변수 금지 - 변수를 선언하지 않고 값을 할당하지 못하게 된다.
  • 할당 불가능한 속성에 대한 할당시 에러 - 객체의 확장 불가능한 속성에 값을 할당하려고 하면 에러가 발생된다.
  • 삭제 불가능한 속성 삭제시 에러 - 삭세할수 없는 속성을 삭제하지 못하게 된다.
  • 함수의 매개변수 이름 중복 금지 - 함수 내에서 같은이름의 매개변수를 중복해서 선언할 수 없게 된다.
  • this 바인딩 변경 - 함수 내에서 this의 값이 전역객체(global object) 대신 undefined로 설정된다. this 오용을 방지하고 명시적인 this 사용이 가능하게 된다.
  • eval()의 스코프 분리 - eval()함수를 사용할 때 생성되는 변수와 함수는 eval() 내부 스코프에만 영향을 미치며, 외부 스코프에 영향으 주지 않는다. 
  • 예외처리 강화 - 일부 예외 상황에서 기존에는 무시되었던 에러가 엄격모드에서는 예외를 발생시킨다. 

 

엄격모드 꼭 사용해야 할까? 

일반적으로 권장 되지만 필수는 아니다. 엄격모드를 사용하면 코드작성시 발생할 수 있는 많은 잠재적인 문제를 예방하고 디버깅을 용이하게 만들어 주기 때문에 권장된다.

 

만약 ES6 클래스와 모듈을 사용해 구성한다면 생략해도 좋다. 그 이유는 ES6 모듈과 클래스가 기본적으로 엄격모드의 규칙을 따르기 때문이다. 

 

ES6모듈은 "use strict"모드자동으로 실행되기 때문에, ES6모듈을 사용하는 경우에는 명시적으로 엄격모드를 실행하지 않아도 모듈내의 코드는 엄격모드에서 실행되기 때문이다. 

 

또한 클래스라는 개념도 ES6에서부터 도입되었기 떄문에 클래스 내에서 작성된 코드는 자동으로 엄격모드에서 실행되는 것이 원칙이다. 따라서 클래스를 사용해도 추가적인 "use strict" 선언은 필요하지 않다. 

 

 

 

 

 

 

 


 🔗 참고문헌

https://ko.javascript.info/strict-mode

 

엄격 모드

 

ko.javascript.info

 

profile

공삼

@g_three

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!