Recap/bookshelf14 bookshelf 프로젝트 회고 bookshelf 프로젝트 링크들 배포 링크: https://bookshelf-bay.vercel.app 깃헙 레포지토리: https://github.com/yerinra/bookshelf 개요 나는 책 읽는 것을 좋아한다. 예전에는 무조건 종이책이 최고라고 생각했지만, 최근에는 부동산의 압박 때문에 전자책도 많이 읽는 편이다. 종이책과 전자책을 모두 읽게 되면서, 효율적인 독서기록의 필요성을 항상 느끼고 있었다. 기존의 온라인 서점들에는 책장 관리 기능이 있지만, 대부분 내가 구매한 전자책만을 관리할 수 있어서 제약이 있었다. 그렇다고 엑셀이나 수기로 관리할 수도 없고... 그래서 이 책장 앱을 기획하게 되었다. 해시태그 형식으로 책을 정리하면 좀더 읽은 책을 쉽게 파악할 수 있을 것이라는 생각에 해시.. 2024. 3. 9. lighthouse 점수 올리기 (접근성+SEO 개선) 프로젝트 마무리 후 lighthouse를 돌렸다. performance accessibility best practices seo 에 관한 점수를 확인할 수 있다. 번들 사이즈 최적화를 통해 퍼포먼스 점수는 올렸고 이제 접근성과 SEO를 개선할 차례! 접근성 접근성 관련해서 개선한 점은 개발 도중 잠시 잊고 있던 img 태그의 alt 어트리뷰트! 이미지가 표시되지 않는 경우를 위해서도 있지만, 시각적으로 장애를 가진 사람들을 위해서 스크린리더가 읽어줄 텍스트가 되어주기도 한다. 모든 img 태그에 alt text를 열심히 달아주었다. SEO SEO와 관련해서는 할 일들이 훨씬 많았다. 리액트는 SPA이기 때문에 SEO와 관련해서 취약하다. react-helmet-async를 통해서 개선했다. 리액트 헬멧.. 2024. 3. 7. [리팩토링 #03.] useMemo()로 리팩토링하여 성능 최적화하기 useMemo()란? 컴포넌트 내에 함수가 있다면, 컴포넌트가 렌더링 될 때마다 함수는 계속 다시 호출된다. 불필요한 함수 호출을 막기 위해 useMemo를 쓸 수 있는데, useEffect와 사용방법이 비슷하다. 첫 번째 파라미터로 계산하고 싶은 그 함수를 넣어주고, 두 번째 파라미터로 의존성 배열을 넣어준다. 따라서 의존성 배열 내에 들어있는 값이 변경될 때에만 재계산(호출)되고 그렇지 않으면 cache, memoize 된다. (재계산을 하지 않는다.) import { useMemo } from 'react'; function TodoList({ todos, tab, theme }) { const visibleTodos = useMemo(() => filterTodos(todos, tab), [tod.. 2024. 2. 28. [리팩토링 #02.] 아토믹 디자인 패턴 Atomic Design Pattern 적용하기 아토믹 디자인 패턴 원래는 /components 내에 모든 컴포넌트 코드들을 한꺼번에 집어넣었었는데 리팩토링을 진행하면서 아토믹 디자인 패턴을 적용하기 위해 디렉토리 구조를 /atoms, /molecules, /organisms, /templates, /pages로 나눴다. 그리고 /pages는 원래부터 /components 밖에 있었기 때문에 그냥 그 위치를 유지하기로 했고 나머지 디렉토리는 /components 내에 위치하도록 했다. /atoms 가장 작은 컴포넌트 단위이므로 , , 같은 html 요소들. /molecules atom들의 조합 /organisms 와 같은, atom들과 molecule들의 조합. /templates 페이지의 레이아웃, organism들의 조합. /pages 느낀 점 a.. 2024. 2. 25. [에러 해결] Firebase Error: No document to update Firebase Error bookshelf 프로젝트를 하던 중 발생한 문제. document를 삭제했을 때 이런 오류가 발생했다. 오류에서 친절하게 알려주고 있듯이 document 삭제 후 이미 존재하지 않는(삭제된) document에 접근하고 있다는 것. const updateRating = async (isbn13: string, ratingCount: number) => { try { if (currentUser) { const arr: Book[] = []; const bookDocRef = doc(db, "users", currentUser, "books", isbn13); const querySnapshot = await getDocs( collection(db, "users", curren.. 2024. 2. 25. [리팩토링 #01.] 중복되는 코드를 Dumb component로 만들어 리팩토링하기 중복되는 코드를 Dumb component로 만들어 리팩토링하기 Tailwindcss Tailwind를 사용해서 스타일링을 하다보니 클래스네임이 너무 길어져서 정신이 없는 경우가 많다. 더군다나 버튼 같이 자주 쓰이고 스타일링도 필요한 요소들은 어떻게든 깔끔한 코드를 만들고 싶은 욕구를 불러 일으킨다. 이참에 기존의 정신없던 코드를 리팩토링 해봤다. 1단계(코드 수정 전) : 일반적인 태그에 긴 클래스네임을 달아서 스타일링을 한다. 😵💫 // LoginPage.tsx 회원가입 하기 구글 로그인 하기 물론 tailwind.config.js에 color명 같은 것은 따로 설정해 두는 것은 필수! // tailwind.config.js /** @type {import('tailwindcss').Config}.. 2024. 2. 25. 이전 1 2 3 다음
