체유의 IT일지

UUID 범용 고유 식별자(Universally Unique Identifier)로 고유하게 식별하는데 사용되는 레이블이다. 주로 분산 컴퓨팅 환경에서 사용된다. 중앙에서 관리되지 않는 분산 환경이라면 개별 시스템이 id를 발급하더라도 유일성이 보장되어야 하기 때문에 등장하게 되었다. 전역적으로 고유하지는 않으나 중복의 가능성은 거의 적다. 36자의 문자열로 표시되는 128비트의 값이다. 하이픈으로 구분된 32개의 16진수 문자열의 패턴을 보인다. uuid의 버전 버전은 1, 3, 4, 5가 있다. 1버전: 타임스탬프를 기준으로 생성 3버전: MD5 해시기반으로 생성 4버전: 랜덤 생성 5버전: SHA-1 해시를 이용해 생성 => 1버전과 4버전을 많이 사용하나 1버전도 중복값 존재의 가능성이 있어서 주..

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 -..

1차 프로젝트에서 직접 VM 배포에 관여하지는 않았지만, 각 팀에서 배포 과정에 많은 어려움들을 겪었었다. 우리 팀은 발표 전날에 VM 서버가 문제가 생겨서 늦은 밤까지도 코치님들이 총 출동해서 해결해주셨다. 2차 프로젝트 때는 우선 프론트만 초기 틀 잡고는 바로 배포를 진행해보았다. 로컬에서 build 파일을 생성한 후에 VM 서버로 보내서 배포를 하려고 했으나, 로컬에서 생성한 build 파일을 VM 서버로 보내는 방식에서 막혀서 한참을 헤멨다. 그렇게해서 찾은 방식은 VM 서버에서 git clone으로 파일들을 가져오고 VM서버에서 build 파일을 생성을 하고 nginx로 배포를 진행했다. VM 이란? Virtual Machine의 약자로 가상 머신 OS로 리눅스가 있어서 유닉스 커맨드로 작업을 ..

프로젝트에서 프로필 사진을 변경할 때, 이미지를 미리보기로 띄울 수 있도록 구현하고자 했다. 미리보기로 띄울 수 있는 방식으로 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 -> 렌더링되면 변수..

프론트에서의 상태 변경과 관련해 매번 백에 API를 요청하는 것이 아닌 일정 시간을 두고 요청하는 것과 관련해, 코치님께서 '디바운싱과 쓰로틀링'을 언급해주셨다. '디바운싱과 쓰로틀링'을 개발과정에서 사용해보고자 정리를 해본다. 디바운싱 함수 실행 요청이 연속적으로 들어온 경우 가장 마지막(혹은 제일 처음) 요청만 수행 ex. 검색창에 "front"를 검색한다고 해보자. 일반적인 경우에는 글자를 입력할 때마다 API 요청을 하게 된다. 이 경우에는 너무 많은 요청이 들어가게 되고 서버에서는 자원 부담 및 부하로 이어질 수 있다. 더불어 아무 글자나 마구잡이로 계속해서 입력하다보면 그 때마다 API 요청이 되어 호출 낭비가 된다. 디바운싱의 경우, 정해진 시간이 지나기 전에 입력이 들어온다면 기존 시간은 ..