RSC, Suspense , concurrency mode, use, hydrate 등 최근 리액트의 변화 흐름은 제 머리로는 코어컨셉을 이해하기도 힘겹습니다. next.js 와 같은 프레임워크에서 RSC를 적극적으로 사용하고 있으니 아..그렇다.. 뭐.. 서버겠구나.. 하고 넘어가지만 그렇다고 RSC !== SSR 은 아니라는 말을 들으니 오히려 더 혼란스러워지는 이 기분.. 여러분도 아실까요? 아시겠죠... 네.. 🤯 RSC는?? react 18 버전부터 도입된 개념으로서 React Server Components 의 줄임말입니다. 서버에서만 렌더링 되어 전달되는 컴포넌트를 의미합니다. 리액트 서버 컴포넌트는 HTML 이 아닌 "특별한 형태로" 서버에서 렌더링 되어 클라이언트에게 전달됩니다. 이러한 ..
를 할 수 있습니다. https://basarat.gitbook.io/typescript/main-1/barrel Barrel - TypeScript Deep Dive Instead of exporting *, you can choose to export the module in a name. E.g., assume that baz.ts has functions: basarat.gitbook.io 타입스크립트 딥다이브에서도 확인할 수 있는 패턴인데 사실 유사한 형태로 관리해본 경험에서 이야기하자면 import 할 때는 행복한 대신 export 할 때 귀찮은 작업이 추가된다는 단점이 있습니다. 작성패턴은 아주 쉽습니다. 주로 내보내기 할 파일들이 모여있는 폴더내부에서 index.ts 파일을 생성해 준 뒤 ..
🎄사실 이건 정말 대답하기 힘든 질문이다. "리액트를 사용하는 이유는 무엇일까요?" 이 질문은 꽤나 대답하기 어렵습니다. 왜일까요? 이렇게 대답할 수도 있을 것 같습니다. 모두가 리액트를 쓰니까 저도 쓰는거죠!! 어...나도 그렇기는 한데.. 어떻게 보면 유명한 걸로 유명한 연예인같은 느낌이 들기도합니다. 물론 그럼에도 불구하고 리액트가 많은 사람들의 사랑을 받은 이유는 이야기할 수 있을 것입니다. 이번에는 그런 "그럼에도 불구하고"에 초점을 맞추어 왜 나는 리액트를 사용하는 시대에 살고 있을까? 라는 질문에 대한 답을 찾아보겠습니다. 리액트가 많은 사랑을 받을 수 있었던 요인을 알아보기 위해서는 리액트가 기존 웹의 어떤 문제를 해결했는지에 집중할 필요성이 있습니다. 리액트가 나오기 전인 2012년 이전..
ts환경 jest 안쓰는 import 에러 막기 우선 pathalias가 적용이 안되어서 에러가 나는 케이스는 이 링크로 이동해주세요 https://xionwcfm.tistory.com/375 이게 lint에러인지 jest가 기본적으로 안쓰는 import에 엄격한건지 고민이 많았는데 결론적으로는 타입스크립트의 tsconfig.json 파일의 설정 문제입니다. tsconfig.json "compilerOptions": { ... "noUnusedLocals": false, } 컴파일러 옵션에서 사용하지않는 locals에 대한 옵션을 false로 지정해주면 됩니다.
app라우터에서 pandacss를 바로? 이전 글에서는 왜 build time css - in -js 가 하입을 받고 있는지를 간단히 다루어보았는데요 이번에는 build type css - in js 프레임워크 중 하나인 panda css의 세팅을 해보도록 하겠습니다. panda css는 next.js , remix , gatby , nuxt , preact , solid.js 등 너무나도 다양한 프레임워크들을 지원해주며 그 방법 또한 공식문서에서 잘 가르쳐주고 있습니다. 심지어는 app router와의 통합 과정도 너무 잘 가르쳐주고 있는데요 공식문서를 잘 따라서 설치해보고 조금 문제가 생길 수 있는 부분들은 간단하게 고쳐보면서 panda css를 잘 세팅해보도록 하겠습니다. npx create-nex..
build time css는 왜 중요해졌는가?프론트엔드의 추세가 csr -> ssr의 흐름으로 가면서 수많은 서버사이드렌더링 프레임워크가 등장했습니다. next.js, nuxt.js sveltekit , remix 등등이 있지요 대표적인 프레임워크 중 하나인 next.js의 경우 'use client'를 사용한 컴포넌트에서만 리액트 훅과 이벤트 리스너를 사용할 수 있습니다. 이는 app router의 서버컴포넌트 동작이 리액트의 서버컴포넌트 기반으로 동작하기 때문인데요 이 서버컴포넌트는 간략하게 설명하면 서버에서 렌더링 과정이 이루어지며(HTML로 생성하는건 아닙니다.) Stream을 생성하여 점진적으로 클라이언트에게 스트림을 쏴줍니다. 이러한 동작방식은 기존 CSR의 패러다임과 비교했을 때 명확한 차이..
nest는 데코레이터를 적극적으로 활용하는 프레임워크입니다. 데코레이터를 적절히 사용하면 횡단 관심사(cross-cutting concern)을 분리하며 관점 지향 프로그래밍을 적용한 코드를 작성할 수 있는데요 다른 언어에 익숙하신 분들은 자바의 애너테이션, 파이썬의 데코레이터를 떠올려주셔도 됩니다. 타입스크립트에서 데코레이터는 클래스 , 메서드, 접근자, 프로퍼티, 매개변수에 적용이 가능하며 각 요소의 선언부 앞에 @로 시작하는 데코레이터를 선언하게되면 데코레이터로 구현된 코드를 함께 실행해줍니다. 이러한 데코레이터는 여러개의 데코레이터를 함께 사용하는 데코레이터 합성을 할 수 있습니다. 함수를 중첩해서 사용할 때와 비슷하게 생각을 할 수 있는데요 @f @g test 이러한 형태로 작성된 데코레이터 코..
😀어떻게 해야할까요? 간혹 그런 경우가 있습니다. get 요청을 특정 이벤트가 발생했을때만 보내는 기능이 필요할때가요! 그러나 reactquery의 useQuery는 기본적으로 호출한 시점에 바로 데이터 가져오기를 시도합니다. 따라서 이 기본 동작을 멈추고 사용자가 특정 행동을 하였을때에만 데이터를 페칭해오는 로직이 필요하기도 합니다. 그런데 useQuery는 바로 데이터가져오기를 시도하니까 특정한 경우에만 사용하려면 useMutation을 사용해야할까요? 그러려고 생각해보니 get 요청에 mutation을 사용하는 것이 이상하게 느껴집니다. 다행히 리액트쿼리는 이러한 유즈케이스를 적절한 옵션으로 지원하고 있습니다. https://tanstack.com/query/v4/docs/react/referenc..
👱♂️간헐적 회고 나오늘 뭐했냐 요즘은 이력서, 포트폴리오를 수정하는 나날이 계속 되고 있다. 대략 5일 정도가 된 것 같은데 굉장히 답답하다. 코드를 작성하고 싶은데 글만 적고 있으려니 답답하기도 하고 공부할 시간을 빼앗긴다는 생각이 많이 드는 것 같다. 글쓰기도 하나의 역량이고 자기자신을 잘 포장하는 것도 능력이라지만 정답 없는 글짓기를 계속 하고 있으려니 조금 스트레스를 받는 것 같다. 그와 별개로 윈도우 환경에서 슬슬 개발이 답답한 경우가 생기고 있어 맥북을 적극적으로 활용하고 싶다는 생각이 들어 맥용 모니터를 구매했다. 앞으로는 글쓰기 (키보드가 훨씬 편하다.) 마우스가 필요한 작업만 윈도우에서 진행하고 개발은 맥북으로 하지 않을까 싶다. 모니터는 주연 테크의 V28UE 제품을 쿠팡에서 구매하..
⛑주의!!! swiper 메이저버전이 10으로 올라갔습니다. (2023.07.31 기준) 메이저 버전이 10으로 올라감에 따라 아래 제 포스트를 따라했을 때 잘 동작하지 않을 수 있습니다. 본 포스트의 swiper 버전은 ^9.3.2 입니다 😙라이브러리의 도움을 받아 캐러셀 구현하기 캐러셀 같은 경우 처음 코딩을 시작했을 때 구현을 시도했던 기능인데 그당시에는 자바스크립트만 이용해서 이래저래 구글링하면서 해결했던 기억이 납니다. 지금 간단히 기억나는 느낌으로는 overflow되는 것들을 보이지않게 처리하고 일정주기 혹은 클릭이벤트가 발생할때마다 보여지는 이미지의 위치를 전환하는 식으로 구현했던 것 같습니다. 다만 이번 프로젝트에서 필요로하는 캐러셀은 요구되는 기능이 많았습니다. 따라서 이 기능들을 하나하..
