728x90 728x90 분류 전체보기153 [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. [2023.04.26 개발 일지] 로딩 상태 GIF Progress 적용 하기 [2023.04.26 개발 일지] 로딩 상태 GIF Progress 적용 하기 주요 업무 내용 GIF Progress 컴포넌트 구현 Flex 컴포넌트 구현 3D 모델 찾아 보기 프론트엔드에서 빠질 수 없는 것이 로딩 상태에 대한 사용자 피드백일 것이다. 포켓몬이라는 주제로 개발을 하고 있으니 단순히 로딩바를 보여주는 것보다는 포켓몬 관련 GIF가 좋을 것 같다. 역시 포켓몬은 상징성은 이 녀석을 이길 수 없을 것이다. 달리는 모습이니 로딩 상태에도 적절한 것으로 보인다. import styled from "styled-components"; const StyledProgress = styled.div` display: flex; flex-direction: column; align-items: cente.. 2023. 4. 30. 이전 1 ··· 11 12 13 14 15 16 17 ··· 39 다음 728x90 728x90
