React 18 버전에서 컴포넌트별 lazy loading 을 구현하다 rabbit hole 에 빠져 허우적 댄 경험을 까먹지라도 않으려고 포스팅을 남긴다. 그 전에 race condition 이 뭔지 알아보고 가자 간단하게 말하면 두 개 이상의 스레드가 하나의 공유 자원에 접근해서 일어나는 상태 ( 또는 그로 인해 발생하는 버그 ) 라고 생각하자 더 쉽게 두 개 이상의 스레드 = 유저가 두개의 검색을 실행하면 fetch('your_url?example=예시') 이런게 두개 실행된다. 하나의 공유 자원 = fetch 로 받아온 data 로 뿌려지는 ui JS 가 두 개 이상의 스레드? 우리가 쓴 코드는 싱글 스레드로 실행되지만, 브라우저는 멀티 스테르도 작동한다. 버그가 발생하는 코드 예시 const S..

Nextjs 13 의 Demo 파일을 둘러보다 컴포넌트를 꽤 멋지게 재활용하는 방법이 있어 소개한다. 과정에서 type 지정을 하는 방법을 새롭게 알게되어 함께 공유한다. typeof 연산자는 객체 데이터를 객체 타입으로 변환시켜주는 연산자이다. 사용예시를 보며 이해해보자 svg 아이콘을 재사용 가능하도록 각각 함수로 만들어보자 svgProps 에는 className 이 들어올 예정이다. 아이콘을 불러올 index.tsx 를 만들어 주고 함수를 import 해오자 먼저 각 함수들을 components 객체에 담아준다. 객체에 typeof 를 사용하면 하나하나 지정할 필요 없이 객체에 쓰인 타입 구조를 그대로 가져와 독립된 타입 으로 만들어 사용이 가능하다. 추가로 keyof 를 사용하면 객체 형태로 된 ..

React 로 만들어진 페이지에서 게시판이나 카테고리의 글 등이 나타나기 전 "로딩중..." 또는 이미지로 progress bar 가 나타나는 경우가 존재한다. 데이터를 서버로 부터 받아오기 전 비어있는 페이지, 또는 데이터를 받아온 후 레이아웃이 변경되며 페이지가 전체적으로 덜컥거리는 현상을 React Suspension 로 감출 수 있다. 일반적으로 데이터를 불러와 component 에 뿌리고 싶을 때 일반적으로 아래와 같이 코드를 작성한다. const [work, loading] = fetch data('/work') if (loading) { return } return loading 변수에 지정된 값이 true 라면 로딩중을 나타내는 식으로 말이다. 이부분을 React 의 Suspense 로 최..