프론트엔드6 Polyfill Polyfill 은 최신 웹 기능을 지원하지 않는 구형 브라우저에서도 그 기능을 사용할 수 있게 해주는 JavaScript 코드 또는 플러그인을 의미합니다. 즉, Polyfill 은 최신 기능을 구형 브라우저 환경에 맞춰주는 보완 코드입니다. Polyfill 이 필요한 이유웹 표준과 JavaScript 는 꾸준히 발전하면서 새로운 기능과 API가 추가되고 있습니다. 예를 들어, 2015년에 JS의 메이저 업데이트로 추가된 ES6 등이 있습니다. 이 중 Promise, fetch, Array.prototype.includes 등은 오래된 브라우저에서는 지원되지 않습니다. 더 정확히 말하면 구형 브라우저의 엔진이 해당 기능을 지원하지 않기 때문에 위와 같은 코드를 만나면 코드가 제대로 실행되지 않거나, 오.. 2024. 10. 1. 리액트 상태 관리 전략 - Context API 와 상태관리 라이브러리 리액트 애플리케이션을 개발하면서 가장 중요한 부분 중 하나는 상태 관리 전략을 선택하는 것이다. 이 중에는 리액트가 제공하는 Context API 부터, Redux, Recoil, MobX 등 다양한 라이브러리가 이러한 필요를 충족시키기 위해 존재한다. 각각의 도구는 고유의 장단점이 있고 사용하는 방법이 있기에, 프로젝트의 요구 사항에 따라 올바른 도구를 선택하는 것이 중요하다. 리액트의 Context API 와 Redux로 대표되는 상태 관리 도구를 비교하여, 어떤 상황에서 어떤 도구를 사용하는 것이 가장 효과적인지 알아보자. Context API 기본 개념리액트 Context API 는 컴포넌트 트리 전체에 걸쳐 데이터를 전역적으로 공유할 수 있는 메커니즘을 제공한다. 이를 통해 특정 데이터를 여러 .. 2024. 8. 9. ErrorBoundary in React || 리액트 에러 바운더리 기본적인 리액트 웹앱에서 렌더링시 에러가 발생한 경우, 리액트는 에러가 발생한 UI를 스크린에서 제거한다. JS에서 에러는 호출자(caller) 방향으로 전파된다. 즉 콜 스택의 아래 방향(실행 중인 실행 컨텍스트가 푸시되기 직전에 푸시된 실행 컨텍스트 방향)으로 전파되기 때문에, 리액트에서도 마찬가지로 하위 컴포넌트에서 에러가 발생하면 에러가 상위 컴포넌트까지 전달되고, 에러 바운더리가 없는 경우에는 사실상 앱 전체가 스크린에서 제거되면서 흰 화면이 나타나게 된다. 이 때 에러 바운더리를 사용하면 상위에 전파되는 에러를 적절하게 끊을 수 있고 앱 전체가 보이지 않게 되는 불상사를 막을 수 있다. ErrorBoundary 란?React에서 'ErrorBoundary' 는 컴포넌트 하위 트리 내에서 발.. 2024. 6. 17. Design System - 개발자, 디자이너, 기획자의 입장에서 디자인 시스템(Design System)의 개념디자인 시스템은 제품이나 서비스의 사용자 경험을 일관되고 효율적으로 구축하기 위해 사용되는 일련의 표준화된 가이드라인과 구성 요소 모읍집이라고 할 수 있다. 개발자 입장에서 단순하게 보면, 사내 규격화된 UI 컴포넌트 모음집이라고도 할 수도 있지만, 디자인 시스템은 그 이상의 의미를 가진다. 조직의 디자인 철학, 가치, 그리고 목표를 달성하기 위한 시스템으로서, 효과적인 사용자 경험을 만들어내는 방법론과 원칙을 제공한다. 디자인 시스템의 장점1. 생산성과 개발 속도 향상: 디자인 시스템은 기획-디자인-개발로 이어지는 제작 과정에서 일관된 UI 컴포넌트를 사용함으로써 개발 속도를 높이고, 동시에 비용을 절감할 수 있도록 한다. 디자인 및 개발 프로세스가 표.. 2024. 5. 26. SPA vs MPA SPA 는 무엇인가?Single Page Application. 즉, 사용자와의 상호작용을 위해 단일 HTML 페이지를 로딩하고, 추가 데이터는 동적으로 불러와서 페이지를 새로 고치지 않고 갱신하는 형태의 어플리케이션이다. 작동방식: - 초기 페이지 로딩 시, 필요한 HTML, CSS, JavaScript 를 한번에 불러온다. 하나의 HTML을 가져온 후, JS를 이용해서 유저와 상호작용 시마다 필요한 DOM을 만들어준다. 유저가 앱을 사용하면서 필요한 추가 데이터는 동적으로 불러와서 페이지를 새로고침 없이 계속 갱신한다. 주로 CSR(Client Side Rendering) 방식으로 구현된다. SPA의 장점: - 속도 및 반응성: SPA는 대부분의 리소스가 애플리케이션의 수명 동안 한 번만 로드되고 .. 2024. 5. 20. 4년차 프론트엔드 개발자가 운영하는 블로그 2021년 4월에 취직을 해서 개발자를 업으로 삼은지 3년하고도 1개월이 지났고, 햇수로는 4년차인 프론트엔드 개발자입니다. 그동안 경험했던 기술 스택을 정리해보겠습니다. 프레임워크:- Typescript 를 기반으로 한 React 와 Next.js- 그리고 요즘 진행하고 있는 Electron 상태 관리 툴:- Redux- Recoil- React-Query CI/CD:- Husky- Azure pipeline 찍먹해본 다른 것들도 있겠지만, 이력서에 '나 이런거 할 수 있어요' 라고 내세울 수 있는 것만 적으니 쓸 것이 굉장히 간단해지네요. 그래서 앞으로 기록해보려고 합니다.지금까지 해왔던 것들, 앞으로 하고 싶은 것들, 그리고 이력서에 구구절절 나타낼 수 없는 것들을. 그리고 조금은 뽐내보고 싶습니.. 2024. 4. 30. 이전 1 다음
