개발 지식 저장소
1.MSW로 Mocking 하기
mock이란 가짜의라는 뜻으로 프로그래밍에서 mocking은 실제 객체를 제대로 구현하기 어려운 경우에 가짜 객체를 만들어 사용하는 것을 말한다.프론트엔드에서 서버가 구현되기 전에 요청/응답이 필요한 경우 mocking을 통해 제대로 구현이 되는지 확인할 수 있다.서버
2.[React] 에러 바운더리(Error Boundary)
에러 바운더리는 하위 컴포넌트 트리의 어디에서든 자바스크립트 에러를 기록하며 깨진 컴포넌트 트리 대신 폴백 UI를 보여주는 React 컴포넌트로 에러 경계는 렌더링 도중 생명주기 메서드 및 그 아래에 있는 전체 트리에서 에러를 잡아낸다.(React 공식문서 https&
3.로컬 호스트 서버 배포하기 (ngrok, localtunnel)
개발을 하다보면 다른 환경에서 테스트가 필요한 경우가 있다. 다른 운영체제나 브라우저에서 기능이 정상적으로 작동하는지, 모바일 환경에서 반응형 웹페이지가 의도한 대로 보여지는지를 확인할 때 개발 서버 배포가 구현되어 있지 않은 경우 실제 환경에서 테스트가 불가능하다.개
4.Polyfill과 Transpile
폴리필은 브라우저에서 지원하지 않는 코드를 사용 가능한 코드 조각이나 플러그인으로 변환한 코드를 의미한다. 하위 브라우저가 지원하는 자바스크립트 코드를 사용해 자바스크립트의 최신 기능을 똑같이 구현하는 방식이다.자바스크립트는 각 버전별로 지원하는 메소드가 상이하고 브라
5.[React] Suspense란?
Suspense는 아직 렌더링이 준비되지 않은 컴포넌트가 있을때 로딩 화면을 보여주고 로딩이 완료되면 해당 컴포넌트를 보여주는 React에 내장되어 있는 기능이다.리액트 공식문서(https://ko.reactjs.org/docs/react-api.htmlSPA
6.GitHub Actions에서 Docker 이미지 빌드 최적화하기(Nextjs)
현재 다니는 회사 프로젝트들의 특성상 배포 주기가 굉장히 짧기 때문에 CD가 구현되어 있더라도 매번 빌드하고 배포까지 걸리는 시간을 합치면 상당했고 기다리는 시간을 줄이려고 찾아보다가 적용한 방법을 정리해보려고 한다.1\. 깃헙 브랜치 push2\. GitHub Act
7.Webhooks 기능을 활용한 협업 툴 연동(Github, Slack, Asana)
최근 회사에서 사용하는 메신저와 프로젝트 관리 도구가 Slack과 Asana로 바뀌게 되었다. 이전에 사용했던 메신저에는 봇을 지원하지 않아서 알림을 보내주는 기능을 구현할 수 없었는데 Slack으로 바뀌게 되면서 반복되는 업무를 자동화 시켜보기로 했다.Webhook이