체인의정석

React에서는 재랜더링이 발생하는 3가지 패턴1. State 업데이트2. Props가 변경된 컴포넌트3. 재랜더링 된 컴포넌트 아래의 모든 컴포넌트이러한 재랜더링을 계속하게 될 경우 부하가 많이 발생하게 된다.리액트에서 컴포넌트, 변수, 함수 등을 재렌더링할 때 제어가 필요한 경우에는 메모이제이션을 수행한다.메모이제이션은 이전 처리 결과를 저장해 둠으로써 처리 속도를 높이는 기술로 필요할 때만 다시 계산하게 하여 불필요한 처리를 줄일 수 있다. 만약 부모가 재랜더링을 하더라도 메모이제이션이 되어 있다면 자녀 컴포넌트의 재랜더링을 막을 수 있다.- 컴포넌트 메모이제이션memo를 사용하면 컴포넌트 자체가 메모이제이션이 되면서 이러한 랜더링 과정에서 부모가 바뀌더라도 자식은 바뀌지 않게 된다.- 함수 메모이..

go로 백엔드를 작업할 때 보통 자체적인 go 모듈을 go common과 같은 이름으로 넣고 프로젝트에서 쓰는 레포에서 공통적으로 사용하는 경우가 많다고 한다. node.js나 nest를 할 때는 거의 퍼블릭 모듈만 썼었는데 go는 자체적으로 구현하는 회사들이 더 많은거 같다. 이렇게 자체 모듈을 쓰는 경우 코드를 수정할 때 common모듈과 함께 프로젝트 수정까지 들어가는 경우가 존재한다.그럴 때는 go.mod에서 원래대로 정의를 해준 후에 하단에replace github.com/레포이름/go-common => /Users/chohyunki/go/src/go-common해당 replace 명령어를 써서 정의를 해두면 로컬에 있는 레포 기준으로 작동이 가능하다.작동이 모두 잘 되는것을 로컬에서 확인하면 ..

현상 : 평소에 모듈의 경우 모듈 정의를 다 하고 상용하였으나, 인계 받은 코드에서 export에 대한 선언 없이 모듈처럼 특정 파일을 사용하고 있는 상황. 하지만 하나라도 export를 붙이면 컴파일 오류가 발생. 해당 방식으로 사용되는 케이스는 처음봐서 어떠한 원리로 동작하는지 파악결과 : typescript가 파일 자체를 모듈로 취급할지 아니면 스크립트로 취급할지를 결정파일 안에 export나 import가 한 줄도 없으면 해당 파일은 모듈이 아닌 전역스코프에 포함되는 스크립트로 취급 이에 따라서 import 구문 없이 바로 사용가능하지만 충돌할 위험이 커지기 때문에 사용이 권장되지는 않음.보통은 export를 정의하고 import를 정의해서 사용. TypeScript에서는 ECMAScript 20..

Cloud HSM을 구축해보고 그 과정을 복기하며 정리해 보았다.https://docs.aws.amazon.com/cloudhsm/latest/userguide/getting-started.html Getting started with AWS CloudHSM - AWS CloudHSMThanks for letting us know this page needs work. We're sorry we let you down. If you've got a moment, please tell us how we can make the documentation better.docs.aws.amazon.com일단 위의 가이드를 보고 진행하면 된다. 해당 문서의 내용은 아래와 같다.순서는 먼저 IAM, VPC 설정을 해..

상황 : 클라우드 HSM을 통해서 트랜잭션을 쏘는 소스를 인계받는상황에서 찾아본 내용 정리AWS Cloud HSM 작업 순서먼저 cloud hsm의 경우 IAM 사용자가 생성되어 있어야 하고, VPC와 클러스터를 생성해야 한다.VPC 안에만 클라우드 hsm을 설치할 수 있기 때문에 VPC를 먼저 생성한 후에아래 가이드를 보고 클러스터를 생성한다.https://docs.aws.amazon.com/cloudhsm/latest/userguide/create-cluster.html이후 EC2 인스턴스를 생성해야 하는데 이때 Amazon Machine Image(AMI)를 선택한다. HSM의 경우 접근 권한이 매우 중요하기 때문에 보안그룹을 수정한 후 해당 보안 그룹을 ec2에 할당하고, 만든 ec2를 cloud..

Indexed DB의 경우 기존의 Local Storage, Session Storage와 같은 Web storage와 비슷하지만 저장해야 하는 데이터의 양이 커질 때는 IndexedDB를 사용한다. 내가 만든 프론트의 경우 메타마스크 기반의 서명 + 세션 스토리지를 사용한 JWT발급 관리를 했었는데내가 새로 인수받는 코드의 경우에는 JWT관리에 있어서 IndexedDB라는 것을 사용하고 있었다.IndexedDB 란?웹 표준 인터페이스의 하나로 색인이 포함된 JSON 객체가 모여있는 트랜잭셔널 로컬 데이터베이스이며, 이를 이용해 웹사이트는 데이터베이스에서 영속적인 데이터를 모아서 저장한다. Index dbsms Transaction Model을 따르기 때문에 모든 변경은 Transaction안에서 일어나..

ThunkTunk는 지연된 작업을 수행하는 코드를 의미하는 프로그래밍 용어.지금 로직을 실행하는 대신 나중에 해당 작업을 수행하는 데 사용할 수 있는 함수 본문이나 코드를 작성 할 수 있다.Redux의 경우 Thunk는 Redux 스토어 및 dispatch, get state메서드와 상호 작용할 수 있는 논리를 내장한 함수를 작성하는 패턴 만약 redux 앱에서 비동기 로직을 작성하게 된다면 thunk를 사용하는 것이 표준이다. (동기에서도 사용가능하긴 함)const thunkFunction = (dispatch, getState) => { // logic here that can dispatch actions or read state}store.dispatch(thunkFunction)thunk 함수..

createEntitiy Adapter의 경우 미리 준비된 reducer (함수들)을 탑재하고 있는 객체이다.addOne / addMany: add new items to the stateupsertOne / upsertMany: add new items or update existing onesupdateOne / updateMany: update existing items by supplying partial valuesremoveOne / removeMany: remove items based on IDssetAll: replace all existing items위와 같이 state를 바꿔 줄 수 있는 reducers들을 내장하고 있다.https://ko.redux.js.org/tutorials/..