sjindev 님의 블로그

자바스크립트의 Strict Mode자바스크립트는 유연한 문법을 제공하는 언어이지만,이로 인해 개발자가 실수하더라도 에러 없이 조용히 넘어가는 경우가 많다.이를 보완하기 위해 ES5부터 도입된 기능이 바로 Strict Mode(엄격 모드)이다.Strict Mode는 더 엄격한 문법과 실행 규칙을 적용하여 잠재적인 버그를 사전에 방지할 수 있게 해준다.1. Strict Mode란?Strict Mode는 자바스크립트 실행을 더 엄격하게 만들어 잠재적인 에러나 비표준 사용을 방지하는 모드이다.'use strict';위 문장을 코드 최상단이나 함수 내부에 작성하면 Strict Mode가 적용된다.주요 특징암묵적 전역 변수 사용 금지읽기 전용 프로퍼티에 값 할당 시 에러삭제 불가능한 프로퍼티 삭제 시 에러this가..

타입스크립트의 동작 원리에 대해서 알아보기 전, 타입 시스템을 먼저 알아보자. 타입 시스템언어에서 사용할 수 있는 아주 여러가지 값들을 어떤 기준으로 묶어서 타입으로 정할지 결정하고 또 코드의 타입을 언제 검사할지 그리고 어떻게 검사할지 등의 우리가 프로그래밍 언어를 사용할때 타입과 관련해서 지켜야 하는 규칙들을 모아둔 체계. 쉽게 말해서, 타입 시스템은 언어의 타입 관련된 문법 체계. 크게 두 가지로 나눌 수 있다. 정적 타입 시스템 : 코드 실행전에 모든 변수의 타입을 고정적으로 결정한다.동적 타입 시스템 : 코드를 실행하기 전에는 타입을 결정하지 않고 코드를 실행하고 나서 그때 그때마다 유동적으로 변수의 타입을 결정한다. 정적 타입 시스템은 엄격하고 고정적인 시스템이라고 볼 수 있고, 동적 타입 시..

프로퍼티 어트리뷰트란..자바스크립트에서 객체는 단순히 키-값 쌍으로 구성된 자료 구조처럼 보이지만, 실제로는 보다 복잡한 구조와 메커니즘을 갖고 있다. 객체의 각 프로퍼티는 내부적으로 숨겨진 메타 정보인 프로퍼티 어트리뷰트를 가지고 있으며, 이 정보에 따라 열거 가능성, 수정 가능성, 삭제 가능성 등이 결정된다.1. 내부 슬롯과 내부 메서드자바스크립트 엔진 내부에서 객체는 내부 슬롯과 내부 메서드를 가진다.이들은 언어 사양에 정의되어 있지만, 직접 접근할 수 없고 대괄호로 표현된 형식으로 나타난다.예: [[Value]], [[Writable]], [[Get]], [[Set]], [[Enumerable]], [[Configurable]]예를 들어, 다음과 같이 선언된 객체 프로퍼티에는 다음과 같은 내부 슬..

오늘은 MPA와 SPA가 무엇인지 각각 알아보고, 둘의 차이점을 알아볼 예정이다. MPA (Multi Page Application) 란?사용자 - 브라우저 - 서버는 각각 위와 같은 역할 및 동작을 수행한다. MPA는 사용자가 페이지를 이동할 때마다 서버에서 새로운 HTML 페이지를 받아오는 방식이다.- 전통적인 웹사이트 구조 (ex. 네이버, 다음)- 각 URL마다 실제 HTML 파일이나 서버에서 생성된 HTML 페이지가 존재- 페이지를 이동할 때마다 전체 페이지가 새로 로드 예시 흐름- GET /home → 서버에서 home.html 응답- GET /products → 서버에서 products.html 응답브라우저는 각 요청에 대해 새 HTML 문서를 받아오고, CSS/JS도 다시 요청하게 됨.SP..

오늘은 상태관리에 대해서 알아볼 예정이다. 상태란 무엇일까?=> 웹 페이지 내에서 눈에 보이는 / 보이지않는 모~든 데이터 변화를 상태라고 한다.예를들면, 사용자가 입력한 데이터 값, 버튼, 체크박스 등 진짜 말그대로 값이 변하는 모든 데이터!! 그러니까, 지금 작성하고 있는 블로그의 상단 이 화면또한 모두 상태이다. 그럼 이러한 변하는 데이터들을 관리할 필요가 있어보인다. 우리는 이를 상태관리라고 한다.페이지를 사용자의 화면에 띄우는 작업을 렌더링이라고 하는데, 상태가 바뀔때마다 웹페이지 전체가 리렌더링 된다면, 화면의 깜빡임 혹은 로딩처럼 화면이 계속해서 다시 뜨는 것을 보게될 것이고, 이는 사용자 UX에 좋지 못하다. 이를 개선하기 위해 상태관리가 필요하다! 그럼 위에서 말한 리렌더링을 방지하기 ..

함수 : 함수는 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것.[함수를 사용하는 이유]필요할 때마다 한번 정의해 둔 것을 호출만 하면서 재사용할 수 있는 장점이 있다. 이러한 장점으로 우리는 함수를 사용한다. 그것도 아주 많이. + 코드의 가독성 향상 측면도 아주 크다.[함수 리터럴]함수 리터럴의 구성요소var f = function add(x, y) { return x + y;}- function 키워드- 함수 이름- 매개 변수 목록- 함수 몸체[함수정의]-함수 선언문 : function add(x, y) { return x+y; } 방식- 함수 표현식 : var add = function add(x, y) { return x+y; }; 이렇게 변수에 할당하는 ..

[DOM 이란?]자바스크립트는 DOM을 통해 웹 페이지의 요소에 접근할 수 있다. DOM이란 Document Object Model의 약자로, 문서 객체 모델이다. DOM은 HTML로 작성된 여러 요소들에 자바스크립트가 접근하고 조작할 수 있도록 브라우저가 변환시킨 객체이다.쉽게 말하면 HTML로 작성된 요소들을 자바스크립트가 이해할 수 있도록 객체로 변환한 것 DOM 트리 예시네모 박스: HTML로 작성된 태그태그 요소 하나 하나를 노드(Node)라고 부름. 이 노드는 전부 하나의 객체로 이루어져 있음.이러한 DOM 트리를 통해 웹 요소를 웹 페이지에 나타낼 수 있고, 자바스크립트는 이 객체들을 사용해 웹 페이지를 조작할 수 있다. 노랑색으로 표시된 노드는 document 즉, 문서 노드파랑색으로 ..

오늘은 비동기와 API 에 대해서 알아볼 예정입니다.위 그림은 동기 / 비동기 를 이해하기 가장 유용한 것 같아 첨부하였습니다.동기 예시는 아래와 같습니다.const workA = () => { console.log('workA');};const workB = () => { console.log('workB');};const workC = () => { console.log('workC');};workA();workB();workC();위와 같이 작성한 코드는 호출 순서인 workA(), workB(), workC() 순으로 수행됩니다. 이번에는 자바 스크립트에서 사용하는 비동기 내장함수 setTimeout() 을 수행하여 비동기의 동작 흐름을 알아보겠습니다.const workA = (..

목차07 연산자08 제어문09 타입 변환과 단축 평가10 객체 리터럴11 원시 값과 객체의 비교[07 - 연산자]산술연산자 : 수학적 계산으로 새로운 숫자 값 만듦. 산술 연산이 불가하 경우 NaN 반환이항 산술 연산자 : +, -, *, /, %단항 산술 연산자 : ++, --, +(어떠한 효과도 없다), - (음수는 양수로, 양수는 음수로 변환)문자열 연결 연산자 : 문자열a + 문자열b = 문자열ab. 단, 해당 연산은 피연산자 중 하나 이상이 문자열인 경우에만 발생한다. 그 외에는 산술연산자로 동작한다.// true는 산술 연산시 1이라는 값을 갖는다.1 + true; // 2// false 는 산술 연산시 0이라는 값을 갖는다.1 + false; // 1// null은 산술 연산시 0이라는 값을..