외개인 프로젝트

모바일 하단 네비게이션바와 글쓰기 버튼 고정에 관한 이야기

create-react-app으로 제작한 프로젝트에서 jest, react testing library를 이용하여 테스트 코드 작성해보기

문제 상황 jest와 react testing library, msw를 사용하여 테스트 코드를 작성하는 과정에서 "TextEncoder is not defined"라는 에러가 발생하였다. 이는 msw 2.x.x 버전으로 업그레이드 하면서 발생하는 에러로, 공식 홈페이

문제 상황 앞서 포스팅에서 봤듯이, react 환경에서 vitest 테스트 라이브러리를 도입하여 테스트 코드를 작성하였다. 이제는 msw를 이용하여 api를 백엔드 없이 모킹을 이용하여 테스트하는 방법을 작성해보겠다. MSW

로그인 상태를 유지하기 위해 API 요청시 항상 토큰을 헤더에 실어보내면서 사용자 인증을 진행한다. 이를 Axios Interceptor를 이용하여 로직을 구현해보았다.

이번 외개인 프로젝트를 진행하면서 로그인 기능을 처음 개발해보았다. 여러 클라이언트 인증 방식이 존재하지만 우린 그 중에서 JWT 토큰 인증방식을 이용하여 로그인 기능을 구현하였다.

App.js안에 무분별하게 존재하던 수많은 라우팅 설정 코드를 분리시켜 가독성 높이기

Protected Route를 설정하여 인증된 유저만 페이지를 이용할 수 있도록 접근을 제한

외개인 서비스는 우리 학교 전용 서비스이기 때문에, 학교 구글 계정으로 로그인 인증을 하기로 결정했다. 이번 포스팅에서는 프론트엔드 측면에서 Google OAuth 2.0 기능을 사용하는 방법과 그 과정에 대해 상세히 다뤄보겠다.

카카오톡 메시지 공유하기 API를 이용하여 프로필을 카카오톡으로 공유하는 기능 개발