🐸 테스트 코드가 왜 어려울까 그것은 테스트 코드를 써본적 없는 사람에겐 환경 설정이 지옥이기 때문이다. 진짜 한참 헤맸던 건데 테스트 코드를 입문하시는 분들이라면 비슷하게 헤매실 것 같습니다. 처음 jest를 설치하고 대충 a + b 테스트코드 짤때는 개쉬운데 컴포넌트 렌더링 해보는거에서 한번 지옥맛보고 비동기 테스트 하는거에서 두번 지옥맛을 본 뒤 테스트 코드를 손절하는.. 저도 그랬었는데요 심지어 리액트 쿼리 공식문서에서도 중요한 셋업을 전혀 가르쳐주질 않아서 한참 헤맸습니다. 테스트 진행 환경은 다음과 같습니다 next.js 13.5.3 / pages router jest ^29.7.0 msw ^1.3.2 @testing-library/jest-dom ^6.1.4 @testing-library/r..
폴더구조의 중요성 저는 개발 프로젝트에서 폴더의 구조를 정하는 것에 항상 고민을 깊게 하는 편입니다.. 체계적이고 잘 정돈된 폴더구조는 장기적으로 유지보수성과 코드생산성을 끌어올려준다고 믿기 때문인데요 가장 커다랗게 체감했던 것은 여러명이서 진행하는 프로젝트였던 PLIP 프로젝트의 폴더 구조를 기획하고 개발을 진행하던 과정에서 였는데요 짤막한 홍보를 하자면 배포 url은 다음과 같습니다. https://plip.netlify.app/ 코벤저스 파이탱~!!! plip.netlify.app 다음 사진은 이 당시 PLIP 프로젝트의 폴더구조를 만들때에 제가 생각하고 짰던 방식입니다. 그 당시에 저는 "같은 성격을 가진 파일은 한폴더에 모여있어야한다."라고 믿었습니다. 그래서 이 프로젝트의 폴더구조도 그와 같이..
Circle Progressbar란?이거 참 검색하기 난해한데요 PPT에 익숙한 분들이라면 원형차트로 인식할 수도 있고 저런 동그라미가 빙글빙글 돌아가는 로딩 스피너에 익숙한 분들은 circle progress bar라고도 인식할 수 있습니다. https://www.npmjs.com/package/react-circular-progressbar react-circular-progressbarA circular progress indicator component. Latest version: 2.1.0, last published: a year ago. Start using react-circular-progressbar in your project by running `npm i react-circula..
🦆 낙관적 업데이트란 무엇일까요? 영어로는 optimistic update 낙관적 업데이트는 UX 개선을 생각하는 프론트엔드 개발자라면 적용할 가치가 충분한 기법입니다. 낙관적 업데이트란 말그대로 낙관적인 관점으로 업데이트를 바라보는 것이라고 생각할 수 있습니다. 기본적으로 다른 서버에게 네트워크 요청을 보내는 행위는 수많은 잠재적인 위험을 내포합니다. 네트워크 요청이 성공할지 실패할지는 내가 작성한 코드가 얼마나 잘 작성되었는지와는 별개로 그 코드가 실행되는 환경 / 요청을 받는 서버의 환경에 전적으로 의존하게 되기 때문입니다. 나는 요청하는 코드를 잘 작성했지만 만약 인터넷이 되지 않는 환경이라면? -> 당연하게도 네트워크 요청은 실패합니다. 나는 요청하는 코드를 잘 작성했지만 요청을 받은 서버가 내..
framer motion이란? framer motion은 리액트 기반의 라이브러리로 애니메이션을 다루는 데에 큰 도움을 주는 라이브러리입니다. 여러가지 도움이 많이 되는 라이브러리이지만 가장 코어한 기능이 뭐냐라고 하면 저는 바로 리액트에서 구현하기 힘든 exit motion을 쉽게 구현할 수 있게 해주는 것이라고 생각합니다. 코드를 작성하다보면 무언가가 등장할 때 주는 애니메이션도 필요하지만 무언가가 사라질 때 주어야하는 애니메이션도 존재하기 마련인데 리액트에서는 이 사라지는 애니메이션을 구현해주기가 매우 까다롭습니다. 리액트 컴포넌트 트리에 존재하지 않는 돔 요소들과의 상호작용이 필요하기 때문인데요 framer motion은 향후 좀 더 깊이 다루어 볼 생각이지만 우선은 radix와의 통합 방법을 알..
매우 열받는 상황 '@radix-ui/react-slider' 라이브러리를 이용하던 중 일어난 일입니다. radix가 제공해주는 slider primitive를 이용하여 슬라이더를 구현하던 중 이런 상황을 마주했습니다. 굉장히 열받는 원이 생겨있는것을 확인할 수 있었는데요 이걸 대체 어떻게 지울 수 있을까 공식문서를 찾아봐도 전혀 안내가 없어서 절망했습니다만.. 자세하게 예제코드를 들여다보면서 내 코드에 빠진 게 뭘까 찾아본 결과 알아냈습니다. import React from 'react'; import * as Slider from '@radix-ui/react-slider'; const SliderDemo = () => ( ); export default SliderDemo; 슬라이더에서 제가 거슬리..
🐶 기존 시스템의 문제 기존 시스템의 경우 next.js의 pages router 내부에 컴포넌트 폴더가 존재하는 형태였습니다. next.js는 폴더/파일 기반 라우팅을 수행하기 때문에 pages, app과 같은 약속된 폴더명 내부에는 라우팅을 위한 파일들만 두는 것이 좋다고 생각합니다. 다만 이러한 라우팅을 회피하는 기법도 존재하는데요 예컨대 underbar를 폴더명에 붙여주는 것을 통하여 해당 파일, 폴더들이 라우팅되지 않아도 된다는 것을 알려줄 수 있습니다. 하지만 연픽의 기존 시스템은 컴포넌트들 역시 모두 페이지로 취급되어 빌드타임에 SSG 되고 있는 상태였으며 이는 건강한 구조가 아니라고 생각했습니다. 1. 파라미터 조작을 통해 외부인도 너무 쉽게 컴포넌트의 구현에 접근할 수 있습니다. 2. 개..
TypeScript의 interface 보강 Typescript에서 인터페이스는 "보강" 기법을 적용할 수 있습니다. interface Namnamman { eat: () => void } interface Namnamman { coding: () => void } const person:Namnamman = { eat: () => {}, coding: () => {} } 주로 보강기법은 이런식으로 표현되곤 합니다. 동일한 이름의 인터페이스를 같은 네임스페이스에서 여러번 선언하게되면 프로퍼티들이 말그대로 "보강" 되는 형식인것입니다. 이러한 보강기법은 Global 하게 적용해줄 수도 있습니다. 바로 declare 키워드를 이용하는 것인데요 index.d.ts export declare global { i..
