fetch를 사용했던 이유와 오류 상황 개발 초창기, 나는 HTTP 통신을 할 때 주로 fetch 함수를 사용했다. 그 이유는 간단하다. fetch는 자바스크립트의 내장 API였으므로 별도의 라이브러리를 설치하지 않아도 됐다. 또한, 기본적인 기능을 제공하면서 사용법이 직관적이어서 쉽게 배울 수 있었다. 그러나 최근 프로젝트에서 오류 상황을 겪고, 그 문제가 fetch의 오류 처리 방식 때문이라는 걸 깨달았다. 네트워크 오류만 catch하는 fetch와 달리, axios는 HTTP 오류 상태 코드를 자동으로 catch해준다. 이 경험으로 인해, 앞으로는 axios를 사용하기로 했다. 그렇다고 fetch가 나쁜 것은 아니다. 단지, 각 도구는 상황에 따라 장단점이 있을 뿐이다. 이 포스팅에서는 fetch와..

구현목표 - 기존에는 사용자가 수동으로 관심학과와 개설대학을 입력해야 했던 반면, 개선된 인터페이스에서는 사용자가 관심학과를 선택하면 해당 학과를 개설한 대학의 정보를 API를 통해 자동으로 가져올 수 있도록 기능을 개선해야 했다. 백엔드 api는 수정을 할 수 없는 상황이였고, 대신 교과정보에 대한 api와 대학교정보에 대한 api가 있었다. 우선 원활한 데이터전달을 위해 이 두개의 api를 부모컴포넌트로 이동한 후, 자식컴포넌트로 props로 전달해주기로했다. //부모컴포넌트 const [collegeList, setCollegeList] = useState([]); const [majorData, setMajorData] = useState(); const getMajorData = useCallb..

React에서 컴포넌트가 재랜더링될 때, 그 컴포넌트 내에 정의된 모든 함수들은 새로 생성됩니다. 특히, 부모 컴포넌트에서 정의된 함수가 자식 컴포넌트로 props로 전달될 때, 부모 컴포넌트가 재렌더링되면 해당 함수는 새로운 참조를 가지게 됩니다. 그러면 자식 컴포넌트는 props가 변경되었다고 인식하여 불필요한 재랜더링을 하게 됩니다. 이러한 문제는 자바스크립트의 함수가 클로저(closure)라는 특성 때문에 발생하는데, 클로저는 함수가 생성된 시점의 환경을 '기억' 합니다. 이 문제를 해결하기 위해 react에서는 useCallback이라는 Hook을 사용합니다. useCallback을 사용하면 useCallback 첫번째 인자로 전달된 함수를 메모이제이션(저장)하고, A 컴포넌트가 재렌더링될 때마..

API를 사용하다 보면, 필요한 부분만 추출하거나 가공해야 하는 경우가 종종 발생합니다. 이번엔 월별 데이터와 학기별 데이터를 가져와 1학기, 2학기, 학기별 총계와 전체 총 합계를 계산하는 기능을 만들어보겠습니다. 배열 메소드를 사용한 데이터 처리 제가 주로 사용하는 방법으로는 필요한 데이터만 추출하기 위해 API에서 데이터를 받아오는 함수에서 배열 메소드를 사용하는 방법입니다. 처음에는 API로부터 데이터를 받아올 때, 원하는 데이터 키 값만 추출하여 가져오면 데이터 처리 속도가 빨라지지 않을까 생각했습니다. 하지만, RESTful API를 사용할 때 데이터 처리 속도는 크게 달라지지 않습니다. 서버(백엔드)에서 데이터를 클라이언트에 전달하기 전 이미 필터링 및 가공이 완료된 상태로 전달되기 때문입니..

먼저 인증과 인가의 개념을 이해해봅시다. 인증(Authentication)은 사용자가 누구인지 확인하는 과정입니다. 로그인 과정에서 이메일 주소와 비밀번호를 통해 사용자를 확인하는 것이 인증입니다. 인가(Authorization)는 인증된 사용자에게 특정 리소스에 대한 접근 권한을 부여하는 과정입니다. 예를 들어, 웹 페이지에 대한 읽기, 쓰기, 수정, 삭제 권한을 관리하는 것입니다. 인증 및 인가는 로그인 및 회원 가입 외에도 사용자의 권한을 관리하는 데 사용됩니다. 예를 들어, 웹사이트에서 관리자와 일반 사용자의 권한을 구분하여 관리하는 것도 인증 및 인가의 영역입니다. Auth0과 OAuth 2.0 소개 Auth0은 인증 및 인가를 손쉽게 구현할 수 있는 서비스(라이브러리 개념)이며, 그 안에는 다..