2차 프로젝트: 🥕당근나라🥕 회고록

1. Introduce

당근마켓을 모티브로 한 프로젝트

개발에만 집중할 수 있도록 기존의 웹 기획과 디자인을 참고하여 하나의 사이트를 완성해보는 프로젝트. 라고 했으나... 앱에 집중된 당근마켓 서비스 상 개발 + 디자인까지 하게 되었습니다.

당근마켓은 위치기반 중고거래 서비스로 시작하여 지금은 동네소식, 동네 구인구직 등등 많은 서비스를 제공하고 있습니다.

• 프로젝트 목표: 복습 + 독학 + 실력발휘
• 진행기간: 2022년 04월 18일 ~ 2022년 04월 29일 (2주)
• 당근나라 팀: 프론트 4 백 1
• 당근나라팀 프로젝트 노션

Teck Stack

• Front-end: React.js, Router, styled-components, Context API, socket.io-client, jest, React-Quill
• Back-end: Node.js, Express.js, MySQL, bcrypt, jsonwebtoken, prisma, multer, socket.io
• 공통: RESTful API, MVC Pattern, Github, Slack, Notion

당근마켓 영상 보러가기!
당근마켓 사이트로! (현재는 사이트가 내려간 상태입니다.)

2. Why?

당근마켓을 선택한 이유

첫번째 프로젝트 때, 구현한 기능의 흐름이 끊기는 것과 백이 미흡했던 점이 아쉬움으로 남았습니다. 2차때에는 백과 프론트의 연결이 많은 서비스를 모티브로 해보고자 하는 계획이 있었습니다.
당근마켓은 서비스가 자연스러운 하나의 흐름이 있습니다. 글을 등록하고, 글 리스트를 불러오고 글을 수정하거나 삭제하는 CRUD 전체를 구현할 수 있는 서비스였고, 이점에서 백과 프론트의 균형이 잘 맞춰질 것이라고 생각했기 때문에 당근마켓을 선택하였습니다. (물론 투표했고! 만장일치였습니다~!)

3. What i do

담당과 관계없이 프론트엔드 코드를 모두 봐야했습니다. 아마 그런 게 당연한 거겠지만, 1차때는 처음하는 것이니 맡은 부분을 책임지는데 급급했다면 2차때는 5명이 한 몸이 된 것처럼 작업했던 것 같습니다. 그래서 정확히 제가 어느 부분을 담당했다고 말하기가 참 힘듭니다... 🥲

프론트

• 담당: Header, footer, districtInfo, list 공통 컴포넌트, 공통 버튼 컴포넌트, 동네정보 등록 UI, list api 연결, navigate 조작, 스크롤 조작, loding 컴포넌트, 커스텀 훅 등등....

주로 고민 했던 일은 '디테일 챙기기'였던 것 같습니다. 팀원분들의 피드백을 통해 사용자에게 쉬운 방향으로 계속 나아갔던 것 같습니다.

4. 회고

동기: 재미와 동료

두 번째인만큼 프로젝트 흐름이 어떻게 흘러가는지 알았기 때문에 마음에 여유가 있었습니다. 마음에 여유가 있는 만큼 여유롭게 생각해보고 다양한 시도를 해볼 수 있었습니다. 커스텀 훅이나 스크롤 고정 같은 디테일한 부분도 고려해볼 수 있었습니다.
1차때도 그랬지만, 좋은 팀을 만나는게 참 중요합니다. 이번 팀 프로젝트때 유독 재미있었던 이유는 서로 끈끈했기 때문인 것 같습니다. blocker를 만나면 같이 고민하고 해결하고, 그렇다고 마냥 기분좋은 이야기만 한 것은 아니었습니다. 좋은 방안에 대해 계속해서 이야기해나갔습니다. 마지막즈음에 갔을때는 아침에 하는 회의에서 '우리는 서로 진행사항을 잘 알아서 회의가 필요없을 정도다.' 라고 하는 말에 기억에 남습니다. 정말 한사람이 하는 프로젝트처럼 서로 서로 작업과 코드를 잘 이해하면서 진행했습니다.

반성: 아쉬움

뒷심 부족
프로젝트 진행속도가 빨랐습니다. 첫날에 메인과 nav, header가 완성되었으니 정말 빠른 속도였습니다. 급하게 해결이 필요한 사항들이 초반에 끝나니 뒤로 갈수록 마음이 느슨해졌습니다. 시작만큼 마무리도 중요하게 생각해야겠다는 다짐을 하게 되었습니다.

1차 때 아쉬웠던 부분은 2차때 해소했습니다. 그래도 여전히 아쉬운 부분이 있습니다. 좀 더 체계적으로 코드를 구성했다면? 코드가 읽기 좋게 정리하면서 했다면? 주석 등을 남겨서 팀원들이 빠르게 파악할 수 있게 했다면? .... 등등 많이 노력해도 매번 아쉬움이 남는 것 같습니다.

5. 기억에 남는 코드

blocker

import { useContext, useEffect, useCallback } from 'react';
import { UNSAFE_NavigationContext as NavigationContext } from 'react-router-dom';

export function useBlocker(blocker, when = true) {
  const { navigator } = useContext(NavigationContext);

  useEffect(() => {
    if (!when) return;

    const unblock = navigator.block(tx => {
      const autoUnblockingTx = {
        ...tx,
        retry() {
          unblock();
          tx.retry();
        },
      };
      blocker(autoUnblockingTx);
    });
    return unblock;
  }, [navigator, blocker, when]);
}

export function usePrompt(message, when = true) {
  const blocker = useCallback(
    tx => {
      if (window.confirm(message)) tx.retry();
    },
    [message]
  );
  useBlocker(blocker, when);
}

스스로 짠 부분은 아닙니다. react hook v6에서는 useBlock과 usePrompt가 잠정적으로 사라졌기에 검색을 통해 그 기능을 구현한 것입니다. 이 코드를 기억하고 싶은 이유는, 이 코드를 검색하기 위해서 상당히 많은 검색이 필요했습니다. (검색을 위한 검색....)
원하는 기능에 대해 검색을 하던 중 v5에서는 있다는 것을 알게되고, 현재 버전과, 현재 버전에서 달라진 것이 무엇인지를 파악해야했고, 그러려면 이전 버전까지 읽어봐야했습니다. 이 커스텀 훅을 사용하기 위해서는 코드가 어떻게 짜인 것인지도 분석해봐야했습니다. 여전히 질문을 잘 하지 않고 스스로 해결하려는 성향이 강하지만, 질문 전에 끈질기게 검색해서 알아내는 게 많은 도움이 됩니다. 그 과정에서 다른 부분도 알게 됩니다.

list page 전반

1차때는 최대한 서로의 코드를 건드리지 않으려고 했습니다. git에서 충돌나는 게 두려웠고, 괜히 만졌다가 작동되지 않으면 어쩌지? 하는 두려움 때문이었습니다. 하지만 이번에는 다른 사람의 코드를 계속 만지고, 오류를 잡는 일을 모두 나눠서 했습니다.

그 과정에서 git 충돌을 미연에 방지하기 위해 서로 커뮤니케이션을 했습니다. 서로 같은 부분은 동시에 수정하지 않도록 스케줄을 이야기하고 만일 충돌이 발생하면 같이 해결해서 다시 commit을 올리는 방식으로 작업했습니다. 스케줄을 맞춰서하니 서로 겹치는 일이 드물어 충돌도 거의 없었고, 커다란 충돌도 발생하지 않았습니다.

외려 다른 사람이 내 코드를 다시 봐주니 깔끔해지고, 서로 방식을 맞추는 과정에서 배우는 것도 많았습니다. style 분리와 파일 구성도 서로 이야기해가며 진행하니 팀원 전체가 파일 구성을 잘 알게 되었습니다. 정말 한사람이 작업하는 것 같았습니다.

6. 정리 및 소감

2차 프로젝트를 마치고 남은 과정은 기업협업과 수료 뿐입니다. 두려우면서 기대되는 마음이 듭니다.
2월에 처음 위코드를 시작한 때와 비교하면서 스스로가 대견스럽습니다. 동시에 위코드에서 개발자 커리어를 시작하게 되어서 다행이라는 생각도 듭니다. 처음 위코드를 시작할 때는 비전공자 몇개월 만에 개발자가 될 수 있다고? 하며 (상술인가...?) 의심하기도 했습니다. 하지만 지금 확실히 말할 수 있는 건, 어디서 언제부터 공부를 시작했는지는 그렇게 중요하지 않습니다. 어디서 시작하든 비전공자이든 상관없이 몰입해서 공부하는게 가장 중요합니다. 위코드에는 몰입할 수밖에 없는 환경을 만들기 때문에 이곳에서 시작하게 된게 다행스럽다는 생각이 듭니다. 위코드 전에 경험한 팀프로젝트는 고통스러운 기억이 전부였지만, 위코드에서 경험한 팀프로젝트는 몰입을 더 극대화시킵니다...(모두 열심히하니 나도 열심히 해야해..... 더 배워야해... 폐를 끼치면 안돼...다같이 성장하자...) 그리고 다양한 좋은 사람을 만나며 스스로에 대한 이해도 깊어집니다. (+좋은 동기들 , 좋은 커뮤니티 등등...) 그런 점에서 위코드에서 시작하길 정말 잘했단 생각이 듭니다.