Performace 기존 무한 스크롤을 구현했던 방식은 Scroll Event를 이용하여 현재 스크롤 위치와 전체 스크롤 크기 등을 이용한 로직이었습니다. 해당 로직은 문제점이 있었는데요. 스크롤을 움직이면 1초안에 굉장히 많은 Event가 발생하게 되면서 위 퍼포먼스 성능과 같이 1000ms 당 약 160ms를 스크립트가 차지하게 되는 문제였습니다. 사실 최근 개인 컴퓨터의 성능과 서버의 성능이 많이 좋아지면서 체감하기 어려울 순 있습니다. 하지만 항상 최선만을 염두에 둘 순 없습니다. 만약 성능이 안좋다면 유저에게 최악의 경험을 안겨주게 됩니다. 두 가지의 개선 방법이 있었습니다. 쓰로틀링과 인터섹션 옵저버 입니다. 제가 처음 사용을 고려했던 것은 쓰로틀링 이었는데요. 문제가 있었습니다. 이에 대해 ..

프로젝트의 배포 이후, 어떻게 해야 코드나 성능을 개선할 수 있을까에 대해 고민하고 있었습니다. 제일 먼저 접했던 것은 컨퍼런스에서 소개 된 CleanCode 를 적용해 '코드를 개선하는 것' 이었는데요. (*참고했던 컨퍼런스는 Toss 개발자인 '진유림' 씨의 실무에서 바로 쓰는 Frontend Clean Code 입니다.) 안타깝게도, 이 적용법은 조금 더 공부가 필요해 보였습니다...😢 (물론 이후에 본 프로젝트 코드를 이용해 레거시를 걷어내고 클린코드 적용해 볼 예정입니다.🙌) 또 다른 방법도 있나.... 했더니 있었습니다! 크롬에서 제공하는 성능 분석 도구인 LightHouse를 사용하는 것인데요. 이 도구는 안타깝게도 로컬 PC 환경이나 해외 사이트 등을 조사하거나 하는 등의 이유로 매번 성능..

🎈 왜 스크롤 형식으로? 여러 방식을 고안해봤는데, 한 뷰에 하나 또는 2개 이상의 컨테이너를 띄우는 경우를 나누지 않고 가장 편하게 구현할 수 있을 것 같았다. 🎈 구현 방식 const currentRef = useRef(null); const next = (ref) => { const offsetX = ref.current.offsetWidth; ref.current.scrollBy(offsetX, 0); }; next(currentRef)}> React Hook의 useRef를 이용하여 캐러셀 전체 영역을 저장하고, 버튼을 만들어 offsetWidth로 현재 보이는 영역의 width를 얻어서 버튼을 누르면 그 만큼을 +로 옮기면 완성! (css는 생략했지만 scrollX는 hidden으로 변경해줘야..

🎈 직접 구현하는 이유? 리액트에서는 보통 react-datepicker라는 기존에 잘 만들어진 라이브러리를 많이 사용한다. 하지만 내가 원하는 기능, 원하는 디자인 대로만 수정하는 것은 다소 번거롭다. 때문에 나는 언제든 원하는 기능과 디자인으로 수정을 용이하게 할 수 있도록 datepicker를 직접 구현해 보았다. 📢 구현 중 사용되는 것 1. 먼저 moment라는 라이브러리에 대해 알아두어야 한다. 이 라이브러리는 달력에 표시되는 요일 등을 대신 계산해준다. 이 계산 또한 직접하려면 해당 알고리즘을 이용해서 구할 수 있으나 여기서는 moment를 이용하였다. 2. 선택된 날짜나 현재 달력에 표시되는 연도 등을 useState라는 리액트 훅을 이용하여 관리한다. ( * 변경 시 render되도록 )..

🖐 오랜만에 글을 남기게 된 이유와 최근 근황 지난 한달 간, 기획부터 각종 문서적인 설계 그리고 구현까지 굉장히 바빴다. 웹으로 기획하는 첫 프로젝트인 만큼 기본적으로 배워야 할 것들이 많았다. 특히 Rest API를 설계하고 구현하면서 잦은 수정 사항이 생기고 있다..😥 또 Axios, Redux 등을 독학하면서 프로젝트에 녹이다보니 그 과정이 조금 오래걸렸다. 1달이 지난 지금은 어느정도 사용방법도 알게됐고, 동작 과정을 얇게나마 알게되어서 현재는 개발 속도가 좀 붙었다. 걱정되는 것은 제대로 배우고 있는건지, 제대로 된 방법으로 사용하고 있는지 리뷰해줄 튜터가 없어 너무 아쉬운 상황이다. 🖐 어떤 것을 구현했을까? 1. NavigationBar 와 next-link 를 이용한 라우팅 2. 구글, ..

🖐 팀 프로젝트를 시작한 이유 좀 뻔한 이야기겠지만, 학부생부터 느낀 것이 프로젝트를 하면서 배우는 실력의 폭이 정말 엄청나다는 것이다. 그렇기에 구글링과 무료 강의들로 익힌 문법과 프레임워크를 좀 더 실무와 가깝게 실력을 키우고 싶었다. 🖐 어떻게 팀을 꾸리게 되었는가? 먼저, 팀을 구한 방법은 오픈카톡 이었다. 개발자 구직 관련한 다양한 정보와 궁금한 정보를 물어보기 위해 참여했던 오픈카톡 방에서 마침 프로젝트 공고가 올라왔다. 사실 이전에도 이 프로젝트와 다른 여러 프로젝트 공고가 올라왔지만 탐탁치 않았다. 프로젝트에 대한 기록을 제대로 하지 않는 프로젝트 라던지, 개발 스택이 다른 이런 이유였다. 하지만, 이번 공고는 기록 방식이 마음에 들어 먼저 연락을 해보았다. 대화를 잠깐 하고, 구인하시던 ..