모도코

Zustand에 대하여 공부하기 앞서, 왜 Zustand인지 알아보도록 하겠다. 우선, Zustand vs Recoil vs Jotai vs Redux vs Context API 등 전역상태관리에 대해 여러가지 방법들이 존재한다. 그중에 Zustand를 택한건 크게 두

프로젝트를 진행하다보니, Font를 설정해야 되는데, 일반적으로 App.css를 사용하는 방식이 아니라, Styled-Component를 사용했기에 조금 더 복잡했다.font는 OpenSource 나 원하는곳에서 잘 다운 받으면 된다. 나는 눈누라는 폰트 저장소를 애용

좌우 스크롤은 직접 구현해도 되지만, 누군가 이쁜 library를 만들어 두었길래, 바로 사용하였다.공식 페이지나 깃허브에 상세하게 설명이 있으니, 참고해도 좋아보임공식 페이지깃허브(https://github.com/asmyshlyaev177/react-hor

프로젝트를 진행중에, 이러한 시안이 날라왔다. 대충 볼륨을 컨트롤 할 수 있는 Slider를 제작하는 것.우선 여러가지 선택사항이 있는데, material UI를 사용하여, 간단하고 이쁜 슬라이더를 가져다 쓰는것, 아니면 직접 구현이 있었다.우선 라이브러리를 쓰는것 보

사실 커스텀 드랍다운은 옛날부터 만들고 싶었지만, 시간 투자 대비 사소한 디자인이여서 그냥 기본 custom selector나 mui를 주로 사용했었다.그러다 이제는 더이상 미룰 수 없기에 커스텀 드랍다운 제작에 나섰다.우선 이번 드랍다운의 기능은 다음과 같다.드랍다운

현재 만들고 있는 프로제긑는 디스코드와 게더타운과 유사한, 실시간 통신이 들어간 웹 플랫폼이다. 이런 유사한 프로젝트에 필수적으로 들어가야 되는 요소는 오디오의 제어이다.말을 하다가 마이크를 바꿔야 되는 상황이 된다면?음질이 좋지 않다고 해서, 이어폰을 꼈을 때, 소리

이번에는 모킹 없이 간단하게 DOM관련 테스트만 진행할 예정이다. 모킹 관련은 다음 포스트에서 다룰 예정.여러 테스트 예시들을 보면, 한 jest.it 함수 에서 render를 여러번 하는것을 손쉽게 볼 수 있다. 그렇게 나도 유사하게 해보며 익혀보았다.describe

현재 진행중인 웹 플랫폼에서는 실시간 통신, 즉 음성 및 비디오가 필수적으로 들어가며, 오디오가 잘 나오는지 확인할 수 있는 오디오 비주얼라이저 또한 필수적으로 들어가게 되었다.처음에 이걸 구현하기에는 다소 어려움이 있었는데, 우선 reference도 많이 없어 힘들었

환경: React, typescript, styled-components사실 테스트를 진행해야 되는이유는 정말 셀 수 없이 많다.개발 과정에서 문제가 생겼을 때 바로 눈치 챌 수 있디리팩토링을 믿고 할 수 있다바로 코드의 동작 상태를 확인할 수 있다테스트 코드를 만들기

우리 서비스에는 new-relic 이라는 APM이 연동되어 있다. 하지만 사용법이 너무 복잡하고 어려워서 잘 사용하고 있지는 않고 있는데, 마침 쓸 상황이 왔다.스크린샷 2022-10-09 오후 9 32 55스크린샷 2022-10-09 오후