리액트만 하면 재미없지 않으세요?
2023. 9. 20.
Goodbye, UseEffect
최원빈: 프론트엔드 개발을 진행할 수록, useEffect를 "잘 쓰려고" 노력하는 것이 아니라, "안 쓰려고" 노력하게 됩니다. 아무래도 선언적인 프로그래밍에서 벗어날 수밖에 없기 때문인 것 같죠. 더군다가 18버전의 StrictMode에서 Effect를 두 번 실행시키는 것은 점점 StrictMode를 포기하게 만듭니다. 공식문서의 you-might-not-need-an-effect 와 내용을 공유하므로, 먼저 읽고 나서 영상을 들어보셔도 좋을 것 같아요.
심윤섭: hooks가 처음 나올 때(v16.8)는 hooks의 개수도 제한적이였을 뿐더러 현재처럼 라이브러리들이 정립되지 않았습니다. 기존의 redux-thunk와 redux-saga로 서버 데이터를 가져오곤 했죠. 하지만 지금은 다릅니다. 서버 데이터를 가져오는 라이브러리들이 정립되었고, 모든 상태를 useState에 저장하지 않아도 된다라는 정보는 널리 퍼졌습니다. 이 영상은 그에 맞춰서 사이드 이펙트가 필요할 때만 useEffect를 사용하는 것이 좋다는 좋은 정보입니다.
테스트를 어떻게 써야 할까
심윤섭: 첫번째 글은 테스트에 대한 간단한 소개글과 FAQ이며, 두번째 글은 테스트를 어떻게 접근해야 하는지 알려줍니다. 프론트엔드에서 테스트를 작성하게 되면 글에서 말하는 use case testing을 많이 하게 됩니다. 라이브러리를 자주 바꿔야 할 수도 있고, 아니면 아예 프레임워크를 바꿔야 할 수도 있습니다. 그래서 세부 구현에 대해 테스트를 하지 않고 동작에 대해 테스트를 진행하게 됩니다. 이 두 글을 통해 테스트를 시작해보세요 😃
최원빈: Use Case Coverage를 100%로 맞추기 위한 조건을 구해내는 것은 훈련이 필요한 것 같아요. 잘 추상화된 기능을 만들게 된다면, 한번씩은 단위 테스트를 만들어보는 경험을 가져보면 좋겠죠?
좋은 UI 프레임워크의 기준
심윤섭: UI프레임워크의 역사와 UI 프레임워크 유형을 소개합니다. 그리고 좋은 UI 프레임워크의 기준에 대해 소개하는데, 이는 디자인 시스템의 원칙을 만들 때 연관지을 수 있겠네요 :)
최원빈: UI 라이브러리 쓰임새에 맞게 분류해둔 것이 인상적이네요. 비슷해 보여도 분명히 다른 쓰임새를 가지고 있으니, 적절한 라이브러리를 선정할 때 알아두면 좋은 내용이죠. 거기에 프레임워크별 모던한 라이브러리가 정리돼있으니, 프로젝트를 시작할 시점에 읽어봐도 좋을 것 같아요.
김대관: 평소 UI 프레임워크를 잘 찾지 않았었는데, 굉장히 많은 종류가 있다는 것을 알 수 있었습니다.
Portal 한번 써볼래요?
심윤섭: Portal은 쓸 경우가 드물지만 강력한 기능을 제공합니다. 이 글은 Portal의 사용방법과 장점, 주의사항을 알려주면서 Portal에 입문을 도와줍니다. Portal기능은 Vue, Solid에서도 제공하니 꼭 사용사례를 기억하고 적용하시길 바랍니다!
최원빈: Event Bubbling이 DOM의 구조대로 진행되지 않고, React의 렌더 트리 구조로 발생한다는 점을 주의해야겠네요! 쌓임 맥락을 확실하게 벗어날 수 있다는 점에서 반드시 알아야 하는 API라고 생각합니다.
김대관: 항상 모달 생성 시에 Portal을 무지성으로 사용하는 경우가 있었는데, Event Bubbling 작동 문제와 직접적인 성능 문제에 연결될 수 있다는 점을 유념해야겠다는 생각이 들게되는 글입니다!
Static Hermes, RN을 더 빠르게 해줍니다.
심윤섭: Hermes는 기존 JS 엔진을 대체하여 React Native의 성능을 향상했습니다. 컴파일을 빌드타임에 하도록 만들고 앱 실행시에는 바이트코드가 실행되게 만들어 시작시간을 줄여 성능을 향상한 것입니다(상세한 글). Static Hermes는 TS, Flow를 활용하여 JS를 조건부 컴파일을 해서 native code를 더 안전하게 불러와서 더 성능을 끌어올린다고 합니다. 좋네요!
Next.js의 App router는 시기상조다.
심윤섭: Next.js 13버전에 모든 것을 바꾸는 App router를 출시하면서 production-ready라고 하지만… 기존의 것을 완벽하게 대체하지 않을 뿐더러 불안정하다는 것을 알게 됩니다. 이 글은 Next.js app router가 아직은 불안정하다라는 것을 알려주면서 불만스러운 점을 토로합니다.
김대관: Next.js를 사용하면서 다양한 문제와 일관성 없는 API 에 대한 불만에 대한 이야기와, 쿠키와 API 헤더를 개발자가 극히 제한적으로 컨트롤할 수 있는 부분에 대해 지적하는 글입니다. 해당 글을 통해 Edge에서 미들웨어가 제한적으로 작동하는 문제와 Next.js에 대한 문제를 간접적으로 경험할 수 있습니다.
CSS를 동적으로 만들기
김대관: CSS 커스텀 프로퍼티 계산이 어떻게 이루어는지에 대한 글입니다. 모던 CSS 지원에서 계산된 값의 영향을 이해하는 것이 중요하며, 커스텀 프로퍼티의 값을 계산하는 방식이 상속에 어떻게 영향을 주는지도 알려주니 CSS 작성할 때 많은 도움이 되는 내용입니다!
심윤섭: CSS를 동적으로 코딩할 수 있도록 만든 CSS 변수(custom property라고도 불림)은 매우 유용합니다. 하지만 fallback을 넣는 방법, 계산되는 방법을 모르는 사람도 많습니다(CSS 변수를 모르는 사람도 있구요). CSS 변수를 사용한다면 흥미롭게 볼 수 있는 글입니다. 추가로 @supports를 통한 fallback 방법까지 알려줍니다!
최원빈: @supports로 css에 fallback을 담는다는게 신기하네요. custom property를 자주 사용하진 않았지만, 혹 디자인 관련 라이브러리에 기여하게 된다면 유용하게 쓸 수 있을 것 같아요.
JS Closures 가이드
심윤섭: 실행 컨텍스트는 자바스크립트의 본체라고 볼 수 있을 정도로 기본적인 개념이자 한 번에 이해하기 어려운 개념입니다. 하지만 꼭 알아야 하니 좋은 시각화 자료와 함께 설명된 글을 보세요 😊 더 깊은 개념을 원한다면 이 자료도 봐주세요!
최원빈: 스코프 체이닝은 확실하게 이해하지 않으면 매번 헷갈리는 것 같아요. 좋은 예제 코드와 도식화로 감을 잡기 좋은 글이네요. 저는 우아한테크코스의 테코톡 영상을 보고 난 뒤론 명확하게 이해했는데요, 처음 개념을 듣는 분들께도 쉽고 보기좋게 설명한 영상이라 추천드려요.
Infcon 2023
인터렉티브 개발
심윤섭: WebGL과 Three.js의 가벼운 소개같은 발표입니다. WebGL은 아무래도 많은 개발자에게 어색할 수 있는데 잘 설명해 주셨다고 생각합니다. Three.js 강의로 이 강의를 소개해주셨는데, 입문하기엔 이 웹페이지도 나쁘지 않다고 생각합니다 🙂
최원빈: 해당 부분을 개발할 일은 적겠지만, 생소한 부분이다보니 오히려 듣는데 재미있네요. WebGL이라는 키워드만 알아둬도 좋다고 생각해요.
Automated Testing on 웹사이트
심윤섭: Lighthouse과 Web Vitals에 대한 간단한 소개입니다. Lighthouse는 실제 디바이스와 비슷하게 테스트를 진행하여 Web Vitals에 문제가 되는 부분을 탐지하여 고치도록 유도합니다. 실제 클라이언트의 데이터를 보고 싶다면 CruX에 대한 정보를 다룬 이 글을 보고 여러 데이터를 통해 클라이언트가 좋은 UX를 가지는지 확인해보는 것이 좋습니다.
최원빈: chrome lighthouse를 활용하기에 앞서 기초적인 설명부터 천천히 해주네요. 혹 아직 본인 프로젝트의 성능측정을 안해보셨다면, 이 강의를 듣고 바로 확인해보시는 것을 추천드려요!
집합으로 이해하는 타입스크립트
심윤섭: 타입스크립트의 타입 입문하는 사람이 보기 좋은 발표입니다! 업/다운 캐스팅에 대해 이야기 하면서 기본 타입, 유니온 타입이나 교차 타입을 소개합니다. 더욱 깊게 들어가면 업캐스팅과 관련된 공변성에 대해 알아보는 것이 좋습니다 😀 다른 언어에서는 어떻게 적용되는지 확인하려면 이 글도 확인해보세요. 음! 어렵다!
최원빈: never , unknown , any 라는 특수 타입들에 대해 쉽게 이해할 수 있는 강의네요. as 를 활용한 타입 단언을 진행할 때와, 유니온 타입을 활용하게 될 경우 업-다운 캐스팅에 대한 이해가 있다면 타입스크립트의 빨간줄이 전혀 두렵지 않을 것 같아요!
모노레포 적용기
심윤섭: 간단한 Turborepo 적용기를 설명하고 있습니다. 이전의 갖고왔던 글을 상세하게 풀어낸 발표라고 볼 수 있겠네요. 모노레포를 도입한 이유를 상세하게 설명하고 있으니 한 번 보시면 모노레포를 도입하는 이유를 이해하는데 도움이 될 거라고 생각합니다.