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

Nextjs 13 의 app router 에서는 server component 와 client component 를 각각 따로 지원하는데 만약 간단한 Data fetching 만이 목적이라면 굳이 React-Query 를 사용하지 않는게 좋다고 생각한다. 그런데 React-Query의 기능들을 몇가지 접하다보니 인기가 있는 이유를 새삼 깨닫는 중이다 그중 React-Query 의 가장 기본이라 볼 수 있는 useQuery 에 대해 특히 그 옵션들에 대해 깊게 파헤쳐보자 기본세팅은 남자답게 알아서 했다는 전제하에 설명하므로 provider 로 감싸는 정도는 하고 읽기를 바랍니다 공식문서를 보면 useQuery 에 required 가 붙어있는 두가지 옵션이 있다. 두개 옵션은 무조건 쓰라는 말인데. 1. q..

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

프로젝트 시작 전 회사에서 사용중인 컴퓨터의 성능 향상을 위해 디스크 공간과 메모리를 업그레이드를 진행했다. M1 mac 이 나온 시점부터 개발을 시작했던 터라 mac 위주로 개발을 하다보니 window 본체를 뜯어 부품을 갈아 업그레이드를 진행한 것은 처음이었다. RAM이야 갈아 끼우고 확인만 해주면 자동으로 적용되기 때문에 다루지는 않겠다 ( 대신 메인모드에서 지원하는 최대 RAM 을 조사 후에 업그레이드 하는걸 추천한다 ) 내 메인보드는 H410M-A PRO ( MS-7C89 ) 에 SSD 는 마이그레이션 툴을 지원해주는 삼성의 PM9A1 M.2 NVMe 1TB 를 선택했다. 본체 전원을 종료 한 후 m.2 포트에 SSD 카드를 잘 꼽아준 후 컴퓨터를 실행하면 내컴퓨터에서 SSD 카드가 적용된 것을..

생활코딩의 NEXT.js 13 강의를 듣다 data 를 caching 하는 부분에서 공식문서를 읽다 Headless CMS 의 의미에 대해 다시한번 학습해야 할 필요성을 느껴 알아보게 되었다 Headless 를 직역하면 머리가 없다는 비유적인 표현이다. 웹사이트를 구성할때 반드시 데이터가 필요한데, Head 는 데이터를 보여줄 수 있는 수단 ( web, ios ,android .. ) 이고 Body 는 컨텐츠를 의미한다. 여기서 유추할 수 있듯 Headless 는 데이터를 보여줄 수 있는 수단을 유동적으로 바꿔끼울 수 있다는 것을 의미한다. 요약하면 데이터와 View 를 분리하는것이 핵심이다. 흔히들 알고있는 Restful API 로 컨텐츠에 접근, 수정해 사용한다. 기존의 방식의 CMS 는 하나의 서비..

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