서론

레티 프로젝트를 같이 했던 쥑님과 다시 한번 같이 재밌는 프로젝트를 진행하고 싶은 마음이 있었는데 올해 함께하게 되었다! 그렇게 나비님도 합류하게 되었고 팀이 결성됐다. 나비 🦋 님, 쥑 🐹 님, 나(람쥐) 🐿️ 가 모여서 나람쥑이라는 이름을 가지게 되었다. 어쩌다보니 모두 동물(?)

팀의 목표는 재밌고 실제 사용자가 있는, 사용하고 싶은 프로젝트를 만드는 것이었다. 많은 아이디어 중 초기 아이디에이션 과정 중 나왔던 트친소(트위터 친구 소개)로 채택되었다.

아직 프로덕트 이름은 정해지지 않았지만 트위터 사용자들이 명함을 주고받을 수 있는 프로젝트이다. 피그마부터 기획회의를 이틀만에 끝내버렸다..! 사실 프로젝트를 할 때마다 제일 힘들고 오래 걸리는 과정이 기획이라고 생각하는데 팀원분들이 긍정적이고 굉장히 수용적이셔서 이틀안에 끝낼 수 있었다고 생각한다. 실사용자들을 모으고 피드백을 받으며 개발하는 방식으로 간단하고 빠르게 진행하기로 했다.

프로젝트 초기 단계

기획을 하면서 요구사항을 분석하고 바로 개발에 들어갔다. 초기 요구사항은 다음과 같았다.

• 사용자 친화적인 UI
• 유동적이고 자유로운 문항작성
• 트위터 프로필 사진, 바이오를 크롤링을 통해 가져오기
• 명함 이미지 다운로드
• 프로필 링크로 연결되는 QR 코드

팀원들과 주로 디스코드로 소통하였고 매일 평일 오전 아침 9시마다 회의를 했다. 회의를 하다가 코어타임의 필요성이 느껴져 오전 9시부터 오후 12:30분까지 코어타임을 진행하고 있다. 원래 수면패턴이 오락가락했는데 나람쥑 회의를 하면서 나름 미라클 모닝하면서 살고 있다 🤣

쥑 🐹 님은 프론트, 나비 🦋 님은 풀스택, 나(람쥐) 🐿️ 는 백엔드 역할을 분담하게 되었다. 사실 처음엔 백엔드에 경험이 전무해서 겁이 났지만 감사하게도 나비님이 방향을 잡아주셔서 재미도 느끼면서 잘 해가고 있는 거 같다!

나비님이 이렇게 항상 스스로 막힘없이 공부할 수 있게 정리를 해주시거나 검색 키워드들을 던져주신다! 그저..감사 😇

지금까지의 진행 상황

우리 팀은 프로젝트의 백엔드와 프론트엔드 개발 모두 Next.js 를 사용하기로 했다. 계속 프론트엔드만 걸어왔던 내게 상대적으로 익숙한 프레임워크이고 Next.js 에 대해 좀 더 알게되는 계기가 되었다. 지금까지 만든 API 들은 다음과 같다.

fakebase 를 사용하여 CRUD API 만들기

fakebase는 나비님이 프론트만 공부해왔던 나를 위해 골라주신 로컬에 데이터가 저장되는 DB 라이브러리이다! 검색해보면 아무런 자료가 뜨지 않아서 처음엔 동공지진이 왔지만 겁 먹기보단 차근차근 리드미를 읽어보니 그렇게 무섭지 않았던 친구였다! 프론트엔드인데 러닝커브가 낮고 로컬로 저장할만한 DB 라이브러리가 필요하다면 강추한다.

명함 상세 페이지 API

위에서 만든 CRUD API 를 바탕으로 명함 상세 페이지 API 를 만들어보았다. 이 때 DB구조에 대해 생각해보라는 숙제를 받았는데 어떻게 짜야할 지 감이 안와서 검색하면서 다이아그램으로 그려보았다. 물론 위 다이아그램대로 구조가 나오진 않았지만 어느정도 큰그림을 잡는데 도움이 되었다!

트위터 정보 (프로필 사진, 바이오 등) 을 가져오는 API

트위터(현재는 X)를 크롤링하여 프로필 사진과 바이오를 가져오는 API 를 만들려고 했는데 트위터가 크롤링을 막아놨다는 소식을 들었다. 처음엔 이 기능을 빼야하나 아쉬움이 들었는데 어찌저찌 구현해서 기분좋다. Cheerio 와 Puppeteer 를 고민했는데 상대적으로 가벼운 Cheerio 를 사용하기로 했다. 하지만 트위터는 SPA 이라서 Cheerio론 크롤링이 불가능했고, IP 주소가 차단될 위험이 있었다. Nitter 라는 자바스크립트 없이 트위터를 구현한 프론트엔드 오픈소스 프로젝트를 발견했고 Nitter를 크롤링해서 API 를 완성했다.

퀵 링크를 만드는 API

여러 퀵 링크를 관리하기 위해, 리다이렉트 될 주소가 담긴 배열을 사용하고 includes메소드로 해당 주소를 찾는 O(n) 복잡도의 코드를 작성했다. 나비님의 리뷰를 통해 퀵 링크는 일시적인 링크이기에 배열로 관리하는 것은 비효율적이라는 걸 나중에 깨달았다. 키-값 쌍을 활용하는 해시 구조를 사용함으로써, 데이터 검색 시간을 줄일 수 있었다. 항상 더 효율적인 데이터 구조를 고민하고 코드를 작성해야한다는 걸 배웠다.

앞으로의 계획

다음 목표론 Satori 라이브러리를 통해 명함 이미지를 만드는 API 를 개발 할 것이다. 레티 프로젝트에서도 느꼈지만, 쥑님은 항상 필기를 꼼꼼히 하시고 문서화를 잘하신다. PR을 날리실 때도 꼼꼼하게 작업 내용을 정리하여 올리시는데 나는 두루뭉실하게 올렸던 거 같다. 프론트와 백엔드의 진행사항 파악을 위해서 이제부터 쥑님 PR을 참고하여 PR을 좀 더 꼼꼼히 올려야겠다. 또 나비님이 코드리뷰를 해주시면 미루지않고 바로 반영하여 PR을 올리도록 해야겠다. 나람쥑 모임에서 개발하는 것이 즐겁고 이렇게 좋은 팀원들과 함께 할 수 있어서 감사하다. 좋은 기회인 만큼 그에 맞당한 팀원이 되고싶다. 더욱 더 열정적으로 참여할 수 있으면 좋겠다.

KEEP

• 회의를 빠지지않고 참여하는 것.

PROBLEM

• 해야하는 일을 계속 미루는 것.
• 가끔씩 회의시간에 늦는 것.

TRY

• 9시 회의시간에 맞춰서 기상하지말고 조금 더 일찍 일어나서 해야할 일들을 해볼 것.
• 미루지 않고 회고록을 꾸준히 작성해볼 것.
• 코드리뷰를 바로 반영하고 PR 을 올릴 때, 작업내용을 꼼꼼히 작성할 것.
• 더욱 더 함께 소통하기.

프론트 쥑님의 나람쥑 회고 보러가기🐹