전체 글
-
[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..
-
[Front End] Yarn과 Yarn BerryFront End 2022. 8. 23. 09:57
안녕하세요. 오늘은 Yarn과 Yarn Berry에 대해 알아보려 합니다! 🟦 Yarn 이란? Yarn은 자바스크립트 패키지 매니저입니다. 프로젝트 패키지 의존성을 관리하는 툴이며, 패키지를 공유하게끔 도와줍니다. (Third-party 모듈을 패키지라고 부릅니다) npm과의 차이 ☝🏻 속도 - Yarn은 패키지를 순서대로 설치하는 npm과는 달리 패키지를 병렬로 설치하므로 속도가 더 빠릅니다. - 캐싱을 이용하기 때문에 설치 속도가 빠릅니다. - 따라서 첫번째 설치에선 npm과 속도가 비슷하지만 두 번째 설치부턴 확연히 속도가 빨라집니다. ✌🏻보안 - npm은 다른 패키지를 포함할 수 있는 코드를 자동으로 실행하므로, 보안 취약성이 발생합니다. - Yarn은 yarn.lock이나 package.js..
-
[CS] .map() 메서드가 뭘까요?CS 2022. 6. 15. 20:23
여러분은 .map() 메서드에 대해 잘 아시나요? 전 다양한 프로젝트를 하면서 .map() 메서드를 사용해왔는데요. 사용을 하려 할 때마다 쓰는 방법을 잘 몰라 난항을 겪었던 적이 있습니다. 그런 의미에서 .map() 메서드에 대해 정리해보았습니다! 🟢 정의 .map() 메서드는 배열 내의 요소 각각에 대해 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환하는 메서드입니다. 🟢 인수 .map() 메서드는 callback, thisArg함수를 가지고 있습니다. Callback 새로운 배열을 만드는 함수로, 다음의 세가지 인수를 가집니다. currentValue : 배열에서 처리해야 하는 값 index : 현재 처리해야하는 인덱스 값 array : map()을 호출한 배열, arr의 배열의 값을 가져오는..
-
[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..
-
[Front End] CSR과 SSR의 차이가 뭘까요?Front End 2022. 4. 11. 18:24
웹 프론트엔드를 공부하다 보면 CSR과 SSR 한 번쯤은 들어보셨을 겁니다! 저 또한 React를 공부하며 CSR과 SSR, SPA 등등에 대해 알아보게 되었는데요. 그러면 오늘은 CSR과 SSR에 대해 알아보겠습니다! CSR과 SSR의 차이를 알아보기 전에 일단 각각의 특징과 장점에 대해 알아볼 텐데요. 일단 CSR 먼저 알아보겠습니다. CSR Client Side Rendering의 약자로 SSR과 달리 클라이언트 측에서 렌더링이 일어납니다. 위 사진은 CSR 단계를 설명하는데요. 1. 유저가 웹사이트에 요청을 보내요. 2. CDN이 HTML 파일과 JS로 접근할 수 있는 링크를 클라이언트로 보내요. 3. 클라이언트는 HTML과 JS를 다운로드하여요. (이때 SSR과 달리 유저는 아무것도 볼 수 없어..