Library, Tool

Redux의 기본 개념

서론 Redux는 애플리케이션의 상태 관리를 단순화하기 위한 JavaScript 라이브러리이다. Redux의 핵심은 모든 상태 변경을 액션이라는 명확한 객체로 설명하는 것이다. 이를 통해 상태가 어떻게, 왜 변경되는지 명확히 알 수 있다. Redux의 철학은 “변화가 발생했다면, 그 이유를 알 수 있어야 한다”는 것이다.  이 글에서는 Redux의 기본 컨셉들과 사용법에 대해 알아보고자 한다Action: 상태 변경의 설명서 Action은 애플리케이션에서 발생하는 일을 설명하는 JavaScript 객체이다. Redux에서 모든 상태 변경은 Action 객체에 의해 발생한다. Action은 type 속성을 반드시 가지고 있으며, 상태 변경에 필요한 추가 데이터를 포함할 수 있다.{ type: 'ADD_TOD..

Redux Middleware와 dispatch의 관계

서론 Redux 톺아보기를 공부하며 “액션을 dispatch만 했는데, Redux는 어떻게 미들웨어를 실행하는 걸까?“라는 질문에 대한 답을 나름대로 내려보는 글이다. 이에 대한 답을 하기 위해서는 Redux의 내부 동작 원리, 특히 applyMiddleware 함수와 compose 함수를 이해해야 하는 것 같다.이번 글에서는 Redux의 dispatch와 미들웨어가 어떻게 연결되고 동작하는지 단계별로 설명한다.기본 dispatch의 동작 Redux의 기본 dispatch는 단순하다.dispatch는 액션을 리듀서로 전달하고, 상태를 업데이트하는 역할을 한다.const store = createStore(reducer);store.dispatch({ type: 'INCREMENT' });// 기본 dis..

TypeScript: type과 Interface의 차이

서론 TypeScript에서 type과 interface는 모두 타입을 정의하는 방식이지만, 각자 고유한 특징과 장단점을 가지고 있다. 이번 글에서는 type과 interface의 공통점과 차이점을 정리하고, 마지막에는 언제 type을 써야하고 언제 Interface를 쓰는게 적절한지에 대해 써보고자 한다.1. 공통점1.1 특정 필드 제외 (Omit) 기능 type과 interface 모두 Omit 기능을 활용하여 특정 필드를 제외한 새로운 타입을 정의할 수 있다. 이 기능은 보안 등 이유로 일부 속성만 노출하고 싶을 때 유용하다. 다만, type을 사용한 경우 문법이 더 깔끔해지는 장점이 있다.interface User { name: string; age: number; email: string;..

Frontend에서의 Bundler

번들러는 여러 개의 자바스크립트 파일을 하나로 합쳐주는 도구이다. 개발자들이 코드를 나누어 작성할 때, 여러 파일로 나누어도 결국 실행 환경에서는 단일 파일로 실행해야 하는데, 이때 여러 파일을 묶어 하나의 파일로 만들어주는 역할을 한다. 예를 들어, 브라우저와 리액트 네이티브와 같은 환경에서는 여러 파일을 동시에 처리할 수 없기 때문에 하나의 파일로 번들링하여 실행해야 한다.번들러의 역할 번들러의 주요 역할은 세 가지로 나뉜다: 레졸루션(Resolution), 로드(Load), 옵티마이제이션(Optimization)이다. 각각의 역할을 하나씩 살펴보자.Resolution레졸루션은 파일 간의 참조를 올바르게 해석하는 과정이다. 자바스크립트 코드에서 import나 require를 사용할 때, 해당 경로에 ..

웹 성능을 높일 수 있는 bundler plugins

웹 프론트엔드 성능 최적화는 사용자 경험과 직결되며, 로딩 속도가 느려지면 사용자 이탈률이 증가할 수 있다. 이를 해결하기 위해 웹 애플리케이션을 최적화하는 방법 중 하나는 번들러 플러그인들을 활용하는 것이다. 이번 글에서는 웹 프론트엔드 성능을 높일 수 있는 몇 가지 주요 번들러 플러그인들을 소개하고자 한다.1. Imagemin-pngquant 이미지 파일은 웹사이트 로딩 속도에 큰 영향을 미친다. 특히, PNG 파일은 고화질을 유지하는 만큼 용량이 커질 수 있다. 이를 줄이기 위해 사용하는 플러그인 중 하나가 imagemin-pngquant이다. 이 플러그인은 PNG 파일의 크기를 줄이면서도 이미지 품질을 최대한 유지해주는 역할을 한다.주요 기능:PNG 파일의 무손실 또는 저손실 압축이미지 품질을 사..

Git의 동작원리

Git의 버전관리 Git은 분산 버전 관리 시스템(이하 DVCS)으로, 각 클라이언트가 전체 저장소의 복사본을 소유한다. 이는 중앙 서버에 대한 의존성을 줄이고, 네트워크 연결이 불안정한 상황에서도 작업을 지속할 수 있게 한다. 모든 커밋은 sha-1을 통한 Hash를 가지며, 저장하기 전 checksum을 통해 검사하므로 데이터의 무결성을 보장한다.DVCS에서는 클라이언트가 단순히 최신 파일을 체크아웃하는 것이 아니라 전체 저장소를 복제한다. 따라서 과거 버전으로 돌아갈 때 Git은 서버할 필요 없이 로컬 데이터베이스에서 직접 읽어온다. 또한 대부분의 Git 작업은 로컬 파일과 리소스만으로도 수행할 수 있어, 네트워크상의 다른 컴퓨터로부터 정보를 받을 필요가 없다. 따라서 깃의 동작은 매우 빠르다. G..

CSS Framework들의 특징과 장단점 비교 (tailwind, styled-componets)

Introduce CSS 프레임워크를 선택하는 것은 웹 개발에서 매우 중요한 결정이다. 왜냐하면 CSS 프레임워크는 개발 속도와 코드 유지 보수성에 큰 영향을 미치기 때문이다. 다양한 CSS 프레임워크가 존재하며 각각의 프레임워크는 고유한 특징과 장단점을 가지고 있다. CSS 프레임워크를 선택할 때는 프로젝트의 요구 사항과 팀의 역량을 고려해야 한다. 따라서 이 글에서는 기업들에서 많이 사용하는 Tailwind, Styled-components, 두 가지 프레임워크를 비교하여 어떤 프레임워크가 적합한지 살펴보고자 한다. TailwindAboutTailwind CSS는 최근 웹 개발 커뮤니티에서 급격히 인기를 얻고 있는 utility-first CSS 프레임워크이다. Tailwind는 빠른 UI 개발을 위..

Recoil 사용이유와 사용방법

서론 비즈니스 모델의 복잡성이 증가함에 따라 프론트엔드 개발에서 처리하는 데이터의 양과 복잡도도 더욱 커지고 있다. 사용자와 상호작용하는 뷰는 점차 더 많은 액션을 포함하게 되고, 데이터베이스에서 데이터를 가져오는 횟수와 데이터의 크기도 증가하고 있다. 이러한 환경에서 데이터를 효율적으로 관리하는 것은 필수적이다. 실제로 프론트엔드 개발자라는 직군이 등장한 배경도 이러한 필요성에서 비롯된 것이라고 본다. 이 글에서는 프론트엔드 개발에서 데이터를 효율적으로 관리하는 데 도움을 주는 상태 관리 라이브러리 중 하나인 Recoil의 사용 이유와 기본적인 사용 방법에 대해 살펴보겠다. 왜 Recoil인가 상태 관리 라이브러리를 사용해야 하는 이유는 앞에서 간략하게 설명하였다. 상태 관리 라이브러리에는 redux,..