F.E/React

Minio에 파일 업로드하기(with aws-sdk)

MinIO | High Performance, Kubernetes Native Object Storage MinIO's High Performance Object Storage is Open Source, Amazon S3 compatible, Kubernetes Native and is designed for cloud native workloads like AI. min.io 0. 들어가기 전 Minio는 AWS S3와 호완되는 Object Storage인데 회사에서는 AWS S3 등의 스토리지를 사용했겠지만 개인 프로젝트의 경우에는 비용을 고려해야하기에 진행하고 있는 프로젝트에선 Minio를 채택하여 파일 서버로 구성하였다. 다른 파일 서버도 존재하지만 Minio를 선택한 이유는 총 3가지가 존재한..

React에서 axios 응용하기.

Axios 브라우저와 node.js를 위한 Promise 기반 HTTP 클라이언트 라이브러리 Axios는 브라우저와 node.js를 위한 간단한 Promise 기반 HTTP 클라이언트입니다. Axios는 확장 가능한 인터페이스를 가진 작은 패키지로 axios-http.com 0. axios란? axios는 node.js와 브라우저를 위한 Promise 기반의 HTTP 클라이언트다. 즉 브라우저 뿐만 아니라 NodeJS 위에서도 동작한다는 것이며, 브라우저에서는 XMLHttpRequests를 사용하고 NodeJS에서는 http 모듈을 사용한다. axios는 Promise를 기반으로 JSON으로 데이터가 자동 변환된다는 점이 있어 기본으로 제공해주는 fetch에 비하여 편리한 점이 많아서 가장 많이 사용되는..

MSW로 Mocking(1) - Brower

이번 글은 MSW를 이용하여 백엔드 API를 Mocking 하는 방법에 대해 알아보자. 실제로 프로젝트에 들어가게된다면 내가 프론트 엔드 작업을 할 때 API가 있을 수도 있지만, 없는 경우도 많다. 보통 프로젝트를 할 때는 프론트엔드에서 UI를 구성하는 작업과 백엔드의 API를 개발하는 작업이 작업 순서상 동시에 진행되는 데 이러면 UI를 구성할 때 백엔드로부터 데이터를 받아올 수 없기 때문에 Fake 데이터인 더미 데이터를 만들어서 사용한다. 그렇게 만들어둔 더미 데이터는 API가 완성된다면 사용하지 않고 백엔드로부터 데이터를 받아오지만 단순하게 가짜 데이터인 더미 데이터를 사용하는 것이 아니라 실제로 호출할 수 있는 가짜 API를 사용하면 좀 더 안정적으로 UI를 구성할 수 있다. Mock Serv..

[React] Cookie + JWT + axios 이용하여 JWT 인증하기.

오늘은 React로 axios와 cookie를 활용하여 JWT를 구현해보자. 순서는 아래의 이미지와 같다. 1. 로그인 요청 2. AccessToken 응답 3. AccessToken을 Cookie에 저장 4. API 요청 보낼 때 Header에 AccessToken을 담아서 보냄. 5. 서버는 Header의 AccessToken을 이용하여 인증 후 응답. 먼저 Cookie.tsx에서 Cookie 관련 기능을 만들어둔다. react-cookie 모듈을 이용하여 쿠키를 생성, 조회, 삭제 기능을 모듈화하여 타 컴포넌트에서 사용을 용이하게 작성한다. setCookie : 키와 값을 받아서 새로운 쿠키를 생성하고 저장한다. getCookie : 키를 받아서 값을 반환한다. removeCookie : 키를 받아..

[React] useReducer에 대해서 알아보자.

우리가 어떠한 상태를 관리할 때는 useState()를 사용해서 해왔지만, useState()는 컴포넌트 내부에서 이루어진다는 것이 있다. 그러기에, A 컴포넌트에서 B 컴포넌트로 상태 전달할 때의 어려움도 존재하였다. 이를 해결 하는 방법이 useReducer다. useReducer는 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리 시킬 수 있기에, 컴포넌트 바깥에 작성하거나, 다른 파일에서 작성 하고 불러와서 사용할 수도 있다. useReducer에서 reducer는 현재 상태(state)와 액션 객체(action)를 파라미터로 받아 새로운 상태를 반환하는 함수다. reducer에서 반환하는 상태는 곧 컴포넌트가 가지게 될 새로운 상태가 된다. 여기서 action은 상태를 업데이트를 하기 위한 정보..

[React] useCallback 사용하기.

해당 자료로 공부하고 정리한 게시글 입니다. https://www.daleseo.com/react-hooks-use-callback/ useCallback useCallback은 useMemo와 더불어, 성능의 최적화를 위해서 사용하는 React Hook으로, useMemo가 값을 memoization 하기 위한 훅이였다면, useCallback은 함수를 memoization하기 위한 훅이다. useCallback은 2개의 인자를 받는 데, 첫번째 인자는 콜백 함수, 두번째 인자는 의존성 배열을 받게 되며, 첫번째 인자로 넘어온 함수를 의존성 배열 내의 값이 업데이트 될 때까지 저장해두고 사용할 수 있다. 예를 들dj add() 함수는 a와 b를 받아 더한 후 반환하는 함수이고, 컴포넌트 함수 안에서 선..

[React] useMemo 사용하기.

useMemo useMemo는 컴포넌트의 성능을 최적화 할 수 있는, React의 대표적인 Hook으로, Memo는 Memoization을 의미한다. Memoization는 기존의 수행한 연산의 결과값을 어딘가에 저장해두고, 동일한 입력이 들어오면 재사용을 하는 프로그래밍 기법을 의미한다. React의 함수형 컴포넌트는 렌더링 -> Component 함수 호출, 모든 내부 변수의 초기화의 순서를 거치게 되기에, 아래의 예제에 있어서 item이라는 변수의 값은 항상 초기화 되기에, itemValue 함수는 항상 다시 호출된다. 지금은 가벼운 함수지만, 무거운 함수라면, 계속 다시 함수를 호출하는 것은 매우 비효율적이다. function Component(){ const value = itemValue() ..

[React] useRef 사용하기.

JavaScript로 개발을 할 때는 특정 태그를 잡기 위하여, getElementById, getElementByClass, querySelector와 같은 DOM 선택자를 사용해서 특정 태그, DOM을 선택 하였다. 리액트에서도 가끔 DOM을 선택할 필요가 있을 때가 있으며, 그 때 사용하는 것이 useRef 훅이다. useRef를 생성하고, 태그의 ref 속성으로 생성한 useRef와 연결하여 사용한다. import { useRef } from 'react' export default function Page() { const inputTag = useRef() return } DOM 객체의 current.focus()를 이용하면, 원하는 객체를 선택하게 할 수 있다. current.focus()와..

[React] INPUT 관리하기.

React에서 사용자가 데이터를 입력할 수 있는 INPUT을 관리하는 방법에 대해서 알아보자. useState를 이용해서 input 하나를 관리를 해보고, 여러개를 관리해본다. 1. INPUT 1개 관리하기 input 태그의 onChange와 useState의 Set 함수를 연결하여 관리한다. onChange는 이벤트 중 하나로, 변화가 있을 때 마다 실행된다. 그러기에, INPUT의 변화가 있을 때 마다 즉 사용자가 INPUT에 입력 할 때 마다 그 값을 text에 저장한다. import { useState } from 'react' export default function App() { const [text, setText] = useState() // text 상태 관리 const onChange..

[React] useInput Hook 사용하기

기존의 useState를 이용하는 것이 아닌 useInput이라는 함수를 만들어서 input 상태를 관리한다. import { useState } from "react" const useInput = (init) => { const [item, setItem] = useState(init) onchange = (event) => { setItem(event.target.value) } return { item, onchange } } export default function Counter() { const name = useInput() return ( Enter Your Name Name : {name.item} ) }