프로젝트 캠프 : Next.js 2기 (14) 썸네일형 리스트형 [유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 프로젝트주차 7주차 후기 마지막 주와 성과발표회를 보면서 느낀점을 작성해보고자 한다. 1. Algolia 적용 실패이번 프로젝트에서 검색기능을 구현하면서 Algolia라는 검색 라이브러리를 추가하려고 시도했다.데이터베이스로 사용한 firebase의 검색기능은 두가지 문제점을 가지는데, 첫번째는 prefix(접두어) 검색밖에 지원되지 않고 두번째 문제는 fulltext검색/멀티 필드 검색이 안된다는 것이다. 일단 우리가 검색해야하는 데이터는 크롤링한 기사이기에 검색기능을 높일 필요가 있었다. 단순히 쿼리로 구현한 검색은 제목을 대상으로한 접두어 검색만 되었고 검색의 정밀도가 부족하다고 느꼈다.firebase가 추천하는 추가 검색엔진은 elasticsearch, algolia, typesense였는데, 그 중 블로그 글을 보고 al.. [유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 프로젝트주차 5주차 후기 이번주에는 Alert 컴포넌트 제작과 코드 분석 페이지 퍼블리싱 작업을 진행했다. 1.Alert 컴포넌트디자인이 중간에 수정되면서 Alert 컴포넌트가 생겼다. 코드를 분석할 때 alert으로 상태를 표시하고 프로그래스 바를 파일 아래로 옮겨 디자인이 간소화되었다. 정보알림이라고 이름이 붙은 alert를 보면 모래시계가 기울여져 있는데, 이 속성은 animate-spin으로 돌아가도록 지정했다. 원래 정보알림은 대기중에 해당하는 alert인데, storybook용으로 만들었기에 저렇게 설정되어 있다. 코드의 props를 잠깐 살펴보면 isShow는 button을 보일지 말지 설정하는 것이고 linkHref와 buttonProps로 버튼에 설정될 페이지 이동과 onClick 이벤트를 대비한 모습니다. .. [유데미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 컨포넌트를 체계적이고 효율적으로 구축할 수 있는 개발 .. Vercel 배포 방법 기록 Nextjs는 vercel사에서 개발한 프레임워크이기 때문에 가장 궁합이 좋다고 할수있다.지금부터 배포방법에 대해 기록해보자. 1. 일단 vercel 회원가입을 해준다. 이게 버셀 회원가입 페이지인데, 다른 사이트였으면 구글로 통일하는 것이 편했겠지만, 배포에 가장 많이 쓰이는 사이트인 만큼 GitHub 소셜 로그인이 가장 앞에 배치된 모습이다. 아무래도 배포할 코드가 직접 올라가는 깃허브 계정에 연결하는 것이 가장 편리하여 그것을 권장하고 있다.하지만 나는 깃허브로 가입하려 했을 때, 아래와 같은 경고를 받았는데, 직접 메일을 보내보니 버셀의 회원가입 담당자에게서 새로운 사용자가 악의적이거나 봇이 아닌지 확인하기 위해 검사를 진행였다는 답변이 오며 승인되었다. 나는 1주일 전쯤 한번 시도한 적이 있는데.. [유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 프로젝트주차 2주차 후기 본격적으로 프로젝트가 진행되었습니다. 우리가 맡은 프로젝트는스팩스페이스 - 플로디텍터-보안시장 이슈 시스템 개발인데, 일단 지난주에 작성한 다이어그램은 아래와 같다. 1) 객체 다이어그램2) 유즈케이스 다이어그램 생각보다 많은 기능이 있어 쉽지 않을 것 같아 보였다. 특히 실개발기간을 3주가 약간 넘는 기간으로 잡혀있어 일정이 빠듯해 보였다. 1. 공통컴포넌트첫째주는 공통컴포넌트 생성이 목표였다. 다음주 화요일까지 이 컴포넌트들을 활용해 퍼블리싱을 해야하니 꼼꼼하게 만들 필요가 있었다. 여태껏 필요하면 컴포넌트를 그때그때 만들어 썼고 재사용성을 고려해 만든 경우는 버튼 정도뿐이었다. 하지만 이번 교육기간에 배운 가장 큰 내용은 twMerge와 타입추론을 활용한 컴포넌트였다. 마지막으로 ts 프로젝트 작업.. [유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 프로젝트주차 1주차 후기 일단 프로젝트 시작에 앞서 수업 때 했던 내용인데 정리하지 못했던 부분들을 모아보려고 한다.1. MongoDB 설정Database를 누르면 클러스터의 정보가 보이는데, 커넥트 버튼을 누르고 Driver를 클릭해 보이는 주소를 복사한다. 이미 연결한 이력이 있다면 선택하는 부분은 나오지 않고 바로 주소가 나올것이다.이런 형태의 주소인데 정보를 가린 첫번째 부분은 userName이 들어가고 부분에 을 포함해서 지워주고 클러스터를 생성할 때 설정한 비밀번호를 입력해야한다. 오른쪽 버튼을 클릭해서 복사한 뒤 env에 MONGODB_URL= 다음 입력해준다. 강의에선 첫줄의 느낌표 앞에 test라는 키워드를 붙여줬는데, test라는 공간에다가 DB를 생성하겠다라는 의미다. 아래 명령어로 패키지를 설치해주고,np.. [유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 사전직무교육 2주차 후기 이번주는 React에 대해 배웠다. Next.js 프로젝트를 이전에 해본적이 있음에도 useState, useEffect, useSearchParams 정도만 써봤는데, hook을 본격적으로 배우니 유용한 훅이 참 많다는 것을 느꼈다. useRef는 포커스, 텍스트 선택영역을 관리할 때 사용한다. 회원가입 페이지에서 폼 내용 중 모자란 부분에 자동으로 커서를 포커스해주는 기능이 바로 그것이다. 그리고 useId를 uuid를 생성할 수 있다. 렌더링 최적화에 대해서도 배웠는데, useCallback, useMemo, React.memo 라는 것으로 memoization 해서 불필요한 렌더링을 줄일 수 있다는 것을 알았다. 최적화를 위해 캐싱만 쓰이는 줄 알았는데, 속도를 더 끌어올리고 리소스를 아낄 수 있.. 이전 1 2 다음
