Life and IT

자바스크립트는 싱글 스레드라는 것은 개념을 외우듯이 알고 있었다. 하지만 자바스크립트 언어를 만든 브렌던 아이크 선생님은 왜 싱글 스레드를 선택했을까? 우선 그전에 프로세스와 스레드의 개념을 알고 가야 할 것 같다. 프로세스와 스레드 프로세스는 운영 체제로부터 할당받은 작업의 단위이다. 프로세스 내부에는 Code, Data, Stack, Heap이라는 네 가지 리소스가 존재한다. 프로그램을 실행했을 때 보조 기억장치(ex. 하드 디스크)에서 프로그램의 코드를 컴파일하여 주 기억장치인 메모리에 옮겨가면, 그것을 프로세스라고 한다. 스레드는 프로세스가 할당받은 자원을 사용하는 작업의 흐름 단위이다. 스레드는 Stack을 가지며 나머지 Code, Data, Heap 리소스를 사용하며 작업을 처리한다. 이때 ..

Status Code, 즉 상태 코드는 http 요청 시에 request가 아닌 response에서 요청의 처리 상태를 알려주는 기능이다. 100 ~ 5xx번 대의 상태 코드가 존재하며 숫자 맨 앞자리의 번호에 따라 처리 상태의 종류가 달라진다. 1xx (informational): 요청이 수신되어 처리 중 요청을 받았으며 작업을 계속한다는 의미를 가지고 있다. HTTP/1.0 이래로 1xx 상태 코드들은 정의되지 않았다고 하니, 실험적인 상태를 제외하고 HTTP/1.0 클라이언트로 보내면 안 된다. 2xx (Successful): 요청 정상 처리 클라이언트가 요청한 동작을 수신하여 이해했고 승낙했으며 성공적으로 처리했음을 가리킨다. 200(성공): 서버가 요청을 제대로 처리했다는 뜻이다. 이는 주로 서..

Firebase는 원래 데이터 베이스였다. 하지만 구글이 인수를 한 뒤에 데이터 베이스뿐만 아니라 다양한 백엔드 기능을 제공해주는 플랫폼으로 바뀌었다. Firebase를 이용하면 사용자 인증, 데이터 베이스, 스토리지 등과 같은 백엔드 단에서 필요한 기능을 구축하는 데에 쓰이는 시간을 아낄 수 있고, 오직 프런트엔드에서의 비즈니스 로직만을 구현하는 데에 집중할 수 있다. 이러한 특징으로 Firebase는 Serverless BaaS(Backend as a Service)의 한 예이기도 하다. Serverless BaaS에서는 Firebase가 가장 대중적이고 커뮤니티 또한 많이 활성화 되어 있다고 한다. 나는 팀 프로젝트에서 로그인 인증 방식을 Firebase를 활용하여 구글 로그인을 구현하였다. 많은 ..

개요 다른 관심사 Blocking/NonBlocking과 Sync/Async 두 그룹은 관심사가 다릅니다. 즉 동작은 비슷하지만 서로 관련이 없는 개념입니다. Blocking/NonBlocking Blocking/NonBlocking은 호출되는 함수가 바로 리턴하느냐 마느냐가 관심사다. 호출된 함수가 바로 리턴해서 호출한 함수에게 제어권을 넘겨주고, 호출한 함수가 다른 일을 할 수 있는 기회를 줄 수 있으면 NonBlocking입니다. 그렇지 않고 호출된 함수가 자신의 작업을 모두 마칠 때까지 호출한 함수에게 제어권을 넘겨주지 않고 대기하게 만든다면 Blocking입니다. Synchronous/Asynchronous Synchronous/Asynchronous는 호출되는 함수의 작업 완료 여부를 누가(호..

Cross Browsing이란? 한국소프트웨어진흥원의 "Cross Browsing 가이드"에 따르면 다음과 같이 설명하고 있다. Cross Browsing이란 적어도 표준 웹 기술을 채용하여 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 비슷하게 만듦과 동시에 어느 한쪽에 최적화되어 치우지지 않도록 공통 요소를 사용하여 웹페이지를 제작하는 기법을 말하는 것이다. 또한, 지원할 수 없는 다른 웹브라우저를 위한 장치를 구현하여 모든 웹브라우저 사용자가 방문했을 때 정보로서의 소외감을 느끼지 않도록 하는 방법론적 가이드를 의미하는 것이다. 이는 인터넷 환경 자체가 일반 테스크톱 웹 브라우저뿐만 아니라 모바일, 임베디드 기기, 홈 네트 워킹용 장비 등 아주 다양한 인터넷 환경이 존재하며, 일반인, 장애자,..

Renderer Process(이하 렌더러 프로세스)의 내부 작동 렌더러 프로세스는 웹 퍼포먼스의 많은 측면을 다룬다. 이것은 렌더러 프로세스의 내부에서는 많은 작업들이 존재하기 때문이다! 렌더러 프로세스에는 어떤 일들이 벌어질까? 렌더러 프로세스는 웹 콘텐츠들을 다룬다 렌더러 프로세스는 탭의 내부에서 발생하는 모든 것들에 대해 책임을 가지고 있다. 렌더러 프로세스에서 Main thread(이하 메인 스레드)는 당신이 사용자에게 보내는 코드의 대부분을 다룬다. 만약 당신이 web worker 또는 service worker를 사용한다면, 자바스크립트의 코드 일부는 때때로 Worker thread가 다루게 된다. Web Worker와 Service Worker Web Worker와 Service Worke..

스토어 스토어는 내부적으로 리듀서와 1. 애플리케이션의 상태, 2. 이벤트 리스너, 3. dispatching 여부를 나타내는 값 (isDispatching: boolean)을 관리한다. createStore API 내부 api 코드를 통해 구독하고 있는 리스너를 등록 및 관리하는 것을 알았다. action의 유효성 체크, dispatching 여부를 확인하고 등록된 리스너들을 forEach로 순회하며 수행하는 전반적인 과정을 알 수 있었다. 여기서 replaceReducer의 경우, 실제 구현 코드에서는 nextListeners와 currentListeners로 리스너 목록의 변경에 대한 상태를 분리해서 slice에 대한 비용을 줄였다고 한다. 하지만 리듀서 자체를 동적으로 활용한다는 점은 아직 와닿지..

JS 인스턴스 클래스나 프로토 타입으로 만들어낸 것. 생성된 인스턴스의 원래 객체인 클래스 또는 프로토타입이 가지고 있는 프로퍼티와 메서드를 모두 상속받는다는 특징이 있다. export default 모듈 모듈을 내보낼 때 default 키워드가 붙으면 해당 모듈엔 하나의 개체만 존재한다고 명시하는 것이다. default가 있으면 모듈을 불러올 때 중괄호로 감싸지 않고 기입이 가능하다. 프로토타입 오브젝트의 메소드를 사용할 때에, 가장 가까운 프로토타입 오브젝트의 메서드를 먼저 참고한다. => 메서드 오버라이드 Ajax : 비동기 처리를 가능하게 만듬 V8 : 서버 로직 상당수를 브라우저 로직으로 넘어오게 하여 프런트 엔드 개발자에 대한 인식이 달라짐 nodeJS : 프론트 엔드와 백엔드를 모두 다룰 수..

C언어와 같은 정적 타입 언어는 변수를 선언할 때 무조건 변수에 할당될 데이터의 타입을 정해주어야 한다. 그러므로 해당 변수에는 선언된 데이터 타입의 값만 할당할 수 있다. 이는 컴파일 시에도 데이터 값이 선언된 타입과 맞는지 확인하여 맞지 않으면 오류를 보내게 된다. 이처럼 데이터 타입에 강제성을 부여하면 훨씬 안정적인 코드를 작성할 수 있다. 이에 반에 자바 스크립트나 파이썬과 같은 동적 언어들은 변수의 재할당에서 자유롭다. 이는 해당 변수가 어떠한 데이터 타입이든 가질 수 있다는 것을 의미한다. 이는 편리하다는 장점이 있지만, 반대로 단점 또한 존재한다. 자유로운 데이터 타입 변화는 코드가 복잡할수록 변수의 데이터 타입 추적에 어려움을 겪게 만든다. 이 때문에 오류를 뿜어내기도 하는 것이다. 따라서..

Object Oriented Programing (OOP)의 기본 아이디어는 단순하고 직관적이다. 객체는 데이터와 기능을 논리적으로 묶어 놓은 것이다. OOP는 우리가 사물을 이해하는 자연스러운 방식을 반영하도록 설계되었다. 만약 자동차가 객체라면 그 데이터에는 제조자, 모델, 차량 번호와 같은 것들이 있을 것이다. 그 기능으로는 변속, 문 열기와 같은 것들이 있을 것이다. 그렇다면 비유를 통해 OOP의 기본 용어에 대해 알아보자. 클래스는 '어떤 자동차'처럼 추상적이고 범용적인 것이다. 인스턴스는 특정 자동차처럼 구체적이고 한정적인 것이다. 기능은 메서드라고 부른다. 클래스에 속하지만 특정 인스턴스에 묶이지는 않는 기능을 클래스 메서드라고 부른다. 예시로 시동을 거는 기능은 클래스 메서드라고 부를 수 ..