React
-
[React] SWR이 뭘까?React 2022. 8. 27. 22:43
안녕하세요. 오늘은 SWR에 대해 소개해드리려 합니다! SWR 이란? SWR은 vercel에서 만든 fetch를 위한 커스텀 훅 npm 모듈입니다. SWR 용법 const { data, error, isValidating, mutate } = useSWR(key, fetcher, options) 파라미터 - key: 요청을 위한 문자열 - fetcher: 데이터를 가져오기 위한 함수를 반환하는 Promise - options: SWR hook을 위 객체 반환 값 - data: fetcher가 이행한 주어진 키에 대한 데이터 - error: fetcher가 던진 에러 - isValidating: 요청, 갱신 로딩의 여부 - mutate: 캐시 된 데이터를 뮤테이트하기 위한 함수 예시 const {data,..
-
[React] Github Action으로 Typescript + React 프로젝트 CI/CD 구축하기 (with S3, CloudFront)React 2022. 8. 23. 16:16
안녕하세요 오늘은 CI/CD를 구축하는 방법을 알아보겠습니다! Github Action을 이용하여 개발하였습니다. 이 글은 다음 블로그들을 참고하였습니다. https://blog.doitreviews.com/development/2021-08-13-react-automatic-deploy/ 2021-08-13 Github Action을 이용한 Front 배포 자동화 Github Action을 통해 AWS에 배포 자동화 설정을 해봅시다! Github Action 회사에서 새로운 프로젝트를 진행하고 있습니다. 아직 시작한지 얼마 되지 않았지만 초기부터 배포를 하고 진행하는 것이 더 낫 blog.doitreviews.com https://velog.io/@eomttt/Github-Actions%EB%A5%BC..
-
[React] Recoil과 Redux의 차이점React 2022. 6. 6. 17:43
안녕하세요. 오늘은 React의 상태관리 라이브러리인 Recoil과 Redux의 차이에 대해 알아보려 합니다! 시작에 앞서 먼저 두 라이브러리가 무엇인지부터 알아보겠습니다 🙂 🔵 Recoil 이란? Recoil은 페이스북에서 만든 새로운 리액트용 전역상태관리 라이브러리 입니다! React의 동작 방식과 매우 유사하게끔 만들어졌다 합니다! 핵심개념 ☝🏻 Atoms - Atoms는 상태의 단위로, 값이 업데이트 되면 구독한 컴포넌트는 리렌더링이 됩니다. - atom 함수를 이용해 생성할 수 있습니다. - 컴포넌트에서 Atoms를 사용하려면 useRecoilState hook을 사용해야 합니다. - useState와 비슷하지만, 상태가 컴포넌트 간으로 공유될 수 있는 것이 차이점입니다. ✌🏻Selectors ..
-
[React] 모달 바깥 부분 클릭시 모달 꺼지게 하기React 2022. 4. 12. 23:29
저는 다양한 프로젝트를 하며 모달 기능을 구현해보았는데요. 모달 기능을 구현하면서 모달 바깥쪽을 클릭 시 모달이 꺼지게 하는 기능을 구현해야 하는 상황이 생길 때가 많았습니다. 처음에 이 기능을 구현할 때 어려움을 겪었던 것이 생각나 한 번 글로써 다시 정리해보려 합니다! 이번화는 다음 스택을 사용하였습니다. - Next.js - Typescript - Styled-Component - Recoil 아래의 코드들은 저의 한 프로젝트에서 복사해온 코드입니다. 일단 Recoil을 사용하여 전역 변수를 선언을 해주었습니다. export const isOpen = atom({ key: "isOpen", default: false, }); export const isWriteModalOpen = atom({ ke..