frontend
-
[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..
-
[React] Recoil과 Redux의 차이점React 2022. 6. 6. 17:43
안녕하세요. 오늘은 React의 상태관리 라이브러리인 Recoil과 Redux의 차이에 대해 알아보려 합니다! 시작에 앞서 먼저 두 라이브러리가 무엇인지부터 알아보겠습니다 🙂 🔵 Recoil 이란? Recoil은 페이스북에서 만든 새로운 리액트용 전역상태관리 라이브러리 입니다! React의 동작 방식과 매우 유사하게끔 만들어졌다 합니다! 핵심개념 ☝🏻 Atoms - Atoms는 상태의 단위로, 값이 업데이트 되면 구독한 컴포넌트는 리렌더링이 됩니다. - atom 함수를 이용해 생성할 수 있습니다. - 컴포넌트에서 Atoms를 사용하려면 useRecoilState hook을 사용해야 합니다. - useState와 비슷하지만, 상태가 컴포넌트 간으로 공유될 수 있는 것이 차이점입니다. ✌🏻Selectors ..