728x90 728x90 전체 글153 [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. [2023.05.08 개발 일지] 리액트 실시간 검색 반응형 구현하기 [2023.05.08 개발 일지] 리액트 실시간 검색 반응형 구현하기 주요 업무 내용 MobileSearchInput 구현 실시간 검색창을 데스크탑으로는 구현했고 반응형으로 태블릿과 모바일 화면에서의 실시간 검색을 구현하려고 한다. 기능적으로는 완전히 동일한 로직이기때문에 그대로 사용하면 되지만 스타일링에 대한 대응이 되어있지 않아서 작업이 필요하다. 모바일 화면에서는 네비게이션바의 위쪽에 검색창을 배치하려고 하는데 대략 이런 느낌이다. 문제는 화면 크기에 따라서 데스크탑 검색창과 모바일 검색창이 보였다가 사라져야 한다. 기능적으로는 완전히 동일하기때문에 컴포넌트를 그대로 사용해야겠다는 생각이 들었다. 그런데 어떻게 해야할지 떠오르지 않는다. styled component를 이용해서 기존 컴포넌트에 스타.. 2023. 5. 10. [2023.05.05 개발 일지] 리액트 실시간 검색 구현하기 [2023.05.05 개발 일지] 리액트 실시간 검색 구현하기 주요 업무 내용 SearchResult 구현 input custom hook 구현 SPA로 구현된 사이트에서 자주 볼 수 있는 실시간 검색을 구현해보려고 했다. 여러 모로 생각할 점이 많은데 UI 구현부터가 어지러웠다. 다양한 방법이 있겠지만 보통은 input에서 검색어를 입력하면 input 아래에 리스트가 나타나는 형태일 것이다. 여러 사이트를 찾아보면서 최대한 깔끔하고 쉽게 UI를 구현하려고 했는데 그것도 어렵다. 대략 이런 느낌인데 왜 저 영역이 나타나지 않는 건지 헤맸다. position의 문제인가 해서 부모요소와 자식요소의 position과 관련된 스타일을 변경해보고 input, form, header 영역까지 스타일을 하나씩 제거해.. 2023. 5. 5. [2023.05.03 개발 일지] Github README 작성하기 [2023.05.03 개발 일지] Github README 작성하기 주요 업무 내용 프로젝트 README 세팅 Search bar 찾아보기 평소에 과제나 팀프로젝트가 아니라면 create-react-app으로 프로젝트를 생성한 후 README를 그냥 놔두거나 삭제해버렸었다. 토이프로젝트여도 개발한 프로젝트 공개를 단순히 링크로만 했었는데 이력서에 Github 주소도 공개하는데 README가 제대로 작성되어 있지않다는 점이 죄책감이 들었다. 그리고 배포까지 진행해보지 않았다면 개발을 다 했다고 할 수 없고 README를 작성하지 않으면 마치 과제를 해놓고 발표를 안하는 것과 같다는 생각이 들었다. 생각해보니 단순히 마크 다운을 활용해서 README를 작성하는 문법만 익혔고 글을 어떻게 작성해야 할지에 대해.. 2023. 5. 3. 이전 1 ··· 6 7 8 9 10 11 12 ··· 26 다음 728x90 728x90
