본문 바로가기

Sofeware Development

 (19)
선언병합을 활용하여 CSS in JS의 theme 타입 추론하기 이번 글은 TypeScript와 styled-components나 emotion을 함께 사용할 때, theme의 타입을 추론하는 방법을 다룹니다. 그 방법은 간단하지만, 숨겨진 원리가 있습니다. 방법을 먼저 설명한 후, 원리를 설명하도록 하겠습니다. theme 타입 추론하기 emotion, styled-components를 사용하면 아래와 같이 theme을 선언하고, ThemeProvider에 theme을 props로 넣어줍니다. // index.tsx const theme = { primary_500: '#FF5622', primary_400: '#FF7020', primary_300: '#FF9620', primary_200: '#FFB25B', primary_100: '#FFC17B', }; roo..
컴파일과 폴리필의 차이점 분석 (babel, polyfill) 서언 웹 생태계에서 JavaScript는 브라우저와 뗄 수 없는 관계입니다. JavaScript는 매번 새로운 버전을 출시합니다. 그러면 브라우저는 최신 문법을 이해할 수 없게 됩니다. 만일 브라우저가 빠르게 대응한다고 하더라도, 사용자가 최신 브라우저를 사용할 것이라는 보장이 없습니다. 그러므로 브라우저가 최신 문법을 이해하도록 만들기 위해서 개발자가 노력을 가해야 합니다. 이때 사용할 수 있는 카드가 Compile 입니다. Compile의 중요성은 널리 알려진 것 같습니다. 하지만 Compile만으로 해결할 수 없습니다. Compile 만큼 중요한 것이 Polyfill 입니다. 이 글은 Compile과 Polyfill의 차이점과 그 역할에 초점을 맞춥니다. 컴파일이란? ES6+ 자바스크립트 코드를 E..
[Git] cherry-pick을 이용하여 commit history 깔끔하게 정리하기 한 레포지터리에서 프론트엔드, 백엔드 폴더를 분리하여 공동 작업을 하고 있었다. 같은 기능을 동시에 개발하고 있어서, 백엔드 코드를 rebase 받아서 local에서 구동해보려고 했다. 그 과정에서 프/백 commit이 합쳐진 상태로 PR을 올리게 되었다. 즉, 1. 내가 작업하지 않은 커밋 또한 PR에 올라갔고, 2. 내가 백엔드 코드를 rebase한 시점 이후에 백엔드 코드가 수정되었을 경우, conflict가 예상되었다. 그러므로, 백엔드 commit history를 제거한 후, PR을 올리고자 했다. 그림으로 표현하면 다음과 같다. 아래처럼, 백엔드 코드가 사이에 끼어있어서, reset 할 수도 없는 상황이다. 위 상황을 아래와 같이 개선하고자 한다. 해결 방법 1. base target bran..
[React] Batching을 활용한 렌더링 최적화 React 18(22.3.29)에서 Batching이 더욱 강화되었다. Batching은 React에서 굉장히 중요한 개념이며, 최적화에 크게 기여하고 있다. 하지만 생각보다 Batching은 초보 리액트 개발자에게 널리 알려지지는 않은 것같다. 이번 포스팅에서 Batching이란 무엇이며, Batching을 알고나면 어떤 이점을 얻을 수 있는지 다루고자 한다. 배칭(Batching)이란? batch는 일괄이라는 의미이다. React에서는 어떤 의미로 쓰일까? 사례를 통해 알아보자. 아래 코드에서 button을 누르면 콘솔에 무엇이 찍힐까? function App() { const [count, setCount] = useState(0); const handleClick = () => { setCount..
[React] 함수형 컴포넌트는 왜 이벤트 부착 시점의 상태를 기억할까? 함수형 컴포넌트는 이벤트 부착시점의 상태를 기억한다.함수형 컴포넌트와 클래스형 컴포넌트의 결정적인 차이를 중심으로 다룬다.문제 상황const [count, setCount] = useState(0);useEffect(() => { window.addEventListener('unload', handleUnload); }, []);const handleUnload = () => { localStorage.setItem("count", count);};return ( setCount(count + 1)}>+ )위와 같은 코드가 있다button을 클릭했을 때 count가 1씩 증가하고,화면을 닫을 때(unload), 로컬스토리지에서 count를 기억한다.button을 5회 누른 후, 화면을 ..
TypeScript 레벨업 하기(feat. Utility Type 분석) 유틸리티 타입 명세를 살펴보면, 타입스크립트를 더 잘 이해할 수 있어서 유틸리티 타입을 분석하는 글을 쓰고자 한다. 1. 유틸리티 타입이란? 타입스크립트는 타입 변환을 위한 유틸리티 타입을 제공한다. 이는 .ts 파일 어디서든 (전역으로) 사용 가능하다. 유틸리티 타입은 mapped type, Index type query operator(keyof), Indexed access operator(T[K]), Generic 등의 개념을 통해 정의되어 있다. 먼저 유틸리티 타입의 필요성을 느껴보자. interface AddressBook { name: string; phone: number; address: string; company: string; } const phoneBook = { name: '재택..
[Cypress] API Mocking 하기 Cypress로 테스트하다 보면, API를 Mocking하여 처리해야할 일이 생긴다. 다음과 같은 이유가 있다. 1. public api 를 이용할 때는 할당량이 있는 경우가 있어서, 테스트에 할당량을 낭비하지 않기 위해서 2. private api의 경우에도 서버 비용이 발생하기 때문에 Cypress는 공식 문서가 매우 잘 돼있기 때문에, 가급적 공식문서 읽기를 추천한다. API Mocking은 특히 intercept 개념을 읽으면 된다. https://docs.cypress.io/api/commands/intercept intercept | Cypress Documentation Spy and stub network requests and responses. Tip: We recommend you r..
[JavaScript] 웹 컴포넌트에 Observer Pattern을 적용하여 상태관리하기 0. 서언 컴포넌트 구조는 황준일님의 를 참고했고, https://junilhwang.github.io/TIL/Javascript/Design/Vanilla-JS-Component/ Vanilla Javascript로 웹 컴포넌트 만들기 | 개발자 황준일 Vanilla Javascript로 웹 컴포넌트 만들기 9월에 넥스트 스텝 (opens new window)에서 진행하는 블랙커피 스터디 (opens new window)에 참여했다. 이 포스트는 스터디 기간동안 계속 고민하며 만들었던 컴포넌트 junilhwang.github.io Observer Pattern은 황준일님의 를 참고했습니다. https://junilhwang.github.io/TIL/Javascript/Design/Vanilla-JS-S..
JavaScript로 추상 클래스, 추상 메소드를 구현하기 0. 서문 ES6 부터 JavaScript에서 class 문법을 지원하게 되었다. 그러면서 JavaScript로도 객체지향 프로그래밍을 하기 수월해졌다. (이전에는 생성자 함수와 prototype으로 구현하였다.) 그렇지만 여전히 Java와 같은 언어 만큼 객체지향을 지원한다고 할 수 없다. 이를테면, JavaScript에서는 추상 클래스와 추상 메소드를(abstract) 문법적으로 지원하지 않는다. 그럼에도 JavaScript 기본 문법을 활용하여 추상 클래스와 추상 메소드를 구현하는 방법을 알아보겠다. 1. 추상 클래스와 추상 메소드의 개념 먼저 추상 클래스와 추상 메소드의 개념에 대해 알아보자. 추상 메소드란 부모 클래스에서 정의하며, 자식 클래스에서 반드시 오버라이딩해야만 사용할 수 있는 메소드를..

티스토리툴바