개발소발닭발

리코일로 비동기를 요청하면서 debounce 처리를 하고 싶은 경우가 있다.

가끔 숫자만 입력하는 기능을 구현하면서 input 타입을 type=number 로 처리하는 개발자들이 있는데, 이건 좋지 못하다. 이렇게 넣어주자. 직접 확인하고, 실무에도 적용한 사례니 마음 놓고 사용하면 된다. https://inputtypes.com/ Input Type Sandbox Input Type Sandbox is a front-end testing tool for form input types, validation patterns, onscreen keyboards and more! inputtypes.com

우리팀은 다양한 서비스를 개발하고 있는데, 과거에는 이 모든 서비스가 하나의 CRA 프로젝트 안에 있었다. 내자산, 결제내역, 후불결제, 신용점수, 대출 서비스 등등... 서비스가 늘어나고, 개별 서비스의 덩치도 커지게 되면서 각 서비스들은 독립을 결정 할 수 있게 되었다. 물론, 모든 서비스의 baseDomain은 유지해야 했기에 진입 nginx는 함께 사용하고 subPath로 라우팅을 걸었다. 독립 의사도 각 담당자의 자율이었고, 어떤 프레임워크를 사용할지도 자율이었다. 당연하게도 내가 담당하고 있는 대출 서비스도 독립을 결정하게 되었다. 레포를 새로 파고, 대출 서비스 특성상 서버 환경이 있으면 여러모로 편하기 때문에 nextjs 기반으로 구성했다. 그렇게 쿠버네티스 설정까지 끝내고 무사히 배포를 ..

NX 환경으로 마이그레이션하고, 세개의 서비스를 엮어내기

git branch --merged | egrep -v "(^\*|master|main|dev|epic)" | xargs git branch -d

1. 설치 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 2. 설치 brew install zsh 3. 설치 sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh) 4. ~/.zshrc ZSH_THEME="agnoster" prompt_context() { # Custom (Random emoji) git_emoji=("🎨" "⚡️" "🔥" "🐛" "✨" "🚨") RAND_EMOJI_N=$(( $RANDOM % ${#git_emoji[@]} + 1)) prompt_seg..

유용하게 사용하고 있는 확장 도구들을 소개합니다. Chrome Momentum ★★★☆ 크롬의 새 탭에 다양하고, 유용한 정보들을 보여준다. JSON View ★★ JSON 포맷터. Allow-CORS ★☆ CORS 문제로 요청이 안될 때, 이 녀석을 이용해보자. 그래도 안된다면, 서버 개발자에게 요청하자. VSCODE Prettier ★★★★★ 설명이 필요 없다. 최고의 포맷터. ESLint ★★★★★ 설명이 필요 없다. 최고의 분석 도구. Debugger for Chrome 설명이 필요 없다. vscode에서 브레이크 포인트를 걸 수 있는 디버깅 도구. GitLens ★★★★ Git을 사용한다면 무조건 설치하자. Git History를 에디터에서 바로바로 볼 수 있다. Local History ★★★..

자바스크립트가 발전하면서, FE의 덩치가 커지고 있다. 이전보다 성능 이슈가 발생하기 쉬워졌고, 발생하지 않도록 여러가지를 고려해가며 서비스개발을 해야 한다. 개인적으로 FE에서 서비스의 성능 향상을 위해 할 수 있는 것은 크게 다음과 같다고 생각한다. 필요한 시점에 필요한 만큼만 요청하는, 좋은 자원 요청 방법. 요청한 파일의 용량을 줄이자. 괜찮은 랜더링 로직. 물론 위와 같은 방법들이 무조건 맞는 것은 아니며, 상황에 맞게 적절히 사용하는 것이 중요하다. 우선 브라우저가 하나의 자원을 요청하고 받기까지의 과정을 살펴보면 다음과 같다. - Stalled Request 전 대기 시간으로 cors, 캐시 할당등의 작업을 한다. - DNS Lookup 도메인에 따라 IP를 찾는다. - 이후 동일 도메인으로..

브라우저의 세계에서 VSync가 어떻게 동작하고 있는지 알아보자.

Multiplexed Streams 하나의 TCP 커넥션으로 여러 개의 메시지를 주고받을 수 있습니다. Stream Prioritization 소스간의 의존관계를 설정할 수 있습니다. Server Push 클라이언트의 요청 없이 서버에서 리소스 푸시가 가능합니다. Header Compression 요청 시마다 매번 같은 정보를 헤더에 담지 않고 중복된 헤더는 index만 보내고 새로운 데이터만 인코딩하여 보낸다. 아래의 링크에서 http 1.1과 http 2.0의 성능을 비교해 볼 수 있다. 개발자 도구의 네트워크탭을 확인해 보면 1.1 에서는 요청이 큐에서 엄청나게 오랫동안 기다려지는 것을 알 수 있다. Stalled https://www.httpvshttps.com/ HTTP vs HTTPS Test..