[JS] 디바운싱(Debouncing)과 쓰로틀링(Throttling)
디바운싱(Debouncing)과 쓰로틀링(Throttling) 디바운싱(Debouncing)과 쓰로틀링(Throttling) 은 사실, 자바스크립트의 개념이라기 보다는 프로그래밍 기법중 하나입니다. 둘 다 디바이스(일반적으로 CPU)의 무리를 주지 않기 위해 사용되곤 합니다. 일종의 최적화라고 볼 수 있습니다. 그렇다면 디바운싱과 쓰로틀링이 각각 무엇을 의미하는지 알아보시죠! 디바운싱(Debouncing) : 연이어 발생한 이벤트를 하나의 그룹으로 묶어서 처리하는 방식으로, 주로 그룹에서 마지막, 혹은 처음에 처리된 함수를 처리하는 방식으로 사용되곤 한다. 쓰로틀링(Throttling) : 연이어 발생한 이벤트에 대해, 일정한 delay를 포함시켜 연속적으로 발생한 이벤트는 무시하는 방식을 뜻한다. 즉,..
2021. 6. 5.
[React] 리액트 reconciliation(재조정) 이란? / 리액트 key
Virtual DOM 리액트에 있어서 reconciliation 의 개념을 이해하려면, 버츄얼 돔의 이해가 필요합니다. Virtual DOM에 대해서는 간단하게만 설명하고 넘어가겠습니다. 이 동영상 은 VDOM을 직관적으로 이해하는데 많은 도움을 주고, React 공식문서 VDOM 을 참고하셔도 좋습니다. 사실 VDOM은 워낙 유명하고 중요한 개념이기 때문에 검색을 통해 쉽게 레퍼런스를 찾으실 수 있을 겁니다. 😀 DOM 트리는 무겁습니다. DOM 트리를 전부 다시 그리는 것은, 브라우저 렌더링에 있어서 매우 큰 코스트를 잡아먹죠. 그래서 리액트는 메모리에 VDOM 이라는 가상의 돔 트리를 존재시키면서, 실제 DOM 트리를 렌더링 하는데에 있어서는, VDOM을 바탕으로 변경시킬 일부 부분만을 리렌더링하게..
2021. 6. 1.
[React] Next JS 이미지 최적화, 이미지 컴퍼넌트 / Image Component / Image Optimization
목차 Image Component & Image Optimization Quick look differences Configuration 외부에서 가져오는 이미지인 경우 Loader 설정 Caching 설정 Device Sizes Image Sizes Image Component & Image Optimization 💡 version 10.0.0 부터 이미지 최적화 기능을 사용할 수 있습니다. 대신 next/image 의 모듈을 이용하자! 리사이징, 최적화, 브라우저 호환 등을 지원한다. 최적화는 빌드 타임에 진행되지 않고, on-demand 하게 이루어진다. 즉, 이미지 개수에 따라 빌드 타임이 길어지지 않는다는 뜻이다. Quick look differences Feature Next.js Image ..
2021. 3. 8.
[React] Next JS Pre-rendering / Static Generation(getStaticProps ) / SSR(getServerSideProps)
목차 기본 개념 Static Generation Static Generation 은 언제 사용될까? 예시 External Data 가 없는 경우 External Data 가 존재하는 경우 페이지가 External Data에 종속되는 경우 Fallback 기타 Server-side Rendering 예시 참고 ----- 기본 개념 Next JS 는 모든 페이지를 pre-rendering 한다. 즉, Client-side JS 로딩 방식으로 하지 않고 HTML 을 미리 만든다. 성능개선, SEO 최적화 Static Generation 과 Server-side Rendering 방식으로 나뉜다. 성능상의 차이로 인해 Static Generation 방식이 권장된다. 각각의 방식중 하나만 골라야되는 것이 아니라..
2021. 3. 8.
[React] Next JS 동적 라우팅 / Dynamic Routing
목차 동적 라우팅 (Dynamic Routing) 일반적인 사용 주의할 점 Multiple segment 기타 사용 예시 Catch all routes Optional 하게 사용하기 동적 라우팅 (Dynamic Routing) 일반적인 사용 pages/post/[id].js ⇒ post/1 로 접근가능 예시 1 import { useRouter } from 'next/router' const Post = () => { const router = useRouter() const { id } = router.query return Post: {id} } export default Post 예시 2 pages/post/[id].js 에 대해 post/abc?test=123 로 접근했을 때 갖는 query ob..
2021. 3. 8.
[TypeScript] 타입스크립트 스타일 가이드 요약 📋 (Ver. Google) / 1️⃣ - 식별자 (Identifiers)
스타일가이드란? 개발자라면 보통 본인들이 코딩을 할때 시스로 지키는 convention 들이 있을 것입니다. 변수 이름 짓는 방법이라던가, 들여쓰기의 정도, 줄바꿈 등등등 이런것들이 각각 다르겠죠? 헌데 협업, 혹은 대규모 개발을 할 때는, 코딩 스타일에 규칙을 정해놓고 통일할 필요가 있습니다. 구글에서는 이런 상황에서 서로 맞출 style 들을 지정해서 문서화 두었습니다. 워낙 체계적으로 잘 돼있어서 여러 기업, 프로젝트 들에서 사용됩니다. 구글 스타일 가이드 : google.github.io/styleguide/ Google Style Guides Style guides for Google-originated open-source projects google.github.io TypeScript 저는..
2021. 3. 4.
[JS] 디바운싱(Debouncing)과 쓰로틀링(Throttling)
디바운싱(Debouncing)과 쓰로틀링(Throttling) 디바운싱(Debouncing)과 쓰로틀링(Throttling) 은 사실, 자바스크립트의 개념이라기 보다는 프로그래밍 기법중 하나입니다. 둘 다 디바이스(일반적으로 CPU)의 무리를 주지 않기 위해 사용되곤 합니다. 일종의 최적화라고 볼 수 있습니다. 그렇다면 디바운싱과 쓰로틀링이 각각 무엇을 의미하는지 알아보시죠! 디바운싱(Debouncing) : 연이어 발생한 이벤트를 하나의 그룹으로 묶어서 처리하는 방식으로, 주로 그룹에서 마지막, 혹은 처음에 처리된 함수를 처리하는 방식으로 사용되곤 한다. 쓰로틀링(Throttling) : 연이어 발생한 이벤트에 대해, 일정한 delay를 포함시켜 연속적으로 발생한 이벤트는 무시하는 방식을 뜻한다. 즉,..
[React] 리액트 reconciliation(재조정) 이란? / 리액트 key
Virtual DOM 리액트에 있어서 reconciliation 의 개념을 이해하려면, 버츄얼 돔의 이해가 필요합니다. Virtual DOM에 대해서는 간단하게만 설명하고 넘어가겠습니다. 이 동영상 은 VDOM을 직관적으로 이해하는데 많은 도움을 주고, React 공식문서 VDOM 을 참고하셔도 좋습니다. 사실 VDOM은 워낙 유명하고 중요한 개념이기 때문에 검색을 통해 쉽게 레퍼런스를 찾으실 수 있을 겁니다. 😀 DOM 트리는 무겁습니다. DOM 트리를 전부 다시 그리는 것은, 브라우저 렌더링에 있어서 매우 큰 코스트를 잡아먹죠. 그래서 리액트는 메모리에 VDOM 이라는 가상의 돔 트리를 존재시키면서, 실제 DOM 트리를 렌더링 하는데에 있어서는, VDOM을 바탕으로 변경시킬 일부 부분만을 리렌더링하게..
[React] Next JS 이미지 최적화, 이미지 컴퍼넌트 / Image Component / Image Optimization
목차 Image Component & Image Optimization Quick look differences Configuration 외부에서 가져오는 이미지인 경우 Loader 설정 Caching 설정 Device Sizes Image Sizes Image Component & Image Optimization 💡 version 10.0.0 부터 이미지 최적화 기능을 사용할 수 있습니다. 대신 next/image 의 모듈을 이용하자! 리사이징, 최적화, 브라우저 호환 등을 지원한다. 최적화는 빌드 타임에 진행되지 않고, on-demand 하게 이루어진다. 즉, 이미지 개수에 따라 빌드 타임이 길어지지 않는다는 뜻이다. Quick look differences Feature Next.js Image ..
[React] Next JS Pre-rendering / Static Generation(getStaticProps ) / SSR(getServerSideProps)
목차 기본 개념 Static Generation Static Generation 은 언제 사용될까? 예시 External Data 가 없는 경우 External Data 가 존재하는 경우 페이지가 External Data에 종속되는 경우 Fallback 기타 Server-side Rendering 예시 참고 ----- 기본 개념 Next JS 는 모든 페이지를 pre-rendering 한다. 즉, Client-side JS 로딩 방식으로 하지 않고 HTML 을 미리 만든다. 성능개선, SEO 최적화 Static Generation 과 Server-side Rendering 방식으로 나뉜다. 성능상의 차이로 인해 Static Generation 방식이 권장된다. 각각의 방식중 하나만 골라야되는 것이 아니라..
[React] Next JS 동적 라우팅 / Dynamic Routing
목차 동적 라우팅 (Dynamic Routing) 일반적인 사용 주의할 점 Multiple segment 기타 사용 예시 Catch all routes Optional 하게 사용하기 동적 라우팅 (Dynamic Routing) 일반적인 사용 pages/post/[id].js ⇒ post/1 로 접근가능 예시 1 import { useRouter } from 'next/router' const Post = () => { const router = useRouter() const { id } = router.query return Post: {id} } export default Post 예시 2 pages/post/[id].js 에 대해 post/abc?test=123 로 접근했을 때 갖는 query ob..
[TypeScript] 타입스크립트 스타일 가이드 요약 📋 (Ver. Google) / 1️⃣ - 식별자 (Identifiers)
스타일가이드란? 개발자라면 보통 본인들이 코딩을 할때 시스로 지키는 convention 들이 있을 것입니다. 변수 이름 짓는 방법이라던가, 들여쓰기의 정도, 줄바꿈 등등등 이런것들이 각각 다르겠죠? 헌데 협업, 혹은 대규모 개발을 할 때는, 코딩 스타일에 규칙을 정해놓고 통일할 필요가 있습니다. 구글에서는 이런 상황에서 서로 맞출 style 들을 지정해서 문서화 두었습니다. 워낙 체계적으로 잘 돼있어서 여러 기업, 프로젝트 들에서 사용됩니다. 구글 스타일 가이드 : google.github.io/styleguide/ Google Style Guides Style guides for Google-originated open-source projects google.github.io TypeScript 저는..