1) 좋은 설계는 왜 필요한 것인가?​

왜 좋은 설계는 필요할까? 오브젝트나 클린 아키텍처에서 말하는 좋은 설계를 해야하는 이유는 다음과 같다.

아직 React 18이 정식 릴리즈되지 않았지만 React 18 Plan을 통해 어떤 기능들이 추가되는지 대부분 알고 있을 것이라고 생각됩니다. 아마 실제로 사용하고 있는 팀들도 있을 것 같네요.

react-18-plan 블로그의 첫 문단을 읽어보면 react 18에서 어떤 부분을 강조하고 있는지 나옵니다.

When it’s released, React 18 will include out-of-the-box improvements (like automatic batching), new APIs (like startTransition), and a new streaming server renderer with built-in support for React.lazy.

이러한 기능들이 가능한건 "concurrent rendering"이라고 부르는 opt-in 매커니즘이 React 18에 추가되었기 때문이다. 이것은 React가 동시에 여러 버전의 UI를 준비할 수 있게합니다. 이러한 변화는 인지 범위 밖에 있지만 실제 성능과 인지 성능을 모두 개선할 수 있는 새로운 가능성을 열어줍니다.

글에서 "concurrent rendering"을 강조하고 있듯이 이번 v18의 핵심주제는 concurrent rendering입니다.

auto를 활용해 release 버전관리와 자동배포를 작업한 경험을 다루었습니다.

애플리케이션을 개발할 때 모든 코드를 직접 개발하기는 어렵습니다. 잘 개발되어있고 관리되고 있는 오픈소스를 사용하는 경우가 대부분입니다.
개발하고 있는 프로젝트에서도 많은 라이브러리들을 사용하고 있는데(chartjs, kakaoMap ...) 이러한 외부 라이브러리를 사용해야하는 경우 어떻게해야 잘 사용하고, 테스트코드를 짤 수 있는지 이야기 해보겠습니다.

프론트엔드에서의 설계방식의 변천사를 소개한 뒤 앞으로 어떻게 컴포넌트를 만들어야 할지 저의 생각을 이야기 해보겠습니다.

개발관련 서적들을 읽으면 공통적으로 테스트코드작성의 중요성들을 언급하고 있습니다. 하지만 많은 개발자들, 특히 프론트엔드 개발자들 중 테스트코드를 짜는 사람들은 많지 않은 것 같습니다. 그렇다면 왜 테스트코드를 짜지 않을까요? 그리고 테스트코드를 어떻게 짜야할까요?

"테스트 코드가 가져다 주는 장점들을 알고 있지만 다른 단점들을 얘기하며 여전히 시도하려 하지 않고, 도입을 꺼리는 것은 테스트 주도 개발을 해보지 않았거나 제대로 운영해보지 못했기 때문이다."

https://yorr.tistory.com/26

보통 모듈의 독립성을 판단하는 지표로 응집도와 결합도를 이야기합니다. 응집도는 높을수록 좋고 결합도는 낮을수록 좋다는 이야기를 많이 들어봤는데 프론트엔드에서 어떻게 적용할 수 있을지 적어보았습니다.

요즘 스칼라로 배우는 함수형 프로그래밍 책을 읽고 있습니다.

회사에서 여러 프로젝트를 모노레포로 전환하려한 경험을 다루었습니다.

프론트엔드에서 화면을 구현하기 많은 컴포넌트들이 만들고, 그 컴포넌트들을 조합하여 화면을 구성하게 됩니다.
너무 많은 컴포넌트들이 만들어지게 되면 유지보수가 힘들어지게되고 중복된 코드가 많아지기에 재사용 가능한 컴포넌트를 만드는게 매우 중요한 일이 되었습니다.

https://developer.mozilla.org/ko/docs/Web/HTTP/Caching 글을 정리했습니다.

왜 Functional Component가 탄생했을까?

Data fetching library가 탄생하게된 배경과 장점

Brand site를 개발하며 SEO를 높히기 위해 기존 Vue.js로 되어있는 프로젝트를 next.js 로 프레임워크를 변경하는 작업을 진행한 경험이 있습니다. 이때 새로운 프레임워크로 Next.js를 선택한 배경으로는 새로운 v10이 나왔기도 했고, 가장 인기있는 프레임워크 중 하나이기 때문입니다.

Next.js가 이번 v10이 나오게 되면서 많은 기능들이 추가 되었는데, 그 중 가장 관심이 갔던게 next/image 입니다.

CRA를 통해 프로젝트를 생성하면 Web-Vitals를 봤을 겁니다. 이 Web Vitals은 어떤 작업을 하고 어떻게 사용하는 것 일까요?

실행 컨텍스트는 자바스크립트에서 가장 중요한 핵심 개념 중 하나로, 실행할 코드에 제공할 환경 정보들을 모아놓은 객체입니다. 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고 이를 콜 스택에 쌓아올렸다가, 가장 위에 있는 컨텍스트를 실행하는 식으로 전체 코드의 환경과 순서를 보장합니다. 여기서 '동일한 환경', 즉 하나의 실행 컨텍스트를 구성할 수 있는 방법으로 전역공간, eval() 함수, 함수 등이 있습니다. 자동으로 생성되는 전역공간과 악마로 취급받는 eval을 제외하면 우리가 흔히 실행 컨텍스트를 구성하는 방법은 함수를 실행하는 것 뿐입니다.

Throttle과 Debounce는 자주 사용되는 이벤트나 함수의 실행 빈도를 줄여 성능상에 이점을 가져오기 위해 사용되는 기법입니다.

구글이 Webp를 만들어서 무료로 뿌리는 이유는 돈 때문이다. 구글 혼자서 엄청난 인터넷 트래픽을 사용하고 있는데, 이미지 포맷만 최적화해도 서버 트래픽이 크게 줄어 서버비를 아낄 수 있다. 게다가 인터넷 속도가 빨라질수록 광고 매출도 늘어나기 때문에 구글은 항상 인터넷 속도를 올리려고 노력한다.

WebP 제작 배경 :: 나무위키

2020년 10월 20일 React v17이 릴리즈 되었다. 리엑트 이전 주요 릴리즈 이후 2년 반만에 릴리즈되는 것으로 많은 관심들이 있었는데 과연 어떤 내용들이 추가되었는지 살펴보자.

Overview​

script 태그의 async 와 defer에 대해서 공부하던 중 DOMContentLoaded와 load 이벤트에 대해서 알게되었고 두 이벤트에 대해 정리하였습니다.

기본적으로 CSS는 rendering-blocking resource입니다. 브라우저가 렌더링을 하기 위한 render tree를 생성하기 위해서는 DOM tree 와 CSSOM이 모두 필요합니다. CSSOM이 만들어지지 않았다면 render tree도 만들수가 없는거죠.
CSS가 사용 가능해질 때까지(CSSOM이 만들어질 때까지)렌더링이 차단되기에 media type과 media query를 사용하여 문제를 해결할 수 있습니다.

Reconciliation은 React의 "비교(diffing)" 알고리즘입니다. 이 비교 알고리즘 덕분에 컴포넌트의 갱신이 예측 가능해지면서도 고성능 앱이라고 불러도 손색없을 만큼 충분히 빠른 앱을 만들 수 있습니다

Web.dev의 Efficiently load third-party JavaScript를 참고하여 작성하였습니다.