React

MSW(Mock Service Worker)는 개발 및 테스트 환경에서 실제 서버와의 API 요청을 모킹 할 수 있는 아주 강력한 도구입니다.백엔드 서버가 아직 준비되지 않았거나, API 응답에 의존하지 않고 프론트엔드 작업을 진행하고 싶을 때 MSW는 큰 도움이 됩니다.MSW는 클라이언트(브라우저)와 Node.js 환경에서도 사용할 수 있어 매우 유연하게 활용할 수 있어요.  왜 MSW를 선택했을까요?저희 마일리지 서비스 팀은 총 3명, 프론트엔드 1명과 백엔드 2명이 함께하는 작은 팀이었어요.특히, 백엔드 팀원들이 처음으로 백엔드 개발을 시작한 학생들이다 보니 API가 완성되기 전에 프론트엔드 작업을 병렬로 진행할 필요가 있었습니다. 하지만 API가 아직 구현되지 않은 상황에서 프론트엔드에서는 어떻게..

CSS 및 CSS-in-JS 코드의 일관성을 유지하고 자동으로 정렬하기 위해 stylelint를 설정하는 과정을 진행하던 중 작성되었습니다. 협업을 통해 코드를 짜다보면 팀 내 코드 스타일을 통일하는 과정이 중요하다. 그래서 주로 pretteir 나 lint를 사용하는데 stylelint 도 그중 하나로 팀 내 코드 스타일을 통일하고 코드 품질을 높이는 데 도움을 준다. 1. Stylelint란? Stylelint는 스타일시트(CSS, SCSS, CSS-in-JS 등)를 분석하고 오류를 찾아내는 린터(Linter)이다. 이를 사용해서 코드 품질을 유지하고 코드 스타일을 통일할 수 있다. 제공하는 주요 기능:문법 검사: CSS 및 SCSS, CSS-in-JS에서 발생할 수 있는 문법 오류를 자동으로 찾기...

리액트 딥 다이브 정리 스터디 **Tanstack-Query의 QueryClient와 캐싱** 정리  설치 방법npm i @tanstack/react-query+) 여담으로 이전에는 그냥 react-query 였다. 이후 리액트 이상으로 사용 가능하게 업데이트 되며 이름이 변경되었다. (뷰, 넥스트…)세팅 방법앱의 최상위에서 QueryClientProvider로 앱을 감싸주기새로운 QueryClient인스턴스를 생성한 후, QueryClientProvider를 통해 앱 전체에서 생성한 QueryClient에 접근 가능하도록 해준다.import { QueryClient, QueryClientProvider } from '@tanstack/react-query';...const queryClient = ne..

내가 헷갈려서 정리하는 자바스크립트 네이밍 규칙들...~!   PascalCase (파스칼 케이스)각 단어의 모든 첫 글자는 대문자로 작성하는 표기법e.g. ) CardType, UserService, PaymentInterface사용 케이스생성자 함수, 클래스, 인터페이스 등의 이름을 작성할 때 사용한다.camelCase (카멜 케이스)첫 단어는 소문자로 시작하고, 이후의 각 단어는 대문자로 작성하는 표기법e.g. ) myVariable, calculateInterestRate(), getUserDetails()사용 케이스 변수나 함수, 메서드 등의 이름을 작성할 때 사용한다.kebab-case (케밥 케이스)모든 단어를 소문자로 작성하고, 단어 사이를 하이픈(-)으로 구분하여 작성하는 표기법예) us..