[아키텍처]레이어드 아키텍처(Layered Architecture)에 대하여

기본적인 아키텍처에 대해서 정리를 해서 문서화 할 필요성을 느끼고 Basic한 레이어드 아키텍처에 대해서 분석하고 개인적인 견해를 간단히 정리해본다. Layered Architecture는 '관심사에 분리(Separation of concerns)'에 따라 어플리케이션을 일정한 책임을 기준으로 논리적인 Layer로 분리한 아키텍처 패턴이다. 계층은 잘 정의된 인터페이스를 통해서 통신하며 보통 각 Layer는 한단계 아래의 Layer의 컴포넌트와만 상호작용한다. 그러나 그렇게 할 경우 발생하는 불편함들이 꽤 있기에 아래 단계 뿐 아니…

디바운스 함수에 대하여

보통 API 콜을 처리하기 위해서 디바운스나 쓰로틀링을 처리하는 경우가 많은데 이글은 그 중 디바운스 함수에 대해서 간단히 분석하고 정리 한 내용이다. 디바운스와 쓰로틀링은 공통적으로 여러 이벤트를 묶어서 한번에 처리하는 방법이다. 그중 디바운스의 경우 사용자 이벤트를...

GitHub - yoonjonglyu/memo: memo

memo. Contribute to yoonjonglyu/memo development by creating an account on GitHub.

프론트엔드 테스트에 대한 생각

요즘은 프론트엔드에서도 TDD 라는 단어가 심심치 않게 보인다. TDD 와 테스트가 동일한 뜻은 아니지만 그전에는 테스트는 커녕 기본적인 프레임워크나 라이브러리 사용법? 등에 대한 어려움?인가 웹팩 같은 번들러나 타입스크립트 같은 트랜스파일러에 대한 어려움인가? 대충 ...

프론트엔드 설계 고민 -6-

요즘 운동에 빠져서 개발을 소홀히하고 있다. 그래서 글쓰는 것도 프로젝트 진행도 느긋하게 지연 되는데.. 원래 쓰려던 내용은 UI 컴포넌트를 구성하는 법에 대한 디테일이였지만 최근에 상태관리에 대해서 어려..

프론트엔드 개발에 대한 생각

개인적으로 공통단에 대해서 관심이 많다. 개발을 처음 독학으로 시작할때 부터 어지간한 프로그램을 이해하는데 큰 어려움이 없었고 어지간한 것들은 그 내부를 보지 않고도 어떻게 구현해야할지 직관이 가능했는..

[프론트엔드] 코드 스플릿에 대한 정리

벡엔드뿐 아니라 프론트엔드 개발에서 성능 최적화를 위해서 고려해야 할 요소는 상당히 많다. 디테일한 부분을 제외하고 큼직만 한 요소들을 축약해서 꼽자면 리소스 용량을 줄이는 것(압축 및 캐시와 분할), 렌더링 비용을 줄이는 것(DOM, CSSOM, VDOM), 네트워크 비용을 줄이는 것(커넥션 릴리즈) 정도로 분류할 수 있을 거 같다. 그중 리소스 용량 즉 js나 html, css, image등의 파일의 용량을 관리하는 방식으로 웹을 최적화할 수 있는데 단순히 압축(webp, gzip 등)을 통해서 해당 리소스들의 용량을 줄이는 방…

[오픈소스][React] react-custom-swipe

모바일 앱을 그대로 웹으로 옮기면서 좌우 스와이프를 통한 인피니티 스크롤을 구현해야했다. 관련해서 여러 제약 조건들을 충족 시켜주는 오픈소스 라이브러리를 찾을 수 없어서 스와이프 기능을 분석하고 하드코딩으로 개발을 하였는데 해당 기능에 흥미를 느껴서 오픈소스로 개발해서 정리를 해보고 싶은 생각으로 개발 해보았다. 개인적으로 찾아본 결과로는 기존 웹사이트나 관련 오픈소스의 경우 스와이프에서 레이지로딩이나 페이지네이션을 지원하는 케이스를 발견하지 못했다.(핀터레스트 등) 보통 스와이프 기능이라고 부르는 스와이프 모션과 플립 모션을 감지…