JavaScript - this 키워드 이해하기!

자바스크립트를 통해 개발하다보면 가끔보게 되는 키워드가 있는데, 바로 `this`라는 키워드이다. 보통 `this` 라고 하면 인스턴스 본인을 가리킬때 사용하는 키워드이다. 하지만 자바스크립트에서는 이 `this`가 다른 언어와 조금은 다르게 바인딩되는 경우들이 있다.  이번 글에서는 위와 같은 경우가 어떤 상황에서 발생하는지 정리해보려고 한다.this 를 출력해보자F12키를 눌러 console에서 this를 한번 찍어보면 아래와 같은 값이 나오게 된다.> this> Window {applicationCache: ApplicationCache {status: 0,LocalNTP: ƒ LocalNTP()alert: ƒ alert() oncached: null…}assert: ƒ assert(conditio..

• format_list_bulleted Programming/JavaScript
• · 2025. 2. 22.

JavaScript - 실행 컨텍스트 (Execution Context)

실행 컨텍스트(Execution Context)란 자바스크립트 코드가 실행되고 연산되는 범위를 나타내는 추상적인 개념으로, 코드가 실행된다면 실행 컨텍스트에서 작동하고 있는 것이라고 이해할 수 있다. 실행 컨텍스트는 자바스크립트의 다양한 개념 중 기본이 되는 개념이기 때문에, 이를 이해하고 자바스크립트 개발을 하는 것이 중요하다.실행 컨텍스트, 왜 필요할까?앞서 말했듯이 실행 컨텍스트는 코드를 실행하기 위해 필요한데, 어떻게 실행하기 위함인지가 중요하다. 소프트웨어 구현 전략 중에 하나는 코드를 여러 조각(functions, modules, packages 등)으로 나누는 것이다. 이렇게 분리하는 이유는 단 하나, 프로그램의 복잡성을 분리하고 관리하기 위함이다. 이제 코드를 작성하는 입장이 아닌 코드를 ..

• format_list_bulleted Programming/JavaScript
• · 2025. 2. 10.

REST API 이해하기!

(이전 블로그에 2019년 10월 28일에 작성된 글을 옮겨 편집한 글입니다) 과거에는 브라우저가 웹서버에 웹페이지를 요청하여 클라이언트를 제공하여 웹페이지가 작동하였다. 하지만 최근에는 SPA(Signle-Page-Application)를 이용하여 클라이언트를 구현하며, 클라이언트를 서버와 분리하여 클라이언트 로직을 구분한다. 또한 서버에 API를 요청하므로써 웹 어플리케이션을 개발한다. 이때 서버의 API를 구성할 때, 아무렇게 만드는 것이 아니라 규격이 필요한데, 컨벤션이라고도 할 수 있는 일정한 규칙이 필요하다.REST API 란REST API에 REST는 REpresentational State Transfer(대표적인 상태 전달)의 약자로 소프트웨어 프로그램 아키텍처의 한 형식인데, "웹에 존..

• format_list_bulleted Programming/Web
• · 2025. 2. 4.

SQL - 랜덤 액세스 알아보기!

쿼리 성능 최적화에 대해 팀에서 이야기하다보면 종종 랜덤 액세스에 대한 이야기가 나오곤 한다. 성능 최적화를 할때 보통 인덱스 사용여부와 쿼리 실행계획 정도만 보고 최적화를 하는데 랜덤 액세스란 무엇이고 무슨 관련이 있어서 쿼리 성능 최적화에서 항상 대두되는 것일까? 랜덤 액세스란랜덤 액세스(무작위 접근, 임의 접근, 직접 접근)란 한 번에 여러 블록에 액세스하는 것이 아니라 한 번에 하나의 블록에만 액세스하는 싱글 블록 I/O 방식을 의미한다. 다르게 말하면 데이터를 순차적으로 읽지 않고, 데이터의 특정 위치로 직접 접근하여 읽거나 쓰는 방식을 의미한다. 이는 컴퓨터 과학에서 데이터에 저장된 순서로 검색할 것을 요구하는 시퀀셜 액세스(순차 접근)와 반대되는 말이다. *블록: HDD나 SSD에 저장되는 ..

• format_list_bulleted Database/SQL
• · 2025. 2. 2.

CORS 이슈 이해하고 해결하기!

(이전 블로그에 2019년 9월 23일에 작성된 글을 옮겨 편집한 글입니다) 이 포스트에서는 CORS 에러에 대해서 다뤄보려한다. CORS 에러는 웹 개발을 하게 되면 반드시 한 번쯤 겪게되는 이슈로, 클라이언트와 서버의 오리진이 서로 다를 때 발생하는 이슈이다. CORS란 무엇인가?CORS는 Cross Origin Resource Sharing의 약자로 프로토콜 또는 호스트, 포트가 다른 서버의 자원을 요청하는 매커니즘을 말한다. 이때 요청을 할때는 cross-origin HTTP 에 의해 요청된다. 하지만 브라우저의 *동일 출처 정책(same-origin policy) 때문에 CORS 같은 상황이 발생하면 외부서버에 요청한 데이터를 브라우저에서 보안목적으로 차단한다. 그로 인해 정상적으로 데이터를 받..

• format_list_bulleted Programming/Web
• · 2025. 1. 27.

문자 인코딩 파해치기! (UTF, BOM, NFD vs NFC)

고객에게 문의가 왔다.CSV 파일을 업로드 했는데 데이터가 정상적으로 생성되지 않았다는 내용이였다. 그래서 고객이 올린 파일의 내용을 확인하기 위해 파일 서버에서 해당 파일을 다운로드해 열어보니... 흔히 텍스트가 깨졌다고 하는데. 왜 이런 현상이 발생했을까?문자 인코딩이란?컴퓨터가 문자를 인식하기 위해서는 이를 바이트(Byte) 형태로 변환하는 과정이 필요하다.이를 문자 인코딩이라고 하며, 문자 인코딩에는 다양한 규격이 존재한다. 대표적으로 다음과 같은 인코딩 형식이 있다.ASCIIUTF-8UTF-16EUC-KR: 2Byte로 한글 표현 EUC-JP: 2Byte로 일어 표현etc.... 즉, 문자는 지정된 규격에 따라 인코딩되어 바이트로 변환되 저장하기 때문에, 문자가 깨지지 않게 읽기 위해선 사용된 ..

• format_list_bulleted Computer Science/etc
• · 2025. 1. 12.