Code Playground

< h1 > Code Playground </ h1 >

Codility, PermCheck A non-empty array A consisting of N integers is given. A permutation is a sequence containing each element from 1 to N once, and only once. For example, array A such that: A[0] = 4 A[1] = 1 A[2] = 3 A[3] = 2 is a permutation, but array A such that: A[0] = 4 A[1] = 1 A[2] = 3 is not a permutation, because value 2 is missing. The goal is to check whether array A is a permutatio..

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

요즘 회사에서 예전 레거시 코드를 리팩토링하는 과정에서 Redux/toolkit과 redux-saga를 처음으로 도입해보았다. 프로젝트 규모가 그리 크지 않아서 과연 복잡한 초기 세팅과 러닝 커브를 모두 극복할만큼 redux의 효과가 클 것인가에 대해서 계속 논의했고, 더 큰 프로젝트를 하기 전에 지금 규모의 프로젝트에서 한 번 도입을 해보고 괜찮다고 생각이 되면 앞으로도 계속 사용하자는 결론이 나왔다. 그리하여 도입한 redux-toolkit과 redux-saga는 생각보다 더더욱 만족스러운 결과를 만들어주었다. 일단 redux-saga를 도입하고 나서 좋아진 것으로는 아래와 같은 것들이 있다. 테스트 코드 쓰기 매우 편해졌다. 비동기 로직 흐름을 이해하기가 쉬워졌다. prop drilling이 줄었다..

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

https://im-developer.tistory.com/186?category=879485 Webpack, React, Typescript, Jest 환경에서 Alias 적용하기 (절대 경로 import) 프로젝트의 크기가 커지고 복잡해질수록 상대 경로로 module을 import하기 힘들어진다. 여기 저기 왔다 갔다 하면서 나한테 필요한 파일들을 찾아내야하는데 여간 귀찮은 일이 아닐 수 없다. import React from '.. im-developer.tistory.com 위 포스팅에서 Webpack과 TypeScript 환경에서 어떻게 Webpack Alias를 적용하는지 알아보았다. 저대로 잘 적용해서 사용하고 있었는데 개발 중에 문제가 하나 발견되었다. foo.ts와 bar.ts라는 파일이..

오늘은 자바스크립트의 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를 많이 사용한다. ( 사용 ..