잘알자

Kakao Social Login더보기- SupabaseDashboard에서 프로젝트 선택 (기존 프로젝트가 없을 경우에는 프로젝트 생성 후 진행) 사이드바 메뉴 -> Authentication -> Providers 목록에서 Kakao 선택 -> Kakao enabled 토글 활성화 - Kakao Developers Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com 위 링크 입장 -> 시작하기 -> 프로젝트 선택 (프로젝트가 없을 경우에는 New Project로 새 프로젝트 생성) REST API 키를 복사해서 Supabase의 REST API Ke..

Zustand 란?더보기- Zustand 란?React 애플리케이션에서 상태 관리를 간단하고 효율적으로 처리할 수 있도록 설계된 상태 관리 라이브러리이다.Zustand 설치 & 사용더보기- Zustand 설치yarn add zustand - Zustand 사용Store 생성Store는 애플리케이션의 상태(state)를 중앙에서 관리하고, 별도의 props 과정이 없어도 상태를 읽거나 수정할 수 있는 기능을 제공한다.zustand에서 제공하는 create 함수를 사용해 store를 생성하고, set 함수를 사용해 현재 상태를 변경할 수 있다.import { create } from "zustand";interface Actions { increment: () => void; decrement: () =..

CI / CD 란?더보기- CI / CD 란?CI/CD는 Continuous Integration (지속적인 통합)과 Continuous Delivery (지속적인 제공), 또는 Continuous Deployment (지속적인 배포)를 의미하는 용어로, 애플리케이션 개발과 배포 프로세스를 자동화하는 방법론이다.CI/CD는 개발자의 코드 변경 사항이 주기적으로 통합되고, 자동화된 테스트 및 배포 과정이 실행되는 방식으로, 이를 통해 개발 속도를 높이고, 품질을 유지하며, 효율성을 개선할 수 있다는 장점을 가지고 있다. - Continuous Integration개발자들은 본인 코드의 변경사항을 main repository에 주기적으로 빈번하게 merge 해야한다.주기적으로 merge 된 코드의 변경사항이..

MSW 란?더보기-  MSW 란?서비스 워커(Service Worker) 기술을 활용하여 네트워크 레벨에서 API 요청을 가로채고 모킹(mocking)할 수 있는 라이브러리이다.주로 프론트엔드 개발에서, 외부 API와의 통신을 테스트하거나 개발 중에 실제 API 호출을 대체하기 위해 사용된다.실제 서버와의 상호작용 없이 API 요청을 모킹할 수 있어, 네트워크 요청을 테스트하거나 개발 환경에서 서버에 의존하지 않고 작업할 수 있다는 장점을 가지고 있다.MSW 설치더보기- MSW 설치yarn add -D msw - public 폴더에 Service Worker 등록yarn msw init public/ --save - 전체 폴더 및 파일 구조 - handler.js 생성Mocking할 API를 핸들링할..

React Testing Library란?더보기- 사용자 중심 테스트 지향RTL은 컴포넌트의 구현 방식보다는 UI 요소를 렌더링하고, 사용자가 상호작용하는 방식에 중점을 둬서 테스트를 진행한다.즉, 버튼 클릭, 텍스트 입력, 요소의 표시 여부 등을 테스트할 때 사용한다. - DOM 상호작용 테스트RTL은 querySelector와 같은 DOM 메서드를 사용하여 컴포넌트 내의 요소를 선택하고 상호작용할 수 있게 해준다.예를 들어, getByText, getByRole, getByLabelText 등 다양한 쿼리 메서드를 제공하여, 실제 화면에서 표시되는 텍스트나 역할 기반으로 요소를 찾을 수 있다. - 어울리는 기술 스택RTL은 React 컴포넌트의 사용자 상호작용을 테스트하는 도구이고, Jest는 테스..

BDD (Behavior-Driven Development) 란?더보기- BDD 란?구현에 중점을 두기보다는 동작에 중점을 두는 테스트 개발 방식이다.사용자가 원하는 결과를 정확히 표현하는것이 목적이다.테스트는 개발자와 비즈니스 이해 관계자 모두가 읽을 수 있게 작성한다.React 테스트는 주로 BDD 방식으로 진행한다.React + Vite + TypeScript 프로젝트 생성더보기- Vite 프로젝트 생성yarn create vite - 프로젝트 이름 입력 - React 선택 - TypeScript + SWC 선택SWC (Speedy Web Compiler) : JavaScript 코드 중 ES6 이상으로 작성된 최신 문법을 ES5로 트랜스파일 하거나, TypeScript 코드를 JavaScript ..

Jest-extended란?더보기- Jest-extended란?jest-extended는 Jest에서 사용할 수 있는 추가적인 matcher들을 제공하는 확장 라이브러리입니다.Jest에서 기본적으로 제공하는 matcher(toBe, toEqual, toContain 등) 외에도 다양한 상황에서 유용한 matcher들을 추가로 사용할 수 있게 해줍니다.jest-extended를 사용하면 테스트의 가독성과 표현력을 높일 수 있습니다.Jest-extended 설치 (TypeScript 사용)더보기- jest-extended 설치yarn add -D jest-extended - global.d.ts 파일 생성 - global.d.ts 파일 설정import 'jest-extended'; - tsconfig.jso..

Jest 란?더보기- Jest 란?Jest는 Facebook에서 개발한 JavaScript 테스트 프레임워크로, React를 포함한 다양한 JavaScript 애플리케이션의 유닛 테스트와 통합 테스트를 쉽게 작성하고 실행할 수 있도록 도와줍니다.Jest 설치더보기- Jest 설치yarn add -D jest테스트 코드가 들어갈 파일명 작성 하는법더보기- test 또는 spec을 중간에 넣어서 파일명 작성 - test, spec이 아닌 다른 파일명으로 작성하고 싶은 경우jest.config.init 파일에서 textRegex 속성 변경default value : (/__tests__/.*|(\\.|/)(test|spec))\\.[jt]sx?$새로운 값 추가 : (/__tests__/.*|(\\.|/)(te..