오늘 뭐했냐/개발에 대한 주저리 124

GraphQL

GraphQL은 API를 위한 쿼리 언어이며, 데이터를 요청하고 전달하는 데 사용되는 런타임입니다. Facebook에 의해 개발되었으며, 2015년에 공개적으로 출시되었습니다. GraphQL과 REST API의 주요 차이점 클라이언트 중심의 쿼리: GraphQL을 사용하면 클라이언트가 필요한 데이터의 구조를 정의할 수 있습니다. 클라이언트는 정확히 필요한 데이터만 요청하고, 서버는 그에 맞게 응답합니다. 이는 불필요한 데이터 전송을 줄이고 애플리케이션의 성능을 개선할 수 있습니다. 단일 엔드포인트: GraphQL은 단일 엔드포인트를 사용하여 모든 요청을 처리합니다. 이는 REST API에서 볼 수 있는 여러 URL 엔드포인트와 대조적입니다. 타입 시스템: GraphQL은 강력한 타입 시스템을 제공합니다...

23.10.20 (JS에서의)this

JavaScript에서 this 키워드는 실행 컨텍스트에 따라 현재 실행 중인 함수나 메서드의 "소유자"를 참조한다. 즉, this의 값은 어떻게 함수가 호출되었는지에 따라 달라진다. 전역 컨텍스트 전역 실행 컨텍스트에서 this는 전역 객체를 참조합니다. 브라우저에서 this는 window 객체를, Node.js에서는 global 객체를 가리킵니다. 함수 컨텍스트 일반 함수 호출: 일반적인 함수에서 this는 기본적으로 전역 객체를 참조합니다. 엄격 모드('use strict';)에서는 this가 undefined로 설정됩니다. 메서드 호출: 객체의 메서드로서 함수가 호출될 때, this는 그 메서드를 호출한 객체를 참조합니다. 예: obj.method()에서 this는 obj를 참조합니다. 생성자 함..

23.10.19 가비지 컬렉션

원시값, 객체, 함수 등 우리가 만드는 모든 것은 메모리를 차지하기 때문에 쓸모 없는 것들에 대한 처리가 필요하다. 가비지 컬렉션 프로그램이 더 이상 사용하지 않는 메모리를 자동으로 찾아내고, 이를 해제하여 재사용할 수 있도록 한다. 기준 자바스크립트는 도달 가능성(reachability) 이라는 개념을 사용해 메모리 관리를 수행 한다. ‘도달 가능한(reachable)’ 값은 쉽게 말해 어떻게든 접근하거나 사용할 수 있는 값을 의미 한다. 도달 가능한 값은 메모리에서 삭제되지 않는다. 예시 현재 함수의 지역 변수와 매개변수 중첩 함수의 체인에 있는 함수에서 사용되는 변수와 매개변수 전역 변수 기타 등등 이런 값은 루트(root) 라고 부른다. 루트가 참조하는 값이나 체이닝으로 루트에서 참조할 수 있는 ..

23.10.18 CommonJS와 ES6

JavaScript 모듈을 정의하고 사용하는 두 가지 주요 방식이다. CommonJS module.exports 객체를 이용하여 자신의 데이터를 외부로 내보낼 수 있고, require() 함수를 이용하여 외부 모듈의 데이터를 불러올 수 있다. // 내보내기 ... module.exports = CustomError; // 가져오기 const CustomError = require("../error.js"); 내보낸 객체는 복사본으로 처리된다. 즉, 모듈을 가져올 때 모듈의 복사본이 생성되며, 원본 모듈에 대한 변경이 가져온 모듈에 영향을 미치지 않는다. ES6 Modules ES6 Modules은 ECMAScript 2015(ES6)에 도입된 공식 JavaScript 모듈 시스템이다. // 내보내기 ....

23.10.14 프로토타입

프로토타입 자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있다. 그리고 이것은 마치 객체 지향의 상속 개념과 같이 부모 객체의 프로퍼티 또는 메소드를 상속받아 사용할 수 있게 한다. 이러한 부모 객체를 프로토타입 객체 또는 줄여서 프로토타입이라 한다. 즉, 프로토타입은 한 객체가 다른 객체로부터 속성과 메서드를 상속받을 수 있게 하는 기본 객체 또는 참조이다. 프로토타입체인 자바스크립트는 특정 객체의 프로퍼티나 메소드에 접근하려고 할 때 해당 객체에 접근하려는 프로퍼티 또는 메소드가 없다면 [[Prototype]]이 가리키는 링크를 따라 자신의 부모 역할을 하는 프로토타입 객체의 프로퍼티나 메소드를 차례대로 검색한다. [[Prototype]] vs prototype 프로퍼티 [[..

23.10.13 태스크 큐

nextTickQueue *process.nextTick()의 콜백을 관리 한다. *process.nextTick() : 이벤트 루프의 현재 실행 중인 작업을 마친 후, 다음 이벤트 루프 반복 전에 주어진 콜백을 실행하도록 예약하는 메서드이다. microTaskQueue Resolve된 프라미스 콜백을 가지고 있다. Node v11.0.0을 기준으로 다르게 작동한다. 11 이전 이전에는 한 페이즈에서 다음 페이즈로 넘어가기 전에 nextTickQueue와 microTaskQueue를 검사했다. 즉, 매 *틱마다 검사했다. *틱: 현재 페이즈에서 다음 페이즈로 넘어가는 것이다. 11 이후 현재 실행하고 있는 작업이 끝나면 즉시 실행하도록 변경되었다. 실행 순서가 바뀌게 된 이유는 바로 브라우저와의 일관성 ..

23.10.12 이벤트 루프

이벤트 루프 여러 비동기 작업을 관리하기 위한 구현체로 비동기 작업들을 모아서 관리하고 순서대로 실행할 수 있게 해주는 도구이다. 이벤트 루프의 페이즈 Timer Phase: 말 그대로 setTimeout이나 setInterval과 같은 함수가 만들어 내는 타이머들을 다룬다. Pending Callbacks Phase: pending_queue에 담기는 콜백들을 관리한다. 이 큐에 담기는 콜백들은 이전 이벤트 루프 반복에서 수행되지 못했던 I/O 콜백들이다. Idle, Prepare Phase: Node.js의 내부적인 관리를 위한 페이즈로 자바스크립트를 실행하지 않는다. Poll Phase: 새로운 I/O 이벤트를 다루며 watcher_queue의 콜백들을 실행한다. watcher_queue에는 I/O..

23.10.11 Node.js에서 비동기 처리

Node.js는 JS를 기반으로 한 싱글 스레드를 사용하는데 어떻게 비동기처리가 가능할까 하는 의문에서 찾아봤다. 비동기 처리를 위한 주요 요소 싱글 스레드 기반의 이벤트 루프: Node.js는 기본적으로 싱글 스레드로 동작합니다. 이벤트 루프는 콜 스택이 비어있을 때 콜백 큐에서 콜백 함수를 가져와 실행합니다. 이러한 방식으로 비동기 이벤트에 반응합니다. libuv 라이브러리: Node.js는 비동기 I/O 연산을 지원하기 위해 libuv 라이브러리를 사용합니다. libuv는 백그라운드에서 여러 스레드를 가진 스레드 풀을 관리하여 I/O 작업을 병렬로 처리합니다. I/O 작업이 완료되면, 해당 작업과 관련된 콜백이 콜백 큐에 추가됩니다. 비동기 I/O: Node.js는 파일 시스템 작업, 네트워크 요청..

23.10.10 ci/cd 다시 정리

기존에 정리한 것은 내용이 부족한 부분이 많아 다시 찾아보고 거기서 생긴 의문을 다시 추가했다. 지속적 통합 (Continuous Integration, CI): 목적: 코드 변경사항을 정기적으로 통합하여 소프트웨어 품질을 향상시키고, 개발 과정에서 발생할 수 있는 문제를 조기에 발견하고 해결합니다. 과정: 개발자들이 자신의 변경사항을 공유 코드 저장소(예: Git)에 자주(일반적으로 하루에 여러 번) 푸시(push)합니다. 코드가 저장소에 푸시될 때마다, 자동화된 빌드 및 테스트가 실행되어 코드 변경사항이 나머지 시스템과 잘 통합되는지 검증합니다. 이점: 버그를 빠르게 찾아내고 해결할 수 있으며, 소프트웨어의 품질을 지속적으로 유지할 수 있습니다. 지속적 배포 (Continuous Deployment)..

23.10.09 CORS 재정리

기존에 찾아봤던 내용이라 글이 있지만 다시 보기엔 너무 간단한 내용만 있어서 이것도 다시 정리한다. 물론 기존에 글도 도움이 된다. 내가 당시에 어떻게 이해를 했고 생각을 했었는지 보게 되면서 이렇게 새로 정리하면서 조금 더 깊게 알게된다. CORS Cross-Origin Resource Sharing의 약자이다. *출처가 다른 자원들을 공유한다는 뜻으로, 한 출처에 있는 자원에서 다른 출처에 있는 자원에 접근하도록 하는 개념이다. *출처 (Origin): Protocol + Host + Port 3가지가 같으면 동일 출처라고 한다. SOP Same-Origin Policy의 약자이다. 웹 페이지가 자신의 출처와 다른 출처의 리소스에 직접 접근하는 것을 막는 정책으로 기본적으로 웹 페이지가 다른 도메인에..