Life's

클로저(Closure)는 JavaScript의 중요한 개념 중 하나로, 함수와 함수가 선언된 어휘적 환경(Lexical Environment)을 함께 기억하는 구조이다.클로저는 주로 함수 내부에서 정의된 또 다른 함수를 통해 외부 함수의 변수에 접근할 수 있도록 하며, 이를 통해 다양한 유용한 기능을 구현할 수 있다.클로저의 기본 개념클로저는 내부 함수가 외부 함수의 변수에 접근할 수 있는 메커니즘이며, 내부 함수가 외부 함수의 범위에 있는 변수를 "기억"하기 때문에 클로저가 형성된다.function outerFunction() { const outerVariable = "I am outside!"; function innerFunction() { console.log(outerV..

JavaScript에서 this는 컨텍스트(context)를 나타내는 중요한 키워드로, 코드가 실행되는 문맥에 따라 달라진다. this의 동작을 이해하는 것은 JavaScript의 핵심 개념 중 하나이며, 다음은 this에 관한 주요 사항과 그 사용 방법을 설명한 내용이다.전역 컨텍스트(Global Context)에서의 thisJavaScript에서 this는 기본적으로 전역 객체를 참조한다. 브라우저 환경에서는 window 객체가 전역 객체이며, Node.js에서는 global 객체가 전역 객체이다.console.log(this); // 브라우저에서는 window, Node.js에서는 global 출력함수 컨텍스트(Function Context)에서의 this함수 내부에서 this는 해당 함수를 호출한..

자바스크립트는 함수형 프로그래밍을 지원하는 언어 중 하나이다. 함수형 프로그래밍의 여러 기법 중 하나인 커링(currying)은 자바스크립트 코드의 재사용성과 가독성을 높이는 데 도움을 줄 수 있다. 이번 블로그 글에서는 커링의 기본 개념과 이를 자바스크립트에서 어떻게 활용할 수 있는지 정리하고자 한다.커링(Currying)이란?커링은 다수의 인수를 받는 함수를 일련의 함수 호출로 변환하는 기술이다. 보다 구체적으로 말하자면, 커링은 여러 인수를 받는 함수를 단일 인수를 받는 함수의 연속으로 변환하는 과정이며, 이를 통해 부분 적용(partial application)과 같은 강력한 함수형 프로그래밍 패턴을 활용할 수 있다.커링의 기본 개념커링의 기본 개념을 이해하기 위해 간단한 예를 살펴보자. 두 수를..

자바스크립트는 싱글 스레드 기반 언어로, 한 번에 하나의 작업만 수행할 수 있다. 그러나 실제 웹 애플리케이션에서는 여러 작업을 동시에 처리해야 하는 경우가 많다. 예를 들어, 서버에서 데이터를 가져오거나, 파일을 읽거나, 사용자 입력을 기다리는 등의 작업이 있다.이러한 비동기 작업을 처리하기 위해 자바스크립트는 다양한 방법을 제공한다. 이 글에서는 Callback, Promise, Async/Await에 이어 Generator와 Yield 문법까지 살펴보려 한다.CallbackCallback 함수란?Callback 함수는 다른 함수에 인수로 전달되어 나중에 실행되는 함수이다. 비동기 작업이 완료된 후에 호출되는 함수로, 자바스크립트에서 비동기 처리를 구현하는 가장 기본적인 방법이다.function fe..

infer란 무엇인가?infer 키워드는 TypeScript의 조건부 타입(Conditional Types)과 함께 사용되어 특정 타입을 추론할 수 있는 메커니즘을 제공한다. 기본적으로 제네릭 타입에서 특정 부분을 추출하거나 변환할 때 유용하며, 타입스크립트가 타입을 추론하는 과정에서 특정 타입을 변수처럼 사용할 수 있다.type Example = T extends infer U ? U : never;여기서 T extends infer U는 T 타입을 U라는 이름으로 추론하겠다는 의미이다. 이 간단한 예제는 T 타입 자체를 U로 추론하고, 그 결과로 U를 반환합니다infer의 실제 활용 예제infer 키워드를 사용하면 복잡한 타입에서 특정 부분을 쉽게 추출할 수 있으며, 이를 통해 타입 변환을 간결하게 ..

anyany 타입으로 선언되었을 경우에는 어떠한 타입의 될 수 있는 타입을 의미한다. any를 사용하면 TypeScript의 타입 체크를 우회할 수 있기에 해당 변수에 어떠한 타입의 값이든 할당할 수 있다. 이로 인하여 타입 안정성이 없어지므로, 런타임 오류가 발생할 가능성이 높아진다.let something: any;something = 123; // 숫자 할당 가능something = "hello"; // 문자열 할당 가능something = true; // 불리언 할당 가능something.someMethod(); // 타입 오류 없음, 하지만 런타임에 오류가 발생할 수 있음unknownunknown 타입은 any와 마찬가지로 어떤 타입의 값이든 담을 수 있지만, 그 값을 사용하기 전에 타입 검사를..

QueryFunctionContext를 이용하게 된 계기NextJS, React-Query를 이용하여 프로젝트를 진행하며, getServerSideProps 에서 Prefetch 기능을 사용하여, 서버사이드렌더링(SSR)을 진행하고자 하였다.현재 프로젝트에서 사용하고 있는 API 구조는 아래와 같았으며,{ resultCode: 200, data: { ... }}API 에서 전달해주는 데이터를 클라이언트에서 바로 사용하는 구조가 아니라 클라이언트에서 데이터를 한번 가공하는 형태로 사용하고 있는 형태로 사용하고 있다. (BFF 구조가 되었다면 더 편했을까?)// Network.tsasync function fetchPage(): Promise { const response ..

컴파일링(Compiler)과 트랜스파일링(Transpiler)[(Babel)https://babeljs.io/] 공식 홈페이지에 들어가면 Babel is a JavaScript Compiler 라는 설명을 볼 수 있다.또한 위키피디아에서는 Babel에 대해서는 아래와 같이 설명하고 있다. Babel is a free and open-source JavaScript transcompiler ...transcompiler(Transpilier) 라는 설명으로 Babel을 설명한것으로 확인할 수 있는데, 그렇다면 Compiler와 Transpiler가 어떠한 차이가 있을까?컴파일러(Compiler)일반적으로 컴파일러(Compiler)은 한 언어로 작성된 소스 코드를 실행 가능한(excutable) 하위 수준..

한컴오피스 또는 한컴오피스 한글을 설치하게 되면 한컴 입력기가 같이 설치된다. 이러한 환경에서 Visual Sutdio Code(이하 VSCode) 에서 한국어 입력기가 한컴 입력기로 선택되어 있는 경우 키보드 입력이 작동하지 않는 경우가 발생한다. 또한 VSCode 단축키 crtl + v(Comment) 도 정상적으로 작동하지 않는다. 그러기에 해당 내용을 수정하기 위하여 한국어 입력 방식을 Microsoft 입력기로 변경하거나 한컴 입력기를 삭제하는 방법이 있다. 방안 ctrl + shift 키를 누른거나 작업표시줄에서 한국어 입력 방식을 Microsoft 입력기로 변경한다.

REST Client Visual Studio Code(이하 VSCode)의 REST Client는 Visual Studio Code의 확장 프로그램 중 하나입니다. 이를 통해 HTTP 요청을 보내고 응답을 받을 수 있다. 이를 통해 RESTful API를 테스트하고 디버깅하는 등의 작업을 수행할 수 있다. REST Client를 사용하면 텍스트 파일 안에서 HTTP 요청을 작성하고 실행할 수 있으며, 보통 .http 또는 .rest 확장자를 가진 파일 안에 요청을 작성하고, 이를 실행하여 요청을 보내고 응답을 확인할 수 있다. 설치 마켓플레이스에서 rest client를 검색하여 설치한다. 사용법 .rest, .http 확장자 파일을 생성후 아래와 같이 작성한다. GET https://api.githu..