728x90 728x90 개발일지10 [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. [2023.04.27 개발 일지] 리액트에서 three.js 사용하기 [2023.04.27 개발 일지] 리액트에서 three.js 사용하기 주요 업무 내용 리액트에서 three.js 사용 3D 모델 띄우기 애니메이션 적용하기 sketchfab에 무료로 제공되고 있는 이 3D 모델을 메인 페이지에 three.js를 사용해서 띄우고 싶었다. react에서 three.js 사용하기 위해서는 주로 React Three Fiber를 사용한다고 한다. React Three Fiber는 컴포넌트 기반으로 간단하게 Three.js를 사용할 수 있으며 WebGL 기능을 최적화하여 렌더링속도를 높인다. 또한 React-three/drei라는 React Three Fiber의 확장 라이브러리를 통해서 React Three Fiber에서 사용할 수 있는 OrbitControls, Sky, En.. 2023. 5. 1. 이전 1 2 3 다음 728x90 728x90
