728x90 728x90 개발일지10 [2023.05.15 개발 일지] 리액트 skeleton UI 구현하기 [2023.05.15 개발 일지] 리액트 skeleton UI 구현하기 주요 업무 내용 skeleton UI 구현 자바 책 읽기 skeleton UI 구현 포켓몬 리스트를 불러올 때 로딩상태에서 gif를 사용했었다. 이것도 나쁘지는 않지만 허전한 느낌을 지울 수 없고 화면전환이 매끄럽지 않다. 그래서 프론트엔드가 잘 구현된 사이트에서 볼 수 있는 skeleton UI를 구현해보려고 한다. skeleton UI는 사용자에게 로딩중임을 알리고 로딩중에 레이아웃을 유지하여 부드러운 화면전환이 가능하다. 실제 데이터의 형태와 유사한 형태라 어떤 종류의 데이터가 로딩될 것인지 예상하고 다양한 로딩 영역에서 일관된 로딩 표시를 제공하여 일관된 사용자 경험을 제공한다. 처음에는 많이 사용되는 react-loading.. 2023. 5. 15. [2023.05.13 개발 일지] 리액트 desktop 반응형 대응하기 [2023.05.13 개발 일지] 리액트 desktop 반응형 대응하기 주요 업무 내용 desktop 반응형 대응 크롬 개발자 도구에서 화면 크기별로 테스트 해보는 중에 1024px에서 문제가 발생했다. 1024px를 데스크탑의 최소 크기로 정해놓고 반응형을 구현했다. 그래서 1024px 부터 헤더에 검색바와 desktop navigator가 보여야하고 로고는 좌측에 배치되어야 한다. 하지만 딱 1024px에서만 문제가 발생한다. const StyledNav = styled.nav` display: flex; align-items: center; justify-content: center; height: 100%; color: #FFF; @media screen and (max-width: 1023px).. 2023. 5. 13. [2023.05.11 개발 일지] 리액트 Input 디바운스 구현하기 [2023.05.11 개발 일지] 리액트 Input 디바운스 구현하기 주요 업무 내용 Input 디바운스 구현하기 Search Loading Spinner 구현하기 리액트 책 읽기 Input 디바운스 구현하기 실시간 검색에서는 input에 입력을 받을 때마다 api호출을 하고 입력 값에 맞는 api 호출 결과를 보여주게 된다. 이 경우에는 포켓몬의 정확한 영문명 혹은 id 값을 통해서 api를 호출하고 해당 포켓몬 결과를 보여준다. 그렇기때문에 정확한 영문명이나 id를 입력하기 전까지는 api 호출을 하더라도 404에러가 발생할 것이다. 오류가 발생할 것이 자명하고 서버의 자원을 낭비하지않기 위해서 디바운스를 통해서 입력을 일정 시간 기다렸다가 api를 호출한다. const onFetchHandler =.. 2023. 5. 12. [2023.05.10 개발 일지] 리액트 backdrop 구현하기 [2023.05.10 개발 일지] 리액트 backdrop 구현하기 주요 업무 내용 Search 바 backdrop 구현 리액트 책 읽기 Search Input이 focus되었을 때 배경이 검게 되어 검색창에 시선이 집중 되도록 하면서 주변 다른 컴포넌트와 겹치지 않도록 하려고 한다. backdrop은 보통 Modal에서 많이 사용하는데 Modal과 같은 원리로 구현하면 된다고 생각했다.input에 focus가 되었을 때의 isFocused 상태일 때만 Backdrop 컴포넌트가 렌더링 되도록 하는데 ReactDOM의 portal을 이용한다. index.html의 root 요소 위에 backdrop-root를 만들어서 backdrop이 화면 위를 덮도록 한다. {isFocused && ReactDOM.cr.. 2023. 5. 11. 이전 1 2 3 다음 728x90 728x90
