문익점 스토리

안녕하세요. 문익점이에요. 문익점에 대해 아시나요? 목화씨를 가져온 문익점이요!

코딩

이번 포스팅에서는 Jest로 리액트 컴포넌트를 테스트하기 위해 Jest를 구성하는 방법, React Testing Library API 사용 방법을 소개합니다. Jest와 React Testing Library에 대한 설명은 앞선 포스팅을 참고해주세요. 우선 리액트에서 테스트를 진행하기 전에 Jest에서 어떻게 테스트 케이스를 작성하는 지 구조부터 보겠습니다. Jest의 구조 테스트 케이스를 만들기 전 연관된 테스트 케이스들을 하나로 묶는 방법이 있습니다. 바로 describe 함수를 사용합니다. 이 describe안에는 하나 하나 개별 테스트를 수행 할 수 있는데요. 그 작업은 test함수로 실행합니다. 아래 코드를 보실까요? describe("Calculate Number", () => { test(..

코딩

유닛 테스트(Unit Test)은 말 그대로 코드를 테스트하는 것이다. 개발자는 어플리케이션을 개발하면서 코드가 잘 동작하고 있는지, 앞으로도 변경사항에 유연하게 적응하며 동작을 할 지등을 매번 고려하게 됩니다. 테스트의 종류 대표적으로 UI Test, 통합 테스트(Integration Test), 단위 테스트(Unit Tes) 3가지로 구분합니다. UI Test 실제 사용하는 사용자들이 볼 수 있는 UI를 테스팅하며 최종적으로 어플리케이션이 정상적으로 작동하는지 검증하는 테스팅입니다. Integration Test (통합 테스트) 단위 테스트를 우선 수행하여 모듈들이 각각 정상적으로 작동이 되는 것을 확인했다면 이제 이 모듈들을 연동하여 테스트를 수행하게 되는데 이것이 통합 테스트입니다. 마지막으로 유..

코딩

에러처리 방법 AsyncBoundary를 이용해서 컴포넌트에서 일어나는 에러처리를 외부로 위임 했었습니다. Errorboundary는 Props로 Error 객체를 받을 수 있기 때문에 status code, flag, desc등 서버에서 주는 플래그에 따라 원하는 컴포넌트를 랜더링 할 수 있습니다. 이 포스팅에서는 AsyncBoundary를 이용하여 데이터 패칭을 하다 오류 발생 시 플래그에 따라 어떻게 처리 할 것인지에 대한 내용입니다. 다음 내용들은 AsyncBoundary의 구현체를 알고 동작 방식을 알아야 이해가 가능하므로 읽어주시면 감사하겠습니다. 맨 처음 데이터를 불러오다가 발생하는 에러 function FetchErrorPage() { return ( } SuspenseFallback={...

코딩

React를 사용 하다보면 컴포넌트 안 에서 데이터를 패칭해서 가져와야 할 때가 있습니다. 그 경우 컴포넌트안에 마다 axios를 호출하고 baseUrl를 매번 입력한다면 같은 코드가 반복되고 생산성이 떨어지게 됩니다. 이 경우 앞선 포스팅을 참고하면 Asyncboundary를 사용하면 데이터를 가져오는 작업을 더욱 수월하게 할 수 있습니다. 하지만 여기서 문제점은 가져온 데이터 data를 어떻게 관리 할지 입니다. 아래 코드를 봅시다. function Example() { let [data, setPhotos] = useState([]); function searchApi() { const url = "https://jsonplaceholder.typicode.com/photos"; axios.get(..

코딩

// .idea/modules.xml 파일 삭제 $ git rm --cached .idea/modules.xml // .idea 폴더 하위의 모든 파일 삭제 $ git rm --cached -r .idea/

코딩

앞선 포스팅에서 Suspense와 ErrorBoundary를 이용 했을 때의 이점에 대해서 포스팅 했습니다. 이제는 이 두 컴포넌트를 하나로 합쳐서 더욱 사용하기 쉽게 만드는 방법에 대한 포스팅입니다. 현재는 두 가지 컴포넌트로 감싸야 한다. function Main() { return ( ) } UserInfo 컴포넌트안에서는 API 패칭이 일어나고 있고 데이터를 가져오는 동안에 랜더링 처리는 Suspense에 위임하고 있고 발생하는 오류(에러)처리는 ErrorBoundary로 위임 하는 모습입니다. 이 방식을 사용할려면 항상 두 가지의 컴포넌트로 감싸 주고 있는 모습을 볼 수 있습니다. 매번 데이터를 가져와서 랜더링 하는 컴포넌트를 사용 할 때마다 이 두 가지로 감싸줘야 한다면 그것도 매우 피곤한 일..

코딩

웹이나 앱은 대부분 처음 입장하게 되면 서버에서 받아온 데이터가 모두 준비되어야지만 정보를 보여줄 수 있습니다. 서버에서 데이터를 받을 동안 아무런 표현이 없다면 사용자는 아무런 사진과 버튼이 없는 흰 백지 페이지에 당황스러울 것 입니다. 이를 극복하기 위해서 데이터를 가져오는 동안에는 로딩스피너나 스켈레톤 UI를 많이 사용하게 됩니다. 이렇게 된다면 데이터를 서버에서 받아오는 동안에는 스켈레톤UI를 보여주게 되어 사용자가 데이터를 받아오는 중이라고 인식하게 됩니다. 또한 데이터를 불러오는 동안 오류가 발생하거나 데이터를 요청한지 너무 오래 걸렸거나 여러 예상치 못한 오류가 발생하거나 등등 에러 상황이 발생했다면 이를 사용자에게 알려줘야 합니다. 이러한 처리가 없다면 사용자는 한 평생동안 로딩UI만 쳐다..

코딩

cra로 프로젝트 생성 한 뒤 eslint 옵션 중 특정 옵션만 끄고 싶을 때가 있습니다. 예를 들어 no-empty-pattern 옵션 하나만 한번 꺼보도록 하겠습니다. eslint 설정을 수정해야 합니다. 수정하기 위해서 eject를 해줘야 합니다. $ npm run eject eject 후 pacakage.json를 수정해야합니다. eslintConfig에서 rules에 아래와 같이 추가 합니다. no-empty-pattern 옵션은 "off"로 꺼줍니다. eslint server를 재시작해줍니다. (cmd + shift + p로 바 실행) 짜잔