즐겁게, 코드

웹 서비스를 사용하다 보면 때때로 '이 기능은 어떻게 구현한 걸까?' 라는 의문이 들 때가 있지 않나요? 저는 최근 인스타그램을 사용하다가 "내가 올린 게시물에 좋아요가 달리면, 어떻게 실시간으로 알림이 오는 걸까?" 라는 궁금증을 가지게 되었는데요, 오늘 다룰 Server-Sent Event (SSE) 라는 키워드가 약간의 해답이 되었던 것 같아요. 그런데 ‘서버에서 보내는 이벤트’ 라는 명칭만 들어서는 이게 어떤 기술인지 금방 알아차리기 어려울 수 있는데요,Server-Sent Event에 대해 더 이해할 수 있도록 이번 글을 작성해 보았습니다.목차Server-Sent Event란?Server-Sent Event 구현하기SSE를 응용해 친구 초대 알람 만들어보기1. Server-Sent Event (..

함수 컴포넌트를 사용할 때 React.FC 라는 제네릭을 활용하면 children, displayName, defaultProps 등의 함수 컴포넌트가 갖는 기본 속성들에 대해 타입 지원을 받을 수 있습니다. import React from "react"; export const Child: React.FC = ({children}) => { return {children} } 아마 React.FC를 사용하는 가장 큰 이유도 chlidren을 갖는 컴포넌트의 타입을 지정하기 위해서일 텐데요, 하지만 React 18부터는 위 코드에서 Property 'children' does not exist on type... 이라는 오류가 출력됩니다. 그 이유는 children 프로퍼티가 React.FC에서 제외되었..

@kubernetes/client-node 라이브러리를 통해 웹 콘솔로 쿠버네티스를 제어할 수 있는 프로젝트를 계획중이었는데, 약 일주일간의 데모 스크럼 이후 결과적으로 불가능에 가깝다는 결론을 내리게 되어 이번 글에서 그 이유를 정리해보려 합니다. 프로젝트 기획 배경 쿠버네티스의 학습 난이도와 더불어 개인적으로는 쿠버네티스를 GUI로 지원하는 툴이 아직 많이 부족하다고 느꼈습니다. 또한 공식 쿠버네티스 대시보드와 lens 역시 리소스의 조회만을 지원하고, 생성은 불가능한 것으로 파악해 CRUD를 모두 지원하는 어플리케이션은 충분히 수요가 있을 것이라 생각했습니다. @kubernetes/client-node @kubernetes/client-node 라이브러리는 쿠버네티스에서 제공하는 공식 SDK로, 쿠..

자바스크립트 단에서 화면 사이즈를 기반으로 모바일 여부를 검사하는 useIsMobile 훅을 제작하고 있었습니다. import { useEffect, useState } from "react"; const useIsMobile = () => { const [isMobile, setIsMobile] = useState(false); const [screenWidth, setScreenWidth] = useState(0); const handleScreenResize = () => { setScreenWidth(window.innerWidth); screenWidth > 768 ? setIsMobile(false) : setIsMobile(true); }; useEffect(() => { handleScre..

TL;DR 1. 리액트에서는 중복되는 상태 업데이트를 배칭으로 처리하고 있다. 2. 기존에는 비동기 프로세스 안에서 발생하는 중복된 상태 업데이트에는 배칭을 적용하지 않았지만, 버전 18부터는 항상 배칭을 적용한다. 2013년 처음 세상에 등장한 리액트는 현재 최고의 전성기를 누리고 있고, 이제는 버전 18의 출시를 눈앞에 두고 있습니다. 버전 17에서는 내부적인 최적화 및 안정화에 초점을 맞춰 별다른 변화를 체감하지 못했지만, 현재 베타로 출시된 리액트 버전 18에서는 몇 가지 눈에 띄는 변경사항이 있는데요, 오늘은 그 중 automatic-batching 이라는 새로 추가된 성질을 소개해보려 합니다. 시작하기 전에 시작하기 전, 리액트 버전 18의 설정방법을 간단히 소개하고자 합니다. 1. 최신 버전..

지난 글에서는 리코일이 무엇인지와 리코일과 기존 상태관리 방법의 차이를 간단하게 소개했는데요, 이번 글에서는 실제로 동작하는 여러 앱에서 리코일을 사용해 상태를 관리해보겠습니다. 리코일 설치하기 CRA로 프로젝트를 구성했다고 가정하고, 리코일을 설치해 보겠습니다. // yarn yarn add recoil // npm npm i recoil 리덕스를 사용할 때는 redux, react-redux, 경우에 따라서는 redux-thunk, redux-saga까지 설치해야 했지만, 이제는 리코일만 설치하면 됩니다! 리코일 루트 컴포넌트 정의하기 리코일을 사용하기 이전, 리코일로 전역 상태를 관리할 범위를 컴포넌트로 감싸줍니다. Tip. 는 리덕스나 컨텍스트의 Provider와 같은 역할을 합니다. import..

지금까지는 jest 와 함께 평범한 자바스크립트 코드를 테스트해봤는데요, 이번에는 리액트 어플리케이션의 레이아웃 테스팅을 진행해보도록 하겠습니다. 테스팅 라이브러리 리액트 어플리케이션을 테스트할때는 주로 에어비앤비에서 만든 enzyme이나 react-testing-library(앞으로는 간단히 RTL이라 부르겠습니다.) 를 사용합니다. 둘의 차이로는 enzyme이 Implementation Driven Test(구현 주도 테스트) 라는 목표에 따라 어플리케이션이 내부적으로 어떻게 동작하는지에 초점을 맞췄다면, RTL은 Behavior Driven Test(행위 주도 테스트) 라는 목표 아래에서 실제 사용자의 행위와 사용자가 보는 화면을 테스트하는데 초점을 맞췄습니다. 두 테스팅 라이브러리 모두 장점이 있..