[React] 리액트 Concurrent 모드란
Concurrent 모드? 리액트 공식 문서 - Concurrent 모드 에 대해 리액트 공식문서를 보면 Concurrent 모드에 대한 도입이 실험적 단계로 진행되고 있다고 말합니다. 최근 점점 쓰이고 있는 'Suspense 모드' 또한 이런 concurrent 모드와 맥락을 함께합니다. 그렇다면 이 Concurrent 모드는 무엇이며 왜 등장한 것이고, 무슨 이점이 있을까요? Concurrent, 우리말로 하면 '동시의' 라는 뜻을 가지고 있습니다. Concurrent 모드는 한국말로하면 '동시 체계' 혹은 '동시 방법' 정도가 되겠네요. 컴퓨터 사이언스에 에서 자주나오는 개념인 concurrent / parallel 의 의미 를 담고 있다고 생각합니다. (처음 들어보시는 분은 여기를 보시면 잘 설명..
2021. 6. 6.
[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.
[도서리뷰📘] TDD - 테스트 주도 개발
TDD (테스트 주도 개발) 들어가며 인턴 근무하면서 멘토님께 멘토링 지원비로 이 책을 사고 싶다고 부탁을 드리고 읽게 된 책이다. 많은 책들 중에 이 책을 선택했던 이유는, 안정적인 개발을 하고싶어서였다. 애초에 내 성격부터가, 기억력이 안좋고 꼼꼼하지 못한 타입이라, 무언가 문제를 만들어놓고 해결하는 스타일이다. 코딩을 할 때도, 이런 성격이 작용을 하다 보니, 반복되는 잦은 실수들이 생겨났고, 이를 없애는 방법이 없을까? 하는 의문이 들곤 했다. '함께 자라기' 를 읽으면서 느꼈던 점 중에, 실수가 당장 그 순간에는 나쁜 결과를 가져와도, 길게 보면 결국 성장하는 데에는 도움이 된다는 것이었다. 그렇다면, 실수로부터 오는 불이익을 최소로하면서, 실수를 해결하는 방식으로 코딩을 하면 되지 않을까? 하..
2021. 5. 29.
[CS지식] Non Bloking VS Asynchronous / 논블로킹 vs 비동기
Blocking , Non-Blocking VS Synchronous, Asynchronous 자바스크립트는 Non-Blocking 방식으로 작동하는 언어로서 .... 자바스크립트의 이점은 비동기(Asynchronous) I/O 에서 .... 언뜻 보면 굉장히 비슷한 개념인 것 같기도 하고, 그다지 신경쓰지 않고 넘어가게 되는 부분이다. 일반적인 경우에서는 블로킹 == 동기 , 논블로킹 == 비동기 라고 표현을 해도 사실 커뮤니케이션에 큰 문제는 생기지 않는다. 면접 질문에서 위와 같은 맥락의 질문을 받아 적잖이 당황하고, 조금 늦었지만 이제라도 확실히 알아가고자 여러 자료를 찾아보았다. 그림 으로 이해하는 데에는 이 자료 , 개념 자체를 이해하는 데에는 이 자료 가 많이 도움이 되었다. (감사합니다 🙏..
2021. 5. 20.
[도서리뷰📘] 함께 자라기 - 애자일로 가는 길 🍀
함께 자라기 - 애자일로 가는 길 (김창준 지음) 회사 멘토님께 추천을 받아 읽게 되었다. 내 기억으로는 전문 서적이 아닌 책을 굉장히 오랜만에 읽었던 것 같다. 그럼에도 불구하고 매번 모니터 앞에서 키보드만 두드리는 나에게 책도 나름대로의 읽는 재미가 있었구나 라는 생각을 들게 해준 책이다. 내용이 IT 관련 일하지 않는 사람이 읽어도 무방할 만큼 무겁지 않고, 되게 소박하게 잘 읽히는 말투로 쓰여져 있어서 좋았다. 결국 이 저자분이 궁극적으로 강조하고 있는 커뮤니케이션의 중요성에 걸맞는 전달력이라 느꼈다.(나는 간단한 것을 전달할 때도 어렵게 늘어놓고 있을 때가 있는데 이 책을 보면서 많이 찔렸다...😅) 개발자들은 개발을 하다 보면, 몰입을 하면 할수록 기술과 실력을 갈고닦는 데에 몰두하기 마련이다..
2021. 5. 2.
[React] 리액트 Concurrent 모드란
Concurrent 모드? 리액트 공식 문서 - Concurrent 모드 에 대해 리액트 공식문서를 보면 Concurrent 모드에 대한 도입이 실험적 단계로 진행되고 있다고 말합니다. 최근 점점 쓰이고 있는 'Suspense 모드' 또한 이런 concurrent 모드와 맥락을 함께합니다. 그렇다면 이 Concurrent 모드는 무엇이며 왜 등장한 것이고, 무슨 이점이 있을까요? Concurrent, 우리말로 하면 '동시의' 라는 뜻을 가지고 있습니다. Concurrent 모드는 한국말로하면 '동시 체계' 혹은 '동시 방법' 정도가 되겠네요. 컴퓨터 사이언스에 에서 자주나오는 개념인 concurrent / parallel 의 의미 를 담고 있다고 생각합니다. (처음 들어보시는 분은 여기를 보시면 잘 설명..
[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을 바탕으로 변경시킬 일부 부분만을 리렌더링하게..
[도서리뷰📘] TDD - 테스트 주도 개발
TDD (테스트 주도 개발) 들어가며 인턴 근무하면서 멘토님께 멘토링 지원비로 이 책을 사고 싶다고 부탁을 드리고 읽게 된 책이다. 많은 책들 중에 이 책을 선택했던 이유는, 안정적인 개발을 하고싶어서였다. 애초에 내 성격부터가, 기억력이 안좋고 꼼꼼하지 못한 타입이라, 무언가 문제를 만들어놓고 해결하는 스타일이다. 코딩을 할 때도, 이런 성격이 작용을 하다 보니, 반복되는 잦은 실수들이 생겨났고, 이를 없애는 방법이 없을까? 하는 의문이 들곤 했다. '함께 자라기' 를 읽으면서 느꼈던 점 중에, 실수가 당장 그 순간에는 나쁜 결과를 가져와도, 길게 보면 결국 성장하는 데에는 도움이 된다는 것이었다. 그렇다면, 실수로부터 오는 불이익을 최소로하면서, 실수를 해결하는 방식으로 코딩을 하면 되지 않을까? 하..
[CS지식] Non Bloking VS Asynchronous / 논블로킹 vs 비동기
Blocking , Non-Blocking VS Synchronous, Asynchronous 자바스크립트는 Non-Blocking 방식으로 작동하는 언어로서 .... 자바스크립트의 이점은 비동기(Asynchronous) I/O 에서 .... 언뜻 보면 굉장히 비슷한 개념인 것 같기도 하고, 그다지 신경쓰지 않고 넘어가게 되는 부분이다. 일반적인 경우에서는 블로킹 == 동기 , 논블로킹 == 비동기 라고 표현을 해도 사실 커뮤니케이션에 큰 문제는 생기지 않는다. 면접 질문에서 위와 같은 맥락의 질문을 받아 적잖이 당황하고, 조금 늦었지만 이제라도 확실히 알아가고자 여러 자료를 찾아보았다. 그림 으로 이해하는 데에는 이 자료 , 개념 자체를 이해하는 데에는 이 자료 가 많이 도움이 되었다. (감사합니다 🙏..
[도서리뷰📘] 함께 자라기 - 애자일로 가는 길 🍀
함께 자라기 - 애자일로 가는 길 (김창준 지음) 회사 멘토님께 추천을 받아 읽게 되었다. 내 기억으로는 전문 서적이 아닌 책을 굉장히 오랜만에 읽었던 것 같다. 그럼에도 불구하고 매번 모니터 앞에서 키보드만 두드리는 나에게 책도 나름대로의 읽는 재미가 있었구나 라는 생각을 들게 해준 책이다. 내용이 IT 관련 일하지 않는 사람이 읽어도 무방할 만큼 무겁지 않고, 되게 소박하게 잘 읽히는 말투로 쓰여져 있어서 좋았다. 결국 이 저자분이 궁극적으로 강조하고 있는 커뮤니케이션의 중요성에 걸맞는 전달력이라 느꼈다.(나는 간단한 것을 전달할 때도 어렵게 늘어놓고 있을 때가 있는데 이 책을 보면서 많이 찔렸다...😅) 개발자들은 개발을 하다 보면, 몰입을 하면 할수록 기술과 실력을 갈고닦는 데에 몰두하기 마련이다..