체유의 IT일지

Fetch와 axios는 모두 promise 기반의 HTTP 통신 라이브러리 Axios Node.js와 브라우저를 위한 라이브러리 모듈 설치 후 import 필요 import axios from "axios"; Fetch ES6에 들어온 JavaScript 내장 라이브러리 별도로 import할 필요가 없음 Axios vs Fetch 1. 요청문법 fetch는 두 개의 인자를 받는데, 첫 번째 인자는 리소스 url, 두 번째 인자는 요청의 설정 옵션 설정 옵션의 기본값은 GET 요청 fetch(url, { method: "GET", headers: { "Content-Type": "application/json", }, body: JSON.stringify({}), }); axios는 Fetch와 유사하게..

개발을 한 후에 미처 예상하지 못한 에러가 발생할 경우 '터진다'라 표현을 한다고 한다. 소프트웨어는 가변적이고 불규칙적이라서 100% 완벽하게 코드를 짰다고 해도 브라우저나 사용자의 접속환경에 따라서 에러가 나타날 수도 있다. 예측이 불가능하기 때문에 예상 못한 에러에 대해서도 처리를 해주어야 한다. 70%의 완벽한 코드와 30%의 에러 처리로 나누어진다고 한다. Error Boundary Error Boundary는 리액트에서 효과적으로 에러 처리를 할 수 있는 방법으로 React 16에서 도입된 개념이다. 에러가 발생하면서 유저는 화면이 멈추게 되거나 다른 동작들을 할 수가 없게 되는데 이는 UX 측면에서 굉장한 마이너스적 요소이다. 에러로 인해 컴포넌트가 실행되지 않는 경우들을 위해 다른 컴포넌트..

프로젝트 중간중간 마다 코치님께 코드 리뷰를 받는 시간이 있다. 내가 건드린 코드들이 많아서 그만큼 피드백을 받은 부분도 많았는데, 상당수가 useMemo와 useCallback과 관련한 코드였다. 직접 useMemo 코드를 사용해 전과 후를 비교해봤던 것들을 기록해본다. useMemo() useMemo()는 리액트의 훅 중 하나로, 컴포넌트의 성능을 최적화하는데 사용된다. memo는 우리가 익히 알고 있는 '메모하다'의 의미를 가지고 있는데 즉 '메모리에 넣는다'는 것을 의미한다. 컴퓨터가 동일한 계산을 반복해서 수행을 해야할 때 이전에 계산한 값을 메모리에 저장해서 동일한 계산의 반복 수행을 제거하도록 하는 Hook이다. 반복 계산을 줄이기 때문에 실행 속도가 빨라지며 불필요한 렌더링을 방지할 수 있..

프론트: React, 백: Node.js 백에서 쿠키에 JWT토큰을 담아서 전송해주고 페이지를 이동할 때마다 프론트에서 api 요청을 하면 헤더에 있는 쿠키로 백에서는 사용자 인증을 처리하고 응답을 보내주는 방식으로 프로젝트를 진행했다. 이 부분까지는 1차 프로젝트에서도 동일하게 진행했던 방식이라서 이해를 하고 있었고 1차 프로젝트 때는 백을 맡았고 지금 2차 프로젝트에서는 프론트를 맡게되어 백으로 어떻게 요청을 하는지 몰라서 한참을 헤멨다. 찾아보는 곳마다 너무 다양하고, 잘 모르다보니 프론트에서도 쿠키를 또 생성할 뻔 했다...ㅎ 그렇게 2시간 넘게 헤메다가 해결... 생각의 흐름 첫 번째, 브라우저에 쿠키가 저장이 되기 때문에 프론트에서 쿠키를 긁어와서 백으로 api 요청을 보..

2차 프로젝트에서 달력을 만들어보고자 했다. 코치님께서는 직접 만들어보는 것도 좋은 경험이 될 것이라고 해주셨는데 프로젝트 기간이 정해져있다보니 시간이 얼마나 걸릴지 몰라서 우선은 라이브러리를 사용했다 직접 달력을 만들어보는 작업은 나중에...! FullCalender 라이브러리를 사용해서 캘린더를 만들어보았다 이미지 넣기 주말에 색 넣기 날짜 포맷 이미지 클릭하면 값 변경 다른 달로 넘어갔다가 today 버튼을 누르면 오늘 날짜의 값으로 변경하기 비어있는 날짜 클릭해도 값 띄우기 1. FullCalender 라이브러리 설치 FullCalender 라이브러리 사용을 위해서는 npm으로 설치가 필요하다. 가장 많이 사용되는 react, daygrid만을 설치했다. npm install -..

프로젝트에서 프로필 사진을 변경할 때, 이미지를 미리보기로 띄울 수 있도록 구현하고자 했다. 미리보기로 띄울 수 있는 방식으로 FileReader와 createObjectURL 방식 두 가지를 알게되었다. FileReader를 흔히 들어서 처음엔 당연하게 FileReader를 사용해서 구현했지만, 두 방식을 비교하는 글을 보게되었고 실제로 테스트도 해보면서 두 방식 간에 차이가 있어서 남겨보고자 한다. FileReader 파일 이미지를 업로드 한 후, 미리보기로 보여줄 수 있는 FileReader 객체가 있다. FileReader 객체는 file이나 blob 객체가 저장하고 있는 데이터를 웹 애플리케이션에서 '비동기적'으로 읽는 객체로, 파일 내용을 읽고 사용자의 컴퓨터에 저장하도록 해준다. FileRe..

useRef ref는 reference로 '참조'를 뜻 js를 사용할 때 특정 DOM을 선택하기 위해 querySelector나 getElementById 등의 함수를 사용한다. 리액트에서도 DOM을 직접 선택해야하는 상황이 필요한데 그때 React Hook으로 useRef를 사용한다. useRef는 일반적인 자바스크립트 객체로 heap 영역에 저장이 된다. 따라서 같은 메모리 주소를 가지게 되기 때문에 값이 변하더라도 화면이 렌더링되지 않는다. useRef를 사용하면 current를 통해서 값을 변경해준다. 반환된 useRef 객체는 컴포넌트의 전 생애주기를 통해 유지가 된다. useRef로 만들어진 객체 vs useState로 변경되는 변수 vs 로컬변수 로컬변수 -> 렌더링 x -> 렌더링되면 변수..