✅ 오늘 한 일
- 팀원들에게
Custom Hook사용법을 공유했다.
라이브코딩으로 팀원들이 직접 구현해본 덕분에 커스텀훅의 장점을 잘 전달할 수 있었던 것 같아 매우 뿌듯함! - 프로젝트 마무리
어느정도 프로젝트를 마무리했다. 처음부터 무리하게 기획을 하지 않아 편안한 마음으로 구현해 나갈 수 있었다. 그래서 저녁 시간에는 팀원들과 커스텀훅 스터디를 하는 여유도 부렸다!
기능은 최소화했지만 어려운 로직을 생각해볼 시간이 많아 좋았고, 자랑할만한 퀄리티가 나온 것 같아 만족스럽다.
1. Home UI 수정
자스민 이미지를 배경 이미지와 분리해서 반응형 레이아웃을 적용했다.
Feature/home UI enhancement #16
개요 🔎
Home UI를 수정했습니다.
작업사항 📝
- 배경이미지와 Jasmin 이미지를 분리했습니다.
- 배경이미지를 랜덤으로 불러오는 기능을 추가했습니다.
- 이외 Home UI를 수정했습니다.
2. Open Graph Tag, Favicon 추가
OG Tag를 추가하면 완성도가 확 올라간다. 너무 맘에드는 로고!!!!!!
<meta name="title" content="쟈-스민" />
<meta name="description" content="책의 향기를 따라... 쟈-스민 🌺" />
<!-- OG TAG -->
<meta property="og:title" content="쟈-스민" />
<meta
property="og:image"
content="https://user-images.githubusercontent.com/88768022/215034375-60315479-3c79-484a-a0c3-a6afcb9d2609.png"
/>
<meta property="og:url" content="https://jasminebook.vercel.app" />
<meta property="og:description" content="책의 향기를 따라... 쟈-스민 🌺" />
<meta property="og:type" content="website" />
<title>쟈-스민</title>
<!-- FAVICON -->
<link rel="icon" type="image/x-icon" href="/images/favicon.png" />3. 마커 오버레이에 서점 정보 표시
원본 데이터를 가공해서 지도에 오버레이를 표시한다.
개요 🔎
마커의 오버레이에 서점 정보를 표시합니다.
작업사항 📝
- Overlay 컴포넌트에서 서점 데이터에 따라 조건부 렌더링을 구현했습니다.
- 텍스트가 요소를 벗어나는 스타일링 오류를 수정했습니다.
- 이외 스타일링을 수정했습니다.
💡 오늘 배운 것
- div 요소 밖으로 텍스트 넘치는 현상 방지
white-space: pre-wrap;
- 부모 요소에서 상대적으로 위치 이동
transform: translate(-50%, -115%);
🏃♀️ 학습할 것
- React Query Firebase - 이런게 있구나
Redux - Redux Thunk강의 듣기
리덕스가 너무 싫어서 리액트 쿼리로 바로 건너 뛰어버렸는데 그러면 안됐던 것 같다. 어쨌든 리액트 환경에서 리덕스가 왜 필요한지, 미들웨어가 왜 필요한지, 리액트 쿼리와 리코일은 어떤 점을 보완해주는지를 알아야 한다.TypeScript강의 마저 듣기
💭 오늘의 잡담
- 10년이 지나도 습관은 못고친다 하핫 늦/낮잠과 게으름과 벼락치기는 내 삶의 이유 ♥️
Software Engineer 🍊