hani hani

https://hani-develop-history.tistory.com/42 동기와 비동기_1 오늘은 동기와 비동기에 대해 공부했다. 예전 직장에 다닐 때 성능 개선을 위해 비동기 작업에 대해 공부 했던 적이 있었다. 당시에 자사 프로그램이 동기적으로 작동해서 성능 부분에서 문제가 hani-develop-history.tistory.com 위에 글에 이어서 비동기 공부한 내용을 정리하고자 한다. JS에서 비동기 작업을 도와주는 객체 중 하나인 Promise에 대해 공부해봤다. Promise - 비동기 처리를 도와주는 객체 장점 비동기 처리 시점을 명확하게 표현할 수 있음 연속된 비동기 처리 작업을 추가, 삭제, 수정하기 좋음 비동기 작업 상태 종류 Pending: 대기 Fulfilled: 이행 reso..

오늘은 동기와 비동기에 대해 공부했다. 예전 직장에 다닐 때 성능 개선을 위해 비동기 작업에 대해 공부 했던 적이 있었다. 당시에 자사 프로그램이 동기적으로 작동해서 성능 부분에서 문제가 있었기 때문이다. 그래서 개념 공부를 하고 코드 작업을 시작하려고 했는데...!! 코드를 확인한 결과 다른 팀의 선작업이 필요한 상황이었다. 아쉽게도 내가 퇴사하기 전까지 다른 팀이 작업해주지 못해서 아쉽게도 성능 개선을 끝내지 못하고 나왔던 기억이 있다. 히히.. 그렇게 시간이 지나고 프로젝트를 하게 되었는데 짧은 기간 냉 기능을 구현해야하다보니 성능면에서 아쉬운 부분이 많았다. 어떻게 하면 성능 개선을 할 수 있을지 찾아보다가 비동기 처리를 해보기로 결정했다. 우선 개념적인 부분을 다시 정리해봤다. 동기 - JS는 ..

이제부터 본격적으로 렌더링 최적화 관련된 공부를 시작할 예정이다. 최근에 진행했던 1인 가구 플랫폼 소분소분 프로젝트를 리팩토링 하기로 했다! 첫 번째 대상은 바로~! 회원가입 페이지이다. 우선 라이트 하우스를 사용해서 점수를 확인해봤다. 멘토님께서 90점 이상을 받아야지 좋은 페이지라고 했기 때문에 90점을 목표로 성능 개선을 해보기로 했다. 일단 우선 큰 문제였던 리렌더링을 해결해보려고 한다. 회원가입 페이지의 경우 입력되는 데이터 종류만 다를 뿐 동작 방식은 같아 컴포넌트를 분리해서 재사용성을 높였었다. 위에 구조로 되어 있다보니 부모가 리렌더링되면 자식도 리렌더링 되는 문제가 발생했다. 그래서 나는 React.memo를 사용해보기로 했다. 이유는 부모 컴포넌트가 리렌더링 되더라도 자식 컴포넌트가 ..