구리

React 상태 관리 라이브러리에 대해 공부하며 정리한 글입니다. 피드백은 언제나 환영입니다!Redux가 나온 이유Redux는 JS 상태관리 라이브러리로 전역 상태 관리시 Redux를 쉽게 사용할 수 있는 Redux Toolkit을 많이 사용한다. 그렇다면 Redux 탄생 이전에는 클라이언트 상태 관리를 어떻게 했을까?전역 상태 관리를 생각하면 React가 제공하는 Context API를 떠올릴 수 있지만 이는 16.3 버전으로 2018년에 출시되었다. (엄밀히 말하면 상태 관리보다는 상태 주입을 도와주는 역할이다.) 그 전까지는, React에서 대표적인 상태 관리 라이브러리는 없었다.기존에는 MVC 패턴을 주로 사용했는데 애플리케이션이 비대해지며 상태(데이터)도 많아짐에 따라 상태 변화를 추적하고 이해..

이슈회사 서비스는 ArgoCD를 사용해 helm-chart를 배포하고 있다. helm chart 리포지토리에는 배포 환경, 서비스에 따라 폴더별로 구분되어 있으며 굉장히 많은 commit, push가 일어난다.배포시 가장 최신의 이미지를 사용하기 위해 deployment에서 imagePullPolicy : always 옵션을 사용해 k8s에 해당 도커 이미지가 있든 없든 무조건 다운로드하게끔 설정했다. 그러면 로컬에서 개발 후 Dockerhub에 동일한 버전의 이미지를 push 해도 배포시 항상 최신 이미지를 가져오기에 변경사항이 반영되어 있을 거라 생각했지만... 아무런 반응이 없었다.apiVersion: apps/v1kind: Deploymentmetadata: name: testspec: sel..

회사 서비스는 기존 Rancher에서 배포했었는데 버전이 낮아 CI/CD 적용이 불가했다. 그러다 k8s 환경으로 옮기면서 CI/CD를 구축할 수 있게 되었다.요구사항은 다음과 같다.Github Actions를 통해 dev, stage 환경에서의 CI/CD를 구축한다. (prod 환경의 k8s는 타팀이 관리하고 있었기에 배포 요청을 해야했었어서 prod는 고려하지 않았다.)빌드 시점에 비밀번호 관리 툴인 1password에 저장된 환경 변수를 주입한다.Argo CD를 사용하고 있었기에 Docker Hub에 이미지 push 후 Argo CD repo에 릴리즈 이미지 버전을 변경하는 Commit, Push를 진행한다.dev, stage CI/CD 외 테스트 브랜치를 위한 CI/CD가 필요하다.그리하여 아래와..

현회사의 팀은 한달 단위로 스프린트를 진행한다. 일이 바쁘다보면 시야가 좁아지고 일을 쳐내기 바쁠때도 있다. 그래서 개인적으로 좋았던 점, 아쉬웠던 점들을 돌이켜보며 더 발전하기 위해 스프린트가 끝나면 회고를 하려 한다.회고는 KPT 방식으로 진행하며 앞으로는 Try에 작성한 방법들을 적용하며 Keep의 항목이 더 많아지는 것을 목표를 잡아본다.Keep기획 과정에서 개선 방안이나 아이디어를 많이 제안한 것이다. 그 덕분에 기능이 좀 더 견고해진 것 같다. QA 중 종종 A 케이스에는 어떻게 처리가 되는 건가요? 와 같은 질문이 올 때가 있는데 기획 과정에서 누락된 케이스들이 발견되곤 한다.중요한 부분을 놓칠 때도 있어서 QA 중 기획 및 개발 수정이 들어가곤 하는데 이번에는 그런 부분들이 적었던 것 같다..

React 리렌더링 성능 개선 경험을 공유하는 글로 피드백은 언제나 환영입니다!서론회사에서 작업했던 영상 데이터를 차트로 보여주는 React 기반의 대시보드 프로젝트를 진행했었다. 프로젝트를 진행하며 성능 개선은 크게 신경쓰지 않았었기에 프로젝트 성능을 분석하고 일부 개선한 경험을 공유하려 한다.본론성능이 느리다는 기준이 뭘까?사용자의 상호작용을 통해 React는 상태가 업데이트되면 리렌더링이 되면서 화면이 다시 그려진다. 그런데 리렌더링 속도가 느려지면 사용자 경험도 낮아지기에 렌더링 속도가 성능의 기준이 될 것이다. 그렇다면 렌더링 속도가 느리다는 기준은 무엇일까?여러 자료들을 찾아보며 내린 결론은 다음과 같다.상호작용에 대한 응답 : 100ms이하로 응답해야 한다.애니메이션 : 각 프레임당 16ms..

React Hook에 대해 공부하며 정리한 글입니다. 피드백은 언제나 환영입니다.useMemo과 useCallbackuseMemo는 리렌더링 사이에 계산 결과를 캐싱(메모이제이션)할 수 있게 해주는 React Hook으로 React는 초기 렌더링 중에 calculateValue 함수를 호출한다. 그리고 마지막 렌더링 이후 deps가 변경되지 않았을 경우 저장된 값을 반환하거나 변경되었다면 calculateValue를 다시 호출해서 반환된 값을 저장하고 반환한다. 참고로 React는 캐싱된 값을 특별한 이유가 없는 한 버리지 않는다.const cachedValue = useMemo(calculateValue, dependencies)// examplefunction TodoList({ todos, tab ..

React Hook에 대해 공부하며 정리한 글입니다. 피드백은 언제나 환영입니다.useEffect란?공식 문서에 따르면 useEffect란 렌더링 후 특정 코드를 실행해 외부 시스템과 컴포넌트를 동기화하는 hook이라고 한다. effect를 사용해 렌더링 후 특정 코드를 실행해 React 외부의 시스템과 컴포넌트를 동기화할 수 있다고 하는데 여기서 effect는 무엇을 의미할까?Effect란 무엇일까?렌더링 자체에 의해 발생하는 부수효과 (side effect)를 의미한다. 리액트의 함수형 컴포넌트는 props, state를 바탕으로 컴포넌트를 렌더링 하는데 컴포넌트의 렌더링과 무관한 연산들이 존재한다면 이것이 side effect가 되는 것이다.무관한 연산을 컴포넌트 내에서 직접 수행하는 것은 좋지 않..

React 동작원리에 대해 공부한 것을 정리한 글입니다. 피드백은 언제나 환영입니다!서론프론트엔드 역사 (React를 곁들인)2000년대까지는 LAMP 스택(Linux, Apache 웹서버, MySQL, PHP)이 강세였으며 웹 서버에서 HTML 페이지를 만들어 클라이언트에게 제공하는 방식으로 브라우저는 단순히 HTML 페이지 렌더링, JS는 폼 처리와 같은 부수적인 역할만 하는 방식으로 프론트엔드는 수동적인 역할이었다.2010년대부터는 웹소켓, 캔버스, 지오로케이션 같은 다양한 기능을 브라우저에서 제공하며 JS의 역할은 더욱 넓어졌다. 그러나 DOM API를 다루는 것은 까다로웠기에 JS 코드가 복잡해지게 되었다.간단한 예시로 DOM을 선택하는 방법에 대해 살펴보면 다음과 같다.ID 선택자를 활용하는 ..