메가테라63 PATCH 로 객체 수정 후에도 프론트에서 즉시 반영이 안되는 현상/동기 비동기처리 [20221126-TIL] 원인 1.동기 비동기처리 원리 동기 비동기 처리의 개념을 알아야한다. Api서비스에서 async await 로 받아온 객체들은 apiService 함수를 가져다 모든 하위 컴포넌트에서 async await의 적용이 필요하다. Apiservice에서 async await 처리 async patchIntroduction(introduction) { const url = `${baseUrl}/admin/grammar-introduction`; await axios.patch(url, { introduction, }); } 그것을 받아오는 스토어에서도 async await 처리 async patchIntroduction( introduction, ) { await grammarAdminApiService.pat.. 2022. 11. 26. useEffect 무한 렌더링 문제, forceUpdate 후에도 계속 이전 텍스트가 화면에 남는 문제 [20221125 -TIL] 오늘은 이전부터 자주 겪었던 useEffect 의 무한 렌더링 문제와 화면에 계속 이전 데이터가 남아있는 문제를 해결해서 적어보려고 한다. 사실 자주 겪었던 고통이라 꼭 한 번 정리했어야했지만 여태 잘 이해를 하지 못해 제대로 정리를 못했었다. useEffect 무한루프 문제 useEffect 내부의 함수가 계속 렌더링 되어 콘솔을 찍어보면 한없이 렌더링되고 있는 것을 볼 수 있다. 이건 주로 2가지 문제로 나뉘는데 1. useEffect의 두번째 인자를 넣지 않음 ( 종속되는 배열이 없을때) useEffect(() => { console.log('is Listening'); forceUpdate(); }); useEffect에 두번째 인잘르 넣지 않았을때에는 아래와 같은 상황에서 useEffect가 실.. 2022. 11. 25. @Mock과 @MockBean의 차이는 뭘까? 자바 스프링부트로 테스트 코드를 짜던 중 Mock 어노테이션과 MockBean어노테이션이 있어 어떤 것을 이용해야하나 고민을 하다 둘의 차이가 궁금해졌다. @Mock 과 mock(*.class) 그리고 Mock어노테이션과 mock(*.class)의 차이도 궁금했는데 이는 방법의 차이라고한다. 1. 어노테이션 테스트할 곳에서 필드화 시켜놓은 곳에서 @Mock 을 선언해준다. @Mock private PostRepository postRespository 2. mock( ) PostRepository postRepository = mock(PostRepository.class); @MockBean이란? @MockBean은 스프링 부트 테스트에서 제공하는 어노테이션이다. @MockBean은 스프링 컨텍스트에 .. 2022. 11. 24. TDD, 리액트 프론트엔드 테스트 코드 범위 정하기[20221123-TIL] 메가테라에 오고 나서 신입 개발자인 우리에게 가장 중요한 게 기대하면서도 가장 기초적인 것은 테스트 코드이다. TDD형식으로 프로그래밍을 한다라고 말을 하기에는 아직 미숙할지라도 분명 나와 동기 모두는 테스트 코드를 작성해가며 프로그래밍을 해가고 있다. 이는 백엔드 프런트엔드 모두에 해당한다. 1. TDD?(Test Driven Development)테스트 주도 개발 한 문장으로 설명하기는 어렵지만 TDD란 반복 테스트를 이용한 소프트웨어 방법론으로 작은 단위의 테스트 케이스를 작성하고 이를 통과하는 코드를 추가하는 단계를 반복하여 구현하는 방식이다. 이로써 처음에는 작은 단위로서의 green들이 리팩토링을 통하여 더 나은 코드가 되고 또한 코드의 작동성 또한 검증해나가면서 개발을 해나간다고 할 수 있다.. 2022. 11. 23. 이전 1 2 3 4 5 6 7 ··· 16 다음
