OWEN

지난 포스팅에 이어서 이웅재님의 우아한 타입스크립트 세미나 2편을 정리해 보려고 한다. 이번 포스팅에서는 실전 타입스크립트 코드를 작성하는 측면에서 적용해볼 수 있는 부분들에 대해 알아본다. 1. Conditional Type 활용하기 Conditional Type이란 타입이 조건부로 적용되는 것을 의미한다. 타입 T를 제네릭 형태로 받는다. 예를 들면 아래의 예제 코드처럼 T가 string인 경우는 StringContainer로, T가 number이면 NumberContainer로 받을 수 있다. 이번에는 infer라는 키워드를 살펴보도록 하자. 조건부 타입에서 infer는 타입변수를 참조하기 위해서 사용이 된다. 프로미스의 제네릭은 보통 리턴타입을 의미한다. 아래의 예제는 Promise의 배열인 경우..

이번 포스팅에서는 팩토리 메서드 패턴에 대해서 알아보도록 하려고 한다. 팩토리 메서드 패턴은 다른 말로 가상 생성자(Virtual Constructor) 패턴 이라고도 한다. 팩토리 메서드 패턴의 의도는 객체를 생성하기 위해 인터페이스를 정의하지만, 어떤 클래스의 인스턴스를 생성할지에 대한 결정은 서브클래스가 내리도록 하는 것이다. 기존의 문제점 프레임워크는 추상클래스를 사용하여 객체 간의 관련성을 정의하고 유지할 수 있다. 또한 프레임워크는 이들 객체를 생성할 책임을 지니기도 한다. 따라서 추상클래스를 상속하는 서브클래스에서 구체적인 행동을 어떻게 정의할 것인지는 프레임워크에서 중요하게 생각해야 하는 요소이다. 예를 들어 사용자에게 여러가지 문서를 보여주는 프레임워크를 만든다고 생각해 보자. 먼저 Ap..

자바스크립트의 이벤트 루프에 대해서 정리해 보고자 한다. 단일 스레드 언어 자바스크립트 자바스크립트는 '단일 스레드' 언어이다. 하지만 실제로 우리는 자바스크립트로 여러가지 작업을 동시에 처리할 수 있다. 예를 들면 Node.js 웹서버에서 동시에 여러 개의 HTTP 요청을 처리하는 식으로 말이다. 스레드가 하나인데 자바스크립트는 과연 어떻게 동시성을 지원하는 것일까? 정답은 이벤트 루프이다. 자바스크립트는 이벤트 루프를 이용해 비동기적으로 동시성을 지원한다. 정확하게 말하면 자바스크립트 엔진(V8)에서는 이벤트 루프가 존재하지 않으며 단일 콜 스택(Call Stack)을 사용하며, 브라우저나 Node.js 환경에서 비동기 처리를 담당한다. 예를 들면 브라우저에서 비동기 호출을 위해 사용하는 setTim..

킥스타트 2020 라운드 B 문제 풀이를 해 보도록 한다. 내년 2021 킥스타트나 코드잼을 준비하시는 분들, 또는 알고리즘 공부를 하시는 분들에게 많은 도움이 되길 바란다. 1. Bike Tour 기초적인 탐색 문제이다. 전체 체크포인트 N개를 배열에 저장한 후 처음부터 끝까지 탐색하며 peak가 몇 개인지 파악하면 된다. 시간복잡도는 O(N). import java.io.*; import java.util.*; public class KickStart_2020B_1 { public static void main(String[] args) throws IOException { BufferedReader br = new BufferedReader(new InputStreamReader(System.in)..

이번 포스팅에서는 POCU 아카데미 강의를 들으며 C++의 인라인 함수, 그리고 static 키워드에 대해 공부한 내용을 정리해 보려고 한다. 인라인 함수 함수를 호출할 때는 다음과 같은 단계를 거친다. 함수는 메모리 안에 "할당"되어 있다. 변수들을 스택에 push 함수 주소로 점프 함수를 실행 호출자 함수로 다시 점프 1번 단계에서 넣어두었던 변수들을 pop 따라서 함수가 저 멀리 저장공간(메모리)에 있는 경우는 CPU 캐시에 저장이 되어있지 않기 때문에 최적화가 이루어지지 않게 된다. 따라서 모든 걸 함수로 만들라는 조언은 적합하지 않다. 물론 함수를 써서 가독성이 좋아질 수도 있기에, 좋다고 볼 수도 있지만 함수를 호출함으로써 필요한 오버헤드를 떠맡는 것이 부담이 됨은 기억해야 한다. C++에서는..

지난 포스팅에 이어서 Next.js 튜토리얼 글을 이어서 작성해 보고자 한다. 시작하기에 앞서 이제부터 타입스크립트를 사용할 계획이라 TS 설치를 먼저 진행한다. $ npm i typescript @types/react @types/node --save-dev // node_modules 폴더를 지우고 $ npm i $ npm run build & npm run dev 그러면 프로젝트 root 디렉토리 위치에 다음 파일들이 자동으로 생성이 될 것이다. next-env.d.ts tsconfig.json 그리고 기존의 어플리케이션도 jsx 파일을 tsx로 바꾸어 주면 정상적으로 실행이 된다. 오늘 해볼 작업들은 다음과 같다. Link를 통해 페이지를 이동 getStaticProps()를 통한 동적 데이터 추..

(해당 포스팅은 링크드인 러닝의 CompTIA+ Network 강의를 듣고 핵심적인 내용을 정리하였다.) 모델은 네트워크가 어떻게 동작하는지를 나타내는 데 사용된다. 네트워크 모델에는 대표적인 모델이 두 가지가 있는데, 그건 바로 OSI 7계층 모델과 TCP/IP 모델이다. OSI 7계층 모델 OSI 7계층 모델은 네트워크 통신이 일어나는 과정을 7단계로 나눈 것을 말한다. 계층을 이렇게 나눈 이유는 통신이 일어나는 과정을 단계별로 파악하기 용이하기 때문이다. 특정 계층에서 이상이 생겼을 때 다른 계층은 놔두고 문제가 있는 계층만 고쳐서 문제를 해결할 수 있다. 하나씩 계층별로 살펴보도록 하자 물리계층 (Physical Layer) 전기적, 기계적, 기능적인 특성을 이용하여 통신 케이블로 데이터를 전송한..

이전 RxJS 포스팅에서는 다음과 같은 주제들에 대해 다루어 보았다. Ch01. 반응형으로 생각하기 Ch02. RxJS로 배우는 반응형 프로그래밍 이번 포스팅에서는 위에서 살펴본 개념들을 바탕으로 옵저버블을 만들어 보고, 모든 데이터 소스에 대한 시간에 따른 데이터 입출력을 옵저버블 컨텍스트로 관리하는 법을 배우려고 한다. 이런 상황을 가정해 보자 사용자가 서버에 장기 실행 ajax 요청을 보내고, 호출 후 다른 버튼을 눌러 다른 페이지로 이동하였다. 특정 데이터를 사용할 수 있게 데이터를 풀링했는데 예외가 발생하여 이제 데이터를 사용할 수 없게 되었다. 우리가 사용자에게 무한히 시스템 리소스를 사용할 수 있게 하지는 못하고 따라서 이러한 경우 문제가 발생할 수 있다. 이를 해결하기 위해 RxJS를 사용..