Code Playground

< h1 > Code Playground </ h1 >

Intersection Observer API는 "상위 레벨 Document의 Viewport 또는 부모 요소"와 "타겟 요소" 간 교차 지점의 변화를 비동기적으로 관찰할 수 있는 방법을 제공한다. Intersection Observer가 등장하기 전에는 어떤 요소가 화면에 보여지는지 감지하는 것은 매우 복잡한 일이었다. 따라서 요소의 visibility를 감지하고 이벤트를 주는 것은 사용자가 접근하는 여러 브라우저와 웹 사이트들을 느리게 만드는 원인 중 하나였다. 그러나 웹 기술이 발전하면서 요소 visibility 감지의 필요성이 점점 높아졌고, Intersection 정보들이 필요하게 되었다. 이미지의 Lazy Loading이나 페이지 스크롤 시 컨텐츠 로딩 무한 스크롤 구현 광고들이 실제로 유저에..

공부해야지 해야지 하고 맨날 뒤로 미루다가 오늘 드디어 Generator에 대해서 정리를 해보려고 한다. Generator는 실행을 잠시 멈췄다가 나중에 다시 접근할 수 있는 아주 특이한 형태의 함수이다. Generator 함수는 나중에 다시 접근하기 위해서 context(즉 변수값)를 저장된 상태로 남겨둔다. Generator는 주로 Promise와 결합하여 사용되며, Callback 지옥같은 비동기 프로그래밍의 문제점들을 많이 완화시켜준다. 일반 함수 예를 들어서 아래와 같은 간단한 함수를 살펴보자. function sayHi() { // statements return 'hi'; return 'hello'; // was never executed } 위 함수를 실행시키면 첫 번째 return문인 r..

오늘은 자바스크립트의 Nullish coalescing operator에 대해서 간단히 정리해보려고 한다. (TypeScript 3.7부터 지원된다!) coalesce는 사전을 찾아보니 뭔가를 합친다, 병합하다 이런 뜻을 가지고 있다. 아마 Nullish는 null과 같은 것들을 말하는 것일거다. 그러니까 null과 같은 것들을 병합하는 연산자(?)라고 할 수 있을 것 같다. 물론 뭔 말인지 하나도 모르겠으니 MDN의 설명을 찾아보자. Nullish coalescing operator(??)는 논리 연산자로 왼쪽 피연산자가 null이나 undefined일 때, 오른쪽 피연산자를 return한다. 반대의 경우에는 왼쪽 피연산자가 return된다. 그럼 이제 내가 맨 처음에 냈던 문제의 답을 알아보자! le..

휴, 회사 업무 하랴, 공부하랴 요즘 정신이 없다😭 오늘은 어제 업무하다가 새롭게 알게 된 Optional Chaining에 대해서 아주 간략하게 정리해보려고 한다. (Optional Chaining은 타입스크립트 3.7부터 지원된다!) Summary Optional chaining은 ?. operator와 함께 사용한다. . chaining operator와 비슷하게 사용이 가능한데, ? 를 붙임으로서 그 속성이 존재하는 경우에만 chaining을 계속하고 존재하지 않으면 undefined를 리턴하게 된다. Example const person = { name: 'Alice', job: { companyName: 'abc', title: 'developer' } }; console.log(person...

회사에서 이번에 새로 맡은 업무를 기획중인데, Native 앱이 웹뷰에 뭔가를 요청할때마다 웹뷰에서 이벤트가 trigger되도록 만들어야해서 어떻게 할지 엄청 고민을 많이 했었다. 웹뷰가 Native Client에 Data를 요청하는 프로세스는 이미 구현이 되어있는데, Native Client가 필요할때마다 웹뷰에게 특정 이벤트를 실행하도록 요청하는 프로세스가 구현이 안되어있다. https://developer.android.com/guide/webapps/webview?hl=ko WebView에서 웹 앱 빌드 | Android 개발자 | Android Developers 웹 애플리케이션 또는 웹페이지만 클라이언트 애플리케이션의 일부로 제공하려는 경우 WebView를 사용하면 됩니다. WebView 클래..

function generateString(message: string): string { return message; } function generateNumber(message: number): number { return message; } 위 예시와 같이 string을 인자로 받아서 string을 리턴하는 함수와 number를 인자로 받아서 number를 리턴하는 함수가 있다고 해보자. 두 개 모두 인자를 받아서 그대로 리턴하는 아주 단순한 함수이다. 그런데 하나는 string을 처리하고 하나는 number를 처리한다는 차이점 밖에 없다. 이렇게 동일한 로직을 수행하는 함수를 단지 타입이 다르다는 이유로 별개의 함수로 구현한다는 것은 매우 비효율적인 일이다. 바로 이러한 상황에 유용한 것이 바로 ..

각잡고 글 쓰려고 마음 먹으니 너무 부담스럽고 잘 안하게 되어서 아주 가볍게 요약 정리하는 느낌으로 타입스크립트 기초 내용들을 하나씩 정리해보려고 한다. Type assertions 실제 데이터 구조를 바꿔주는 형 변환이 아니고 단지 ‘타입이 이것이다’라는 것을 typescript 컴파일러에게 알려주는 것을 의미 (즉, 개발자가 확실히 이 타입이라고 확신하는 경우에만 사용한다.) 변수 as 강제할 타입 변수 let someValue: any = 'this is a string'; let strLength: number = (someValue).length; let strLength2: number = (someValue as string).length; // jsx에서는 as를 많이 사용한다. ( 사용 ..

2월 20일에 발표된 TypeScript 3.8에는 다가오는 새로운 ECMAScript standard features를 포함하여 많은 새로운 기능들이 담겼다. TypeScript에 포함된 새로운 기능들에 대해서 간단하게 정리해보려고 한다. Type-Only Imports and Exports // ./foo.ts interface SampleConfig { // ... } export function doSmth(config: SampleConfig) { // ... } // ./bar.ts import { SampleConfig, doSmth } from './foo.js'; function doSmthMore (config: SampleConfig) { // ... // doSmth(config);..

오늘은 Typescript, Redux hooks를 사용하여 간단한 React Todo List를 만들어보려고 한다. 예전에 connect라는 Redux 라이브러리의 Higher order component를 사용해 Redux 프로젝트를 몇 번 만들어봤었다. 그 때는 connect로 연결된 container component에서 비즈니스 로직 정의를 하고 presentational component에서 container로부터 전달받은 state를 렌더해주는 구조였다. 그러다보니 매 번 connect로 container와 component를 연결해주는 과정이 약간 번거로웠다. 게다가 action과 reducer를 매번 생성하는 것도 아주 귀찮은 일이었다. 그래서 오늘은 connect를 사용하는 방식보다 훨..

오늘은 React의 Context에 대해서 공부해보려고 한다. 이 블로그 포스트는 React documents의 Context 챕터를 번역하고 예시를 따라해 본 글이니 굳이 내 블로그 글을 안보고 아래 링크를 봐도 된다. https://reactjs.org/docs/context.html Context – React A JavaScript library for building user interfaces reactjs.org Summary Context는 모든 레벨의 컴포넌트 트리에 props를 통하지 않아도 데이터를 전달할 수 있는 방법을 제공해준다. 대부분의 리액트 어플리케이션은 데이터를 위에서부터 아래로 (부모에서 자식까지) props를 통해 전달한다. 그리고 이것을 top-down 방식이라고 부른..