Client/Front-end (13) 썸네일형 리스트형 <FE> Recoil로의 마이그레이션 배경 HyupUp 프로젝트는 다양한 상태를 관리합니다. 그래서 저희는 처음 개발을 시작했을 때부터 상태관리에 관심을 가졌으며, 라이브러리의 유무에 따른 차이를 체감해보고자 하였습니다. HyupUp은 프로젝트 관리 및 협업 툴로써, 크게 유저 상태인 UserState 와 조직 내 프로젝트 상태인 EpicState, StoryState 를 가집니다. 이 글에서는 다음과 같은 UserState를 다룹니다. UserState = { id?: number; name?: string; job?: string; email?: string; imageURL?: string; admin?: boolean; organization?: number; currentProjectName?: string; currentProje.. <FE프레임워크> 리액트 vs 뷰 vs 앵귤러 vs 스벨트 1. 소개 * 소개 - 최근 웹 프론트엔드는 CSR(Client-side Rendering)이 일반화 되었다. 이는 SPA(Single Page Application) 기법을 사용하여 페이지를 렌더링 하는데, 이러한 것을 지원해주는 것 중 하나가 리액트이다. - 그러나 SPA를 지원해주는 것이 리액트만은 아니다. 그 외에 가장 대표적인 툴이 뷰(Vue), 앵귤러(Angular), 스벨트(Svlete) 이다. - 필자의 경우 단순히 리액트 수요가 많아 사용하고있지만, 단순히 그런 이유를 넘어 더 자세히 알아보고자 조사하였다. * SPA - 먼저 간단하게 SPA(Single Page Application)에 대해서 짚어보자. - SPA는 기본적으로 단일 페이지이다. 따라서 기존의 서버 사이드 렌더링에 비해 .. <Front-end> 쓰로틀링과 디바운싱 1. 소개 - 최근에 수많은 이벤트를 발생시킬 수 밖에 없는 부분을 개발하면서 고민에 빠졌었다. 이 정도로 많은 요청이 있을때마다 이벤트를 발생시키는 것이 옳은건지, 이것을 최적화 할 수는 없는지 고민을 했다. - 예를 들면 사용자가 스크롤을 내릴 때마다 특정 함수를 발생시킨다고 가정하자. 스크롤 좌표가 바뀔때마다 함수가 실행될텐데 정말 이것이 올바른 방법일까? - 이러한 의문에 쓰로틀링과 디바운스에 대해 공부해보라는 조언을 받았고, 이렇게 정리해보려 한다. - 참고로 제목에서는 프론트엔드의 기술이라고 썼지만, 이는 순전히 필자가 웹 프론트엔드 개발자이기 때문이다. 그렇기 때문에 아래에서도 웹을 예시로 들 예정이다. 디바운싱과 쓰로틀링은 프로그래밍 기법 중 하나임을 명심하길 바란다. 2. 쓰로틀링 * 의.. 이전 1 2 다음
