FootballProject
1.프로젝트 준비
지금까지 프로젝트를 시작하기 전, Eslint와 Prettier을 설치하지 않고 코드를 작성했다. 프로젝트 규모가 커질 수록 협업을 위해 코딩을 하는데 한번에 알아보기 쉬운 코드를 짜야 하며, 협업하는 팀원들끼리 문법 규칙도 맞추어야 한다고 생각이 들었다. 아쉽게도 이
2.CRA, Eslint, Prettier로 React typescript 프로젝트 시작하기
개발에 들어가기 앞서 Eslint와 Prettier을 통해 코드 작성 스타일을 유지하고 대부분 개발자들이 사용하는 문법 규칙을 적용 하려고 한다. 개발하는데에 IDE는 VScode을 사용했으며 IDE에서의 Eslint와 Prettier 패키시 설치는 되어 있다는 가정하
3.React에서 Firebase을 통해 Google oauth구현하기
OAuth란 서비스에 로그인 할 때 다른 서비스의 로그인을 이용해 본 서비스에 로그인 하는 방식이다. 예를 들어, 사용자가 본 프로젝트에 로그인 하기 위해서는 Google login 버튼을 클릭해 구글계정으로 로그인 하지만 본 프로젝트에도 로그인 되는 기능이다. (소셜
4.Context API을 사용해 컴포넌트 데이터 공유하기
프로젝트를 진행 하면서 컴포넌트들 간에 데이터를 공유해야 할 상황이 발생했다. Context API에 대해서 설명하는 글이나 공식문서도 이미 여럿 존재하기 때문에 본 글에서는 Context API을 사용하게된 계기와 간단한 사용법을 남기려고 한다.context를 이용하
5.Redux-toolkit으로 State 관리하기
React에서 사용되는 State Management Library 중 하나이다. React 에서는 상태관리를 props, state로 하기 때문에 규모가 큰 프로젝트일 수록 상태관리 라이브러리를 필수로 사용해야 하는 것으로 알고있다. 단순한 글로벌 상태 관리를 위한
6.Axios의 Interceptors을 통해 사전처리 및 Error Handling 하기
브라우저와 node.js에서 사용할 수 있는 HTTP 클라이언트 라이브러리.이번 프로젝트에서 서버와 데이터를 주고 받기 위해 axios 라이브러리를 사용했다. Web API인 fetch 보다 익숙했으며 유용한 API들이 많아 사용하게 되었다. 이전에도 axios을 사용