프로그래밍14 useMemo, React.memo, 컴포넌트 분리를 통한 렌더링 최적화 일기 계기 현재 기획에 각 Todo에 대한 소요시간을 측정하는 기능이 있었다. 초 단위로 timer를 설정하려고 했기 때문에, start 버튼을 누르고 end를 누를 때까지 timer가 계속 작동한다. 이를 화면에 표시하기 위해 소요시간을 state로 관리했으며, '소요시간' 출력 부분이 1초마다 리렌더되어야 하므로 리렌더 범위를 최소화하고자 했다. 1. React.memo 사용 최하위 컴포넌트들 (Button, Text 등)은 부모 컴포넌트가 바뀌었을 때에 무조건 렌더링된다. 자녀 컴포넌트가 변하지 않았는데 불필요한 렌더링을 계속 하는 문제를 React.memo로 해결할 수 있다. 최적화된 컴포넌트를 리턴하여 렌더링이 될 상황에 Prop check 수행, Props 변화가 있을 때만 렌더링하도록 설정함. e.. 2022. 11. 27. Github Actions Release 자동화 학습을 진행하면서 작성했습니다..! 잘못된 정보가 있다면 말씀 부탁드립니다!! 도입 배경 버전 upgrade 시 latest release를 기준으로 version update를 해주는데, 이 기능이 너무 좋아보였다..!! 추후에 minor update를 할 때 스크립트를 가다듬으면 버전 관리를 더 잘 할 수 있을 것 같다. release 이후 hotfix를 한다면 버전 관리를 어떻게 하면 좋을지 고민이다. 일반적으로는 commit message, github PR 만들때 PR tag 등으로 어떤 종류의 version update인지 명시하는 방식이 있다고 한다. (추후에 업데이트 해보겠습니다..!) 적용을 하기 위해서는 .github/workflows/ 하위에 yml 파일을 하나 만든다. name: R.. 2022. 11. 27. Express Server Docker 적용기 (ft. Typescript, yarn) 컨테이너 각각의 어플리케이션을 고립된 환경에서 구동할 수 있게 해줌 VM은 운영체제를 포함하고, 컨테이너는 운영체제를 포함하지 않고 컨테이너 엔진이 설치된 HOST OS를 공유한다. 이로 인해, 컨테이너는 VM에 비해 용량이 적다! 컨테이너가 구동되기 위해서는 container Engine이 필요한데, 이러한 컨테이너 엔진 중에 가장 많이 쓰이는 것은 도커이다. Docker Engine 1. 도커파일 dependency, 환경변수 등 포함 2. 도커 이미지 Application을 실행하는 데 필요한 코드, 런타임 환경 등 모든 세팅이 들어있음. 실행되고 있는 application의 상태를 snapshot (변경 불가능) 이미지는 캡쳐 당시 프로젝트 상태를 가짐 (불변) 3. 컨테이너 image를 고립된 .. 2022. 11. 20. TypeScript CI 도입기 (ft. Jest, CodeCov, Github Actions) 도입 배경 그룹 프로젝트에서 TDD를 적용했고, 애자일 방법론을 채택했기 때문에 앞으로 release가 최소 2회 남아있었다. 그래서 테스트 코드 coverage에 대한 검증을 하고 싶었다. codecov는 PR Review를 진행할 때마다 _해당 PR이 code coverage를 얼마나 만족했는지 시각적으로 확인_할 수 있다는 점이 가장 매력적이었던 것 같다. 다시 말해, 최소한 TDD를 적용한 core 알고리즘에 개발자가 할 수 있는 실수를 방지하고, release된 서비스가 보다 견고할 수 있도록 도입하게 되었다. (잘못 알고 있었다..) TDD를 적용하는 우리 팀의 test code coverage를 PR마다 시각적으로 확인함으로써, 유효한 테스트 코드를 작성했는지, 목표하는 만큼 테스트 코드를 .. 2022. 11. 20. 이전 1 2 3 4 다음
