TIL

[TIL] 20220720 리액트 테스팅, 리액트 성능 최적화

자바칩 프라푸치노 2022. 8. 4. 09:10

1. 프론트엔드에서 테스트코드(리액트 테스팅)

https://learn-react-test.vlpt.us/#/

 

벨로퍼트와 함께하는 리액트 테스팅

 

learn-react-test.vlpt.us

프론트에서도 테스팅을 하는지 궁금해서 찾아봤다. 

일단 한번도 테스트를 해본 적이 없어서 하는지 조차 궁금했다. 

다른 회사에 있는 프론트 개발자에게 물어보니까 프론트는 디자인변경에 따라서나 백엔드 로직 변경에 따라 코드가 변해야할 일이 많아서 오히려 테스트 코드를 짜는게 더 비효율적이기 때문에 테스트코드를 짜지 않는다고 한다. 

여기에 대해서는 더 알아봐야겠다.

 

 

 

2. 리액트 18 주요 변경점

https://velog.io/@woodong/React-18-%EC%A3%BC%EC%9A%94-%EB%B3%80%EA%B2%BD%EC%A0%90

 

React 18 주요 변경점

React-18v 부터 상태 업데이트(setState)를 하나로 통합해서 배치처리를 한 후 리렌더링을 진행합니다.리렌더링 관련 성능 개선과거 React-17v 에서는 이벤트 핸들러 내부에서 발생하는 상태 업데이트

velog.io

 

 

 

 

3. 리액트 성능 최적화 방법

https://velog.io/@shin6403/React-%EB%A0%8C%EB%8D%94%EB%A7%81-%EC%84%B1%EB%8A%A5-%EC%B5%9C%EC%A0%81%ED%99%94%ED%95%98%EB%8A%94-7%EA%B0%80%EC%A7%80-%EB%B0%A9%EB%B2%95-Hooks-%EA%B8%B0%EC%A4%80

 

React 렌더링 성능 최적화하는 7가지 방법 (Hooks 기준)

오늘은 그동안 React를 공부하고 알아왔던, class기반이 아닌 hooks 기반의 성능 최적화에 대한 방법들을 포스팅 하고자 한다.먼저 컴포넌트의 리렌더링 되는 조건은 아래와 같다.부모에서 전달받은

velog.io

https://cocoder16.tistory.com/36

 

리액트 렌더링 최적화하는 8가지 방법과 고찰

서론 이 글은 함수형 컴포넌트, 클래스형 컴포넌트 상관없이 공통적으로 적용되는 렌더링 최적화 이야기와 hooks를 사용하는 함수형 컴포넌트에서 구체적으로 어떤 기능들을 사용해 렌더링 최적

cocoder16.tistory.com

https://kyounghwan01.github.io/blog/React/optimize-performance/bundle-analyzer/#%E1%84%89%E1%85%A5%E1%84%85%E1%85%A9%E1%86%AB

 

react - lighthouse를 이용해 성능 최적화 하기 - 초기 렌더링 시간 감소하기

react - lighthouse를 이용해 성능 최적화 하기, performance, bundle-analyzer

kyounghwan01.github.io

 

 

 

 


4. 오늘의 회고

이런 생각이 들었다. 나는 ui ux도 관심있고, 남들이 다하는 타입스크립트도 하고 싶고

인터렉션있는 웹사이트도 만들어보고 싶었던 사람인데 요즘은 왜 그런생각이 안들지?

프로젝트 초기에는 새로운 기술을 쓰다보니 공부해야할 것도 많고 기능 개발할 때 에러사항이 많았는데

지금은 거의 비슷한 코드를 찍어내듯이 개발하고, 큐에이 나오는 것들이 기능에서 에러난게 별로 없다보니 발전이 없는 느낌.

그리고 그에 맞게 내가 적응해서 내 의지도 발전이 없는 느낌.

일이 지루하다고 느낄때 일의 난이도를 높여야한다고 말했다. 함께 자라기 책이었나?

생각해보자 어떻게 일의 난이도를 높일 수 있을까? 

지금 wms코드를 보면 답답~~~하다. 

코드가 지멋대로 짜져있다. 리팩토링 하고 싶다. . . . 그래 하자!!!!!!!!!!

 

728x90