꼬박로그 꼬박로그

React나 React Native 혹은 JavaScript 생태계에서 쓰일 수 있는 Redux라는 상태 관리 라이브러리가 널리 쓰이고 있습니다. 하지만 사용해보진 분들은 아시겠지만, Redux의 Store는 앱을 종료하거나 브라우저를 새로고침 하게 되면 저장되어있던 모든 상태가 제거됩니다. 그래서 캐시 기능을 하는 여러가지의 방법 중 LocalStorage, SessionStorage등을 보편적으로 사용하는데, Redux-Persist는 이런 작업들을 굉장히 편리하게 제공하는 라이브러리입니다. 설치방법 $ npm install redux-persist 사용해보기 환경 WebApp React Redux Redux-Persist 프로젝트 세팅 1. 새로운 리액트 프로젝트를 생합니다. $ npx create..

useMemo useMemo 훅을 사용하면 함수형 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있습니다. 리액트 공식 문서 상으로는 메모이제이션된 값을 반환한다고 나와 있는데, 첫 번째 인자로 전달된 함수의 반환(return) 값을 기억하고 있다가 두 번째 인수로 전달된 state가 변경되면 새로운 값을 반환하고, 컴포넌트를 리 렌더링 시킵니다 예시 코드 import React, { useState } from 'react'; const getAverage = numbers => { console.log('평균값 계산중..'); if (numbers.length === 0) return 0; const sum = numbers.reduce((a, b) => a + b); return sum / numb..

useCallback을 배우기 전에 알아야 하는 것 함수형 컴포넌트는 단지 jsx를 반환하는 함수입니다. 컴포넌트가 렌더링 된다는 것은 누군가가 그 함수(컴포넌트)를 호출하여 실행되는 것을 말합니다. 함수가 실행될 때마다 내부에 선언되어 있던 표현식(변수, 또 다른 함수 등)도 매번 다시 선언되어 사용된다. 컴포넌트는 자신의 state가 변경되거나, 부모에게서 받는 props가 변경되었을 때마다 리렌더링 됩니다. useCallback useCallback은 리액트 공식문서에 따르면 메모이제이션된 함수를 반환한다라는 문장이 핵심입니다. 첫번째 인자로 넘어온 함수를, 두 번째 인자로 넘어온 배열 내의 값이 변경될 때까지 저장해놓고 재사용할 수 있게 해줍니다. const memoizedCallback = us..

최근 프로젝트를 진행하면서 스크롤에 가려진 Dom Element가 실제 사용자의 눈에 보였을 때 event를 발생시켜야 하는 요구사항이 있었습니다. 처음에는 해당 div에 scroll 이벤트를 걸어서 구현을 하면 되겠다 생각이 들었지만 실제로 구현하기에는 어려움이 있었고, 레퍼런스를 찾아보던 중 레이지 로딩 기법과 IntersectionObserver API를 알게 되었습니다. 레이지 로딩이란? 효울적인 메모리 관리를 위하여 웹페이지를 호출했을 때 눈에 보이는 곳의 이미지를 먼저 로딩하고 눈에 보이지 않는 즉, 스크롤해야만 볼 수 있는 영역의 이미지는 스크롤을 하면 로딩해주는 방식입니다. IntersectionObserver InterSectionObserver는 크롬 51버전부터 사용할 수 있는 Web..

Vue는 컴포넌트가 렌더링 될 때 성능을 위해, DOM 트리를 활용하여 변경된 부분만 렌더링을 진행합니다. 컴포넌트나 객체가 변경되는지 여부를 판단하여 데이터를 로드하고 다시 렌더링 합니다. key라는 특수한 속성은 Vue의 가상 DOM 알고리즘이 새로운 노드 목록을 이전 목록과 비교할 때, VNode를 식별하기 위한 힌트로 사용됩니다. key가 없으면 Vue는 엘리먼트 이동을 최소화하고, 같은 유형의 엘리먼트를 제자리에서 패치/재사용하려는 알고리즘을 사용합니다. key를 사용하면, key의 순서 변경에 따라 엘리먼트를 재 정렬하고, 더 이상 존재하지 않는 키가 있는 엘리먼트는 항상 제거/삭제됩니다. key는 언제 사용하는가? key를 가장 많이 사용하는 부분은 아마도 v-for일 것입니다. 2.2.0 ..

git actions로 커밋 메시지를 관리하는 것에 이어서 husky의 commit-msg hooks를 활용하여 올바른 커밋 컨벤션을 지키지 않고 커밋을 했을 시 커밋을 막는 방법에 대해 알아보았습니다. 1.Git Hooks란? Git Hooks는 Git과 관련한 어떤 이벤트가 발생할 시에 특정 스크립트를 실행하는 기능입니다. 훅은 크게 클라이언트 훅과 서버 훅으로 나뉘게 되는데 클라이언트 훅은 commit, merge 가 발생하거나 push가 발생하기 전 클라이언트에서 발생하는 훅입니다. 서버 훅은 Git repository로 push가 발생했을 때 서버에서 실행하는 훅입니다. 2. 레포지토리 생성 후 husky 모듈 설치하기 테스트용 레포지토리를 생성한 후 npm init으로 package.json파..

프로젝트에서 팀원들 간의 통일된 코드 컨벤션을 유지하기 위해 github actions를 활용하여 팀원이 올바른 커밋 메시지를 작성하여 pull request를 하였는지 확인할 수 있는 작업을 진행해보았습니다. 1. 레포지토리 생성 후 actions 등록하기 레포지토리 생성 후 Actions 탭으로 이동하여 work flow를 셋업 합니다. commit-message-checker.yml 파일 내부에 올바른 규칙으로 커밋 메시지를 작성하였는지 여부를 판단하는 코드를 작성합니다. 저는 제목에 feat | fix | docs | style | refactor | test | chore를 포함하여 커밋 메시지를 작성하였는지 정규식으로 확인하는 코드를 추가하였습니다. name: "Commit Message Ch..

ELB(Elastic Load Balancing)이란 ELB란 여러 가용 영역에서 수신되는 애플리케이션 트래픽을 여러 EC2 인스턴스 및 리소스로 분산시켜서 부하를 분산시켜주는 서비스이다. ELB는 L4(전송계층, TCP/UDP)나 L7(애플리케이션 계층, HTTP 프로토콜 등) 장비를 구입하거나 소프트웨어를 구축하지 않아도 L4/L7 레벨의 부하 분산 기능을 사용할 수 있고 고가용성 서비스를 구축할 수 있다. ELB 생성 후 EC2 인스턴스와 연결 AWS 홈페이지에서 콘솔에 로그인 한 뒤 EC2를 선택한 후 사이드 메뉴의 로드밸런싱/로드밸런서 => Load Banlancer생성 버튼을 클릭한다. Application Load Balancer를 선택한다. 이름을 입력하고 리스너는 HTTPS를 선택한다. ..