자바스크립트

ReferenceError: File is not defined 에러 해결 방법

ReferenceError: File is not defined 에러이 에러를 만났다면, 아마 Node.js 에서 File 객체를 이용한 코드를 작성했을 것이다if (something instanceof File) { // ...}해결 방법Node.js 버전을 20.9 윗버전으로 업그레이드 하면 된다.참고 링크노드 버전 업그레이드 없이 해결하는 방법web-std 의존성을 설치하면 된다.

아이언 세션 (Iron session) 이란 무엇인가? (쉬운 설명과 보안 관련 생각해볼점)

iron session 이란? 안전하고 무상태인 쿠키 기반의 세션 라이브러리 더 쉬운 말로 설명하면? 사용자가 입력한 암호를 통해 쿠키값을 암호화하고 복호화해주는 것이다. 쿠키는 원래 클라이언트에게 공개되고 클라이언트가 임의로 변경할 수 있는 값인데 이에 보안을 주기 위해서 암호화/복호화를 하는 것이다. 작동 방식 세션 데이터가 서명되고 암호화된 쿠키에 저장된다. 서버 코드에서 네트워크가 필요 없는 상태 비저장 방식으로 디코딩된다. Ruby on Rails 에서 쓰는 것과 동일한 기술이다. 특징 서버리스 환경에 적합하다. 세션 데이터를 쿠키에 저장하여 별도의 서버측 저장소 필요 없음 사용자 패스워드가 없어도 안전하게 암호화가 가능하다. 미들웨어 하나로 쉽게 세션 기능을 추가할 수 있어서 러닝커브가 작다...

History API 란? (간단 정리)

History API 란? History 인터페이스는 브라우저의 세션 기록, 현재 페이지를 불러온 탭 혹은 프레임의 방문기록을 조작할 수 있는 방법을 제공한다. 브라우저에서 뒤로가기와 같은 액션을 수행했을 때 방문하는 페이지를 조작하는 것이다. history 는 싱글톤 인스턴스로 글로벌에 1개만 존재한다. 인스턴스 프로퍼티 History 인터페이스는 어떤 속성도 상속하지 않는다. length: 세션 기록에 몇개의 페이지가 있는지의 길이이다. scrollRestoration: 해당 세션으로 갔을 때 스크롤까지 복원할지를 설정한다. auto 혹은 manual 이 있다. state: 히스토리 스택의 맨 위에 있는 상태를 나타내는 값을 반환한다. pushState() 혹은 replaceState() 를 사용할 ..

자바스크립트의 Socket.io 라이브러리란? (웹소켓 통신 라이브러리)

개요 WebSocket 프로토콜을 사용해서 만든 양방향 통신이다. 웹에서 일반적으로 사용하는 HTTP 는 기본적으로 클라이언트가 서버에게 요청하는 관점이라면, WebSocket 은 서로서로 요청하는 양방향이다. low-latency (낮은 지연), bi-directional (양방향), event-based (이벤트 기반) 로 클라이언트와 서버가 통신할 수 있게 해준다. 기본 통신 예제 emit() 은 메세지를 보낸다. (연결된 모든 소켓에게 보낸다.) boradcast.emit() 이란 것도 있는데, 이는 나 빼고 모두에게 메세지를 보낸다. on() 은 메세지를 받는다. 서버 코드 import { Server } from "socket.io"; // 웹소켓 서버를 생성 const io = new Ser..

이벤트 루프는 어떻게 non-blocking 연산을 막힘없이 처리하는가?

자바스크립트 이벤트 루프 파헤치기 이를 이해하기 위해서는 자바스크립트 런타임 환경에서의 추가적인 컴포넌트의 역할을 알아야 한다. 추가적인 컴포넌트란 Web APIs (브라우저에서) 나 C++ APIs (Node.js) 를 말하며 이를 알아야 한다. 자바스크립트 런타임 환경 컴포넌트 4가지 Heap: 메모리 할당이 이루어지는 곳 Stack: 스택 프레임 (함수 호출) 이 저장되고 관리되는 곳 Task Queue: 비동기 작업의 콜백이 여기에 대기함 Event Loop: 호출 스택과 작업의 대기열을 확인하는 오케스트레이터 Non-Blocking I/O 는 어떻게 동작하는가? 비동기 호출: HTTP 요청, 타이머, Node.js 의 파일 I/O 와 같은 비동기 함수가 호출되면 Javascript 는 이 작업을..

자바스크립트의 싱글 스레드 모델과 이벤트 루프

싱글 쓰레드 모델과 Event Loop 논블로킹과 Event Loop 에 대한 간단한 설명 Blocking 요청과 Non-Blocking 요청에 대한 처리가 다름 Non-Blocking 요청이 들어왔을 때는 이벤트 루프에 담아서 처리함 Blocking 요청일 때는 워커 스레드에게 맡김 자바스크립트의 싱글 스레드 모델 작동 방식 싱글 스레드: 한 번에 하나의 연산을 단일 시퀀스로 처리함 실행 컨텍스트: 자바스크립트 코드가 실행되면, "실행 컨텍스트 (Execution Context)" 에서 실행함. 실행 컨텍스트는 코드가 실행되는 순서를 처리함. 호출 스택 (Call Stack): 실행 컨텍스트 관리를 위해 콜스택을 사용함. 콜스택은 프로그램에서 현재 위치를 기록하는 데이터 구조로 사용됨. 가장 최근에 호..

자바스크립트에서 머신 코드 대신 바이트 코드를 사용하는 이유

V8 Engine 이 Machine Code 대신 Byte Code 를 사용한 이유 이식성 (Portability) 바이트 코드는 머신 코드보다 이식성이 뛰어남 머신 코드는 프로세스 아키텍처에 따라 다르므로 CPU 마다 다를 수 있음 바이트 코드는 호환되는 모든 머신이 있는 모든 머신에서 실행 가능 JS 를 다양한 기기와 운영체제에서 실행할 수 있게 해줌 보안 머신 코드보다 바이트 코드로 먼저 컴파일하면 추상화 계층이 늘어나 보안이 강화될 수 있음 머신별 취약점을 악용하기 어려워짐 최적화 기회 (Optimization Opportunities) 바이트 코드로 컴파일한 다음 실행하며 핫 경로(자주 실행되는 코드)를 최적화하여 머신 코드로 컴파일하는 JIT 이라는 기술을 사용함 JIT 을 통해 V8 은 정적..

innerHTML vs innerAdajcentHTML() 비교

innerHTML vs innerAdajcentHTML() 비교 둘 다 HTML 내용을 다룰 때 쓰이는 가장 일반적인 방법 중 하나이다. innerHTML 은 프로퍼티의 형태로 쓰이고 innerAdjacentHTML() 은 메서드의 형태로 쓰인다. innerHTML 프로퍼티 HTML 의 getter 혹은 setter 의 역할을 하는 인터페이스이다. 내용을 가져올 수도 있고 내용을 삽입할 수도 있다. 장점 직관적이고 사용하기 쉽다. 내부 내용 전체를 대체해야 할 때 유용하다. 단점 엘리먼트 내부 전체 내용을 지웠다가 새로 렌더링 해야 하는 만큼 비용이 크다. 사용자가 작성한 내용을 innerHTML 로 더해주는 코드가 있다면 XSS 공격에 취약해진다. innerAdjacentHTML() 메서드 전달된 텍스..

자바스크립트 이벤트(Event) 객체와 커스텀 이벤트 (Custom Event) 란?

자바스크립트 이벤트(Event) 객체와 커스텀 이벤트(Custom Event) 란? 자바스크립트는 브라우저에서 이벤트 콜백을 통해 화면(DOM)과 함께 상호작용 하는 일이 잦다. 흔히 사용되는 이벤트로 클릭, 마우스 움직임, 키 입력, 양식 제출 등이 있다. 기본 이벤트 중 필요한 이벤트가 없거나 특수한 이벤트를 만들고 싶을 때 커스텀 이벤트(Custom Event) 를 만들 수 있다. 이를테면 동영상 플랫폼에서는 동영상을 재생하는 이벤트나 일시정지하는 이벤트 등을 만들 수 있다. MDN Event 공식문서의 Interfaces based on Event 항목 을 보면, 자바스크립트 이벤트를 기반으로 한 인터페이스가 아주 많다. 원하는 이벤트가 있는지 먼저 찾아보면 된다. 커스텀 이벤트 사용 방법 이벤트..

node js 실행 시 Error: Can not find module semver 에러 해결하기

Error: Cannot find module 'semver' node.js 패키지가 꼬여서 발생하는 에러이다. 나는 mocha framework 를 사용하기 위해 npm 과 node 의 버전을 최신으로 올리려다 발생했다. 1단계: node js 삭제 node.js 를 삭제했다가 다시 깔아보자. sudo apt-get purge nodejs sudo apt-get purge npm sudo apt-get purge 명령어에 대한 설명 cd /etc/apt/sources.list.d 로 접근하여 노드 목록이 있으면 제거한다. sudo rm -rf /usr/local/bin/npm /usr/local/share/man/man1/node* /usr/local/lib/dtrace/node.d ~/..

정규표현식의 플래그란? (what is flag in regular expression?)

정규표현식의 플래그란? (Regular Expression flags) 플래그로 정규표현식의 동작방식을 변경할 수 있다. 정규표현식 전체의 동작방식에 영향을 미친다. /regex/flags regex 자리에 정규표현식 패턴이 오고, flags 에 플래그가 온다. 플래그(flags)는 modifiers 라고 불리기도 한다. 플래그의 종류 g (global) i (case-insensitive) m (multiline) s (dotall) u (unicode) y (sticky) g (global) 플래그 설명과 예제 정규표현식의 기본 동작은 입력 문자열에서 매칭된 첫번째 케이스만을 찾아낸다. g (global) 플래그는 모든 케이스를 찾아내도록 한다. g 플래그를 적용하지 않는다면 입력된 문자열: hell..

정규표현식 (Regular Expression) 이란?

정규표현식이란? 패턴을 통해 원하는 텍스트를 매칭시키는 도구이다. 특정 문자열이 있는지 검사하거나 특정 문자열만 변경하거나 하는 등의 기능에 사용된다. 정규표현식 엔진이 동작하는 방식 보통 정규표현식의 검색 방식을 '값을 소비한다' 고 표현한다. 일단 패턴에 매칭되는 문자를 찾으면 매칭된 문자열을 소비하기 때문이다. 소비한다는 것은 엔진이 매칭된 문자의 위치를 전진시킨다는 것이다. 그래서 소비 이후에는 더이상 이전의 문자가 매칭되지 않는다. 단, 소비되었다고 해서 문자가 지워지거나 변경된 것은 아님을 아는 것이 중요하다. 단 Lookaround 의 경우에는 값을 소비하지 않는다. 정규표현식의 구성 요소 메타 문자열(Metacharacters): 정규표현식에서 특수한 의미를 갖는 문자들을 말..