nextjs (3) 썸네일형 리스트형 [유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 프로젝트주차 7주차 후기 마지막 주와 성과발표회를 보면서 느낀점을 작성해보고자 한다. 1. Algolia 적용 실패이번 프로젝트에서 검색기능을 구현하면서 Algolia라는 검색 라이브러리를 추가하려고 시도했다.데이터베이스로 사용한 firebase의 검색기능은 두가지 문제점을 가지는데, 첫번째는 prefix(접두어) 검색밖에 지원되지 않고 두번째 문제는 fulltext검색/멀티 필드 검색이 안된다는 것이다. 일단 우리가 검색해야하는 데이터는 크롤링한 기사이기에 검색기능을 높일 필요가 있었다. 단순히 쿼리로 구현한 검색은 제목을 대상으로한 접두어 검색만 되었고 검색의 정밀도가 부족하다고 느꼈다.firebase가 추천하는 추가 검색엔진은 elasticsearch, algolia, typesense였는데, 그 중 블로그 글을 보고 al.. [유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 프로젝트주차 4주차 후기 1. lighthouse 점수를 위한 공부lighthouse는 프론트엔드 배포를 했을 때, 얼마나 최적화가 잘 되어있는지 점수로 나타내는 지표이다. 여러가지 요소가 있지만 일단 SSR을 SSG로 바꾸는 것을 공부했다.이렇게 react기반에서 데이터패칭을 한다고 생각하면 useState와 useEffect를 함께 사용해서 하는 것이 일반적이다. useEffect를 사용해서 패칭한 데이터를 state에 담아서 뿌려주는 방식이다. 사진에서는 더미데이터를 사용했다. 하지만 실제로 http 요청을 하는 상황에서는 이야기가 달라진다. useEffect는 컴포넌트 함수가 실행되고 난 이후에 실행된다. 처음 이 홈페이지 컴포넌트가 렌더링될 때 loadedMeetups는 비어있는 배열이다. 그 다음에 useEffect .. [유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 프로젝트주차 3주차 후기 3주차에는 지난 컴포넌트의 마무리와 퍼블리싱을 진행했는데, Landing 페이지의 퍼블리싱을 맡게 되었다. 이번 프로젝트에선 UI 테스트 자동화를 위해서 storybook을 적용했는데, 이것이 약간 어려워 작업속도가 더뎠는데, 만들어 놓고나니 활용도도 높고, 특히 공통 컴포넌트를 만들면 그 코드를 다른 팀원이 사용해야 하기에 storybook을 보고 용례를 짐작할 수 있어 좋았다. 아무래도 이런 것이 없다면 일일히 UI를 써봐야되고 시행착오에 시간이 소요되기에 개발과정이 더 오래 걸리게 되는 것이다. 이번에 스토리북을 사용하면서 조사한 내용를 정리해보려 한다. 1. 스토리북이란Storybook은 React, Angular, Vue 등의 분리된 UI 컨포넌트를 체계적이고 효율적으로 구축할 수 있는 개발 .. 이전 1 다음
