Prog. Langs & Tools

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

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

이번 포스팅에서는 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()를 통한 동적 데이터 추..

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

이번 포스팅에서는 캐스팅에 대한 내용을 정리해 보려고 한다. 캐스팅에는 암시적 캐스팅과 명시적 캐스팅이 있다. 암시적(Implicit) 캐스팅은 컴파일러가 형을 변환해 주는 것을 말한다. 단, 형 변환이 허용이 되고 프로그래머가 명시적으로 형 변환을 안 할 경우에 해당된다. int number1 = 3; long number2 = number1; // 암시적 캐스팅 명시적(Explicit) 캐스팅은 프로그래머가 형 변환을 위한 코드를 직접 작성하는 것을 의미한다. C++의 캐스팅은 다음과 같은 것들이 있다. 기존의 C 스타일 캐스팅은 아래의 4가지 캐스팅 중 하나를 했었고 컴파일러가 명확하게 잡지 못한다는 문제가 있어서 아래처럼 세분화 하게 되었다. static_cast const_cast dynamic..

Next.js는 React에서 기존에 CSR(Client Side Rendering)의 특징에 더하여 SSR(Servers Side Rendering)을 혼합하여 운영환경에서 최적의 퍼포먼스를 낼 수 있게 도와주는 프레임워크이다. 2020년 11월 현재 버전 10.0.1이 나와있으며 다음과 같은 기능들을 지원한다. 페이지 기반 라우팅 (동적 라우팅) 데이터 패칭 빠른 성능을 위한 코드 스플리팅 CSS in JS 이미지 최적화 빠른 컴포넌트 재활성화 정적 파일 처리 타입스크립트 환경 변수 브라우저 지원 각각에 대한 자세한 사항들은 이후에 하나씩 알아보고자 한다. Next.js는 SPA에서 CSR이 가질 수 밖에 없는 한계들을 보완해 주는 도구이다. SSR과 CSR에 대한 포스팅 참고 CSR은 초기 로딩 속..

지난 8월 들었었던 이웅재님의 우아한 타입스크립트 내용을 정리해서 블로그 포스팅 해 보려고 한다. 1/2부로 나누어서 세미나를 진행하였고, 포스팅도 2번에 나누어서 할 생각이다. 많은 사람들이 타입스크립트를 쓰면 버그도 사라지고, 테스트 코드를 작성하지 않아도 된다고 착각하는 경우가 있다. 이는 분명히 잘못된 생각이며, 타입스크립트를 가지고 타이핑을 잘 하면 우리가 가질 수 있는 이점은 런타임 전에 오류를 미리 파악할 수 있다는 점이다. 작성자와 사용자 타입스크립트의 타입 시스템은 다음과 같은 특징을 가지고 있다. 타입을 명시적으로 지정할 수 있음 타입을 명시적으로 지정하지 않으면, 타입스크립트 컴파일러가 자동으로 타입을 추론 우리는 함수를 가운데에 매개로 해서 구현자와 사용자를 연결한다. 때로은 이 둘..