Commit을 리모트 Branch에 푸시하고 해당 커밋을 revert한 뒤에 다른 커밋을 생성 했더니 브랜치의 형태가 아래와 같아졌습니다.이후, 로컬 브랜치를 리모트에 푸시하려고 하자 아래와 같은 에러가 발생합니다.에러 메세지를 확인하고 git pull을 요청하니까fa

React V16으로 웹 서비스를 개발하는데 input tag의 onChange의 이벤트가 null로 오는 경우를 발견했습니다.Synthetic Event와 관련된 이슈로 브라우저 기반의 nativeEvent와는 다르게 동작하는 듯하빈다.React 문서를 확인하니 Re

Out of memory(OOM)란?Javascript는 가비지 컬렉션(garbage collection a.k.a GC)을 통해 메모리를 관리하고 이를 통해 사용자가 메모리 영역에 대하여 관심을 가지지 않도록 하지만, Memory leakage가 발생하는 경우는 다릅

Introduction 이전에 React에서 Shallow Copy로 인해

Introduction React는 Rendering 성능 향상을 위해서 복잡한 연산에 대하여 useCallback, useMemo 등의 Hooks을 사용하여 함수 혹은 변수를 캐싱하여 재사용할 수 있도록 합니다. 하지만, 최근 useMemo의 사용으로 인해 오히려

테이블의 ASC, DESC Sorting 기능을 테스트하던 중에 아래와 같은 이슈를 확인했습니다.위와 같은 결과가 생기는 이유에 대해서 찾아보았습니다.해당 이슈를 이해하기 위해서는 원시값(primitive)과 참조값(reference)부터 이해해야합니다.원시값과 참조값

이전에 작성했던 Presentational & Container Component (1) 에 이어서 개발하면서 두 요소에 대해 이해한 부분을 추가적으로 작성하려고 합니다.과거 글을 수정하지 않고 추가로 작성하는 것은 오늘 작성한 내용도 오류가 있을 것이고 추후 (3)

브라우저의 렌더링 과정을 CRP(Critical Rendering Path)라고 하며 CRP는 렌더링 엔진이 처리해야 할 일련의 단계를 나타내는 모델입니다.CRP의 단계는 아래와 같습니다.토큰화 : 브라우저는 웹 페이지의 HTML 코드를 문자열 형태로 읽어들입니다. 그

https://a.domain.com에서 https://server.domain.com으로 요청을 하고 있습니다.이때, CORS가 발생해서 이슈를 해결한 과정을 작성하려고 합니다.CORS는 브라우저가 리소스 로드를 허용해야 하는 자체 출처 이외의 모든

Introduction

Introduction > 개발자로 처음 이직하던 시기에 뭣도 모르고 만능 컴포넌트 혹은 모듈을 고민하던 시간이 있었습니다. 이후, 다양한 프로젝트를 경험하면서 아키텍처를 공부하고 적용해보면서 이해하는 부분도 이해하지 못한 부분도 생겼는데 그 중 가장 난해한 부분이 결

React + Typescript + Webpack의 Boiler-plate를 만들었는가?기존 프로젝트를 하면서 Builder인 Webpack을 지금보다 잘 사용하고 싶다는 관심은 있었습니다. 다만, 지금까지 CRA로 작업하다보니 해당 프로젝트를 eject해서 Webp

CSS-In-Js는 단어의 의미 그대로 스타일을 작성하기 위해 Javascript를 사용하는 아이디어를 말합니다. 또한, CSS-In-Js는 특정 라이브러리가 아닌 Javascript로 스타일을 작성하는 아이디어를 통칭하며, 해당하는 라이브러리로 React-Jss, S

최근 프로젝트에서 아래의 그림과 같이 서버에서 받은 값을 계산하고 계산 값을 바탕으로 주기적으로 서버에 Audit을 요청하는 프로그램을 개발했습니다.기존 시나리오는 하나의 프로그램에서 하나의 Audit만을 수행하려 했으나, 사용자의 편의성 개선을 위해 무제한 Audit

React로 개발한 프로젝트를 Prod dir의 Subdir(/app/web/data/tbridge)에 배포하려고 합니다. AWS EC2 를 통해 웹 소스를 배포하는데 배포를 위해서는 몇 가지 설정을 해주어야합니다.기본적인 백엔드 설정은 아래와 같습니다.위의 설정에 다

Flux Architecture에 대해 공부하던 중에 MVC, Flux, Redux에 대하여 비교해 놓은 Blog가 있어서 링크를 남깁니다.Reference : MVC-Flux-Redux

Introduction

웹 워커(Web Worker)는 Background Thread에서 스크립트를 실행하는 방법스크립트(Scripts)가 한 번 HTML에서 실행되면 스크립트가 종료될 때까지 현재 페이지는 반응하지 못합니다. 웹 워커를 사용하게 되면 백그라운드에서 다른 스크립트와 독

고차 컴포넌트 (HOC : High Order Component)는 "컴포넌트 로직을 재사용하기 위한 React의 고급 기술"이라고 React 공식 문서에 작성되어 있습니다.고차 컴포넌트는 컴포넌트를 인자로 받아 새로운 컴포넌트를 리턴하는 함수입니다.const Enha

절대 경로 적용 및 Web3 Wallet 개발 과정에서 기존의 CRA 환경에서는 Compile이 되지 않는 문제가 발생하여 프로젝트를 Eject하면서 아래와 같은 에러를 마주치게 되었습니다.위의 문제는 Webpack 5가 Nodejs의 핵심 모듈을 자동으로 Polyfi