본문 바로가기

FrontEnd

 (437)
javascript 프로젝트에 d.ts를 이용하여 타입스크립트 도입하기 javascript를 메인으로 사용하는 프로젝트에 사정상 코드베이스를 타입스크립트로 마이그레이션 할 수 없을 때, d.ts를 통해 타입스크립트의 힘을 활용하는 방법을 알아봅니다. 해당 내용은 사내에서 프로젝트를 진행하며 배운 내용을 정리한 것임을 말씀드립니다. d.ts파일이란? 기본적으로 c언어의 header와 같은 역할을 합니다. 즉 각 모듈(파일)에 대한 인터페이스 역할만 하지, 모듈 내부의 타입 안정성에 대해서는 전혀 보장해주지 않습니다. 하지만 d.ts파일을 js파일의 타입 체킹에 이용할 수 있습니다. [Front, 2022-09-14] Typescript d.ts 파일을 js 프로젝트에서 사용할 수 있을까? d.ts 파일의 타입 선언 활용하기 d.ts 파일 내부에서는 타입 선언과 변수, 함수 선..
스토리북 개발팀이 알려주는 컨테이너 / 프리젠터 패턴 - Context API를 이용해 의존성 주입하기 스토리북 공식 문서에서 container / presenter 패턴의 사용 사례에 대해 배워봅니다. 스토리북을 전혀 몰라도 패턴에 대해 배우실 수 있습니다. 페이지(화면)을 만드는 방법 BBC, Guardian 및 Storybook 유지보수 팀은 순수한 프레젠테이션 페이지를 만듭니다. 이 방법을 사용하면 Storybook에서 페이지를 렌더링하기 위해 특별한 작업을 수행할 필요가 없습니다. 여기서 특별한 작업이라 함은 모킹, 몽키 패치를 이용한 의존성 주입을 의미합니다. 화면 단계까지 프리젠테이셔널 컴포넌트로 작성하는 것은 간단합니다. 스토리북 외부에 있는 앱의 단일 래퍼 컴포넌트에서 모든 지저분한 "connected" 논리를 수행한다는 아이디어입니다. 스토리북 소개 튜토리얼의 Data 장에서 이 접근 방..
소프트웨어 합성 : 트랜스듀서(Transducers) transducer를 이용한 효율적인 데이터 프로세싱을 배워봅시다. 다음 글의 번역입니다. https://medium.com/javascript-scene/transducers-efficient-data-processing-pipelines-in-javascript-7985330fe73d Transducers: Efficient Data Processing Pipelines in JavaScript Note: This is part of the “Composing Software” series on learning functional programming and compositional software techniques in… medium.com Transducer는 합성 가능한 고차 리듀서입니다. 리..
소프트웨어 합성 : 리듀서(reducer) reducer를 이용한 소프트웨어 합성에 대해 좀 더 알아봅니다. 다음 글의 번역입니다. https://medium.com/javascript-scene/reduce-composing-software-fe22f0c39a1d Reduce (Composing Software) Note: This is part of the “Composing Software” series (now a book!) on learning functional programming and compositional software… medium.com What is Reducer? 함수형 프로그래밍에서 일반적으로 사용되는 Reduce(일명: fold, accumulate) 유틸리티는 반복이 완료되고 누적된 값이 반환될 때까지 리스트를..
AST 활용 1편 : ESLint console.log 체크 플러그인 만들기 AST를 이용한 정적 소스 코드 분석 / 트랜스파일링 개념을 이해해 봅니다. npm에 이보다 더 좋은 라이브러리들이 많음으로 활용하시기 바랍니다. 해당 소스 및 설명은 : https://github.com/kentcdodds/asts-workshop\ 에서 발췌했습니다. GitHub - kentcdodds/asts-workshop: Improved productivity 💯 with the practical 🤓 use of the power 💪 of Abstract Syntax T Improved productivity 💯 with the practical 🤓 use of the power 💪 of Abstract Syntax Trees 🌳 to lint ⚠️ and transform 🔀 your cod..
[React] React.cloneElement 사용 사례 React.cloneElement를 어디다 사용하는지 알아봅니다. 해당 글의 번역입니다 : https://blog.logrocket.com/using-react-cloneelement-function/ Using the React.cloneElement() function to clone elements - LogRocket Blog In this in-depth tutorial, learn how to clone and manipulate elements three different ways using the React.cloneElement function. blog.logrocket.com React.cloneElement()가 뭐죠? React.cloneElement()는 엘리먼트를 조작하는 데 ..
리액트 디자인 패턴 : 컴파운드 컴포넌트 패턴 [Compound Component Pattern] 2 리액트 디자인 패턴 : 컴파운드 컴포넌트에 관해 알아봅니다. 원문 : https://isamatov.com/compound-components-react/ Compound Component – advanced React pattern UI libraries love Let's take a look at an advanced React pattern - Compound Component. This pattern is widely adopted by a lot of popular UI libraries. isamatov.com 이번 포스트에서는 널리 사용되는 React 패턴인 Compound Component에 대해 알아보겠습니다. 이 패턴을 사용하면 클린하고 선언적인 방식으로 복잡한 컴포넌트를 작성할 수 ..
[Babel] 바벨 플러그인을 작성하며 AST 배우기 바벨 플러그인을 만들어보며 JS AST(Abstract syntax trees)를 배워봅시다. 해당 글의 번역입니다 : https://dev.to/viveknayyar/revealing-the-magic-of-ast-by-writing-babel-plugins-1h01 Revealing the magic of AST by writing babel plugins When you hear Abstract syntax trees, what is the first thought that occurs in your mind? Something t... dev.to 추상 구문 트리를 들었을 때 가장 먼저 떠오르는 생각은 무엇입니까? 컴파일러? 복잡한 트리 조작? 비트 조작? 🤔 경력이 얼마 안될 때 AST는 낮은 ..

티스토리툴바