문익점 스토리

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

코딩

에러처리 방법 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로 바 실행) 짜잔