🌑 프로젝트 소개

2차 프로젝트는 브런치 사이트의 디자인과 기획을 참고하여 개발을 진행했다.
브런치는 누구나 작가가 될 수 있다는 컨셉으로 자유롭게 글을 남길 수 있는 사이트이며,
실제로 출판 기회를 제공해 다양한 분야의 작가를 육성하고 있다.
독특한 점은, 카카오가 인수하면서 카카오톡 로그인 서비스만을 제공하고 있다는 것이다.
우리의 팀명은 아점. Ajeom. 한국어는 귀엽고, 영어로 쓸 때 상당히 있어 보인다.

• Frontend Github Repository
• Backend Github Repository
• 아점 홈페이지 데모 영상
  
  

🌈 기술 스택 및 기능 분담

Tech-stack : Javascript / React / Styled component
담당 페이지 : 작가신청 페이지, 리스트(발행글 목록)페이지, 디테일(저장글, 발행글) 페이지
담당 기능 : 작가신청 토글, 무한스크롤, 스피너, 프로그레스바, 이전글 및 다음글 이동, 키워드 클릭시 path params를 이용한 관련글 목록 이동

🌒 선정 이유

두 후보가 있었다. 브런치와 한정판 거래 사이트 '크림'. 나는 브런치를 골랐고, 이유는 크게 세 가지였다.
1. 흔한 커머스 사이트가 아니라는 점 2. SPA가 아니라는 점 3. 디테일한 기능이 많다는 점이었다.

일반 커머스보단 색다른 뷰와 컨셉을 가진 웹서비스를 하는게 더 흥미를 이끌어낼 수 있을 것 같았다.
동기와 얘기를 나눴던 부분인데, 사이트에 대한 관심도가 곧 프로젝트의 완성도와도 귀결되더란 것이었다.

또한, 브런치는 SPA가 아니었다. 서비스 특성에 따라 사용자 체류 시간이 길고, 컨텐츠 탐색 빈도가 높을텐데 탭이 계속 열린다는 것은 유저에게 상당한 불편함을 초래한다고 느꼈다.
이 불편함을 해결하고 싶다는 도전 욕구가 컸다.

또한 비록 SPA는 아니지만, 세부적 기능에서는 그 어떤 사이트보다 배울 수 있는 기능이 많아보였다.
무한 스크롤, 프로그레스바, setInterval을 이용한 브런치북 애니메이션 등을 꼭 한 번 구현해보고 싶었다. 내가 느낀 장점들을 토대로 이 사이트를 어필했고, 팀원들은 기꺼이 받아줬다.

🌓 회고

💡 프로젝트에 앞서, 나의 다짐

✅ 내가 맡은 일은 제 시간안에 끝내자.

프로젝트 일정에 차질을 주지 않는 게 가장 큰 목표였다.

✅ 프로젝트에 대해 주인정신을 갖자.

지난 프로젝트 회고 때 생각했던 부분이다.
내가 그 사이트의 단골 유저라는 마음으로 해당 서비스를 분석하고 이해하는 것이 무엇보다 중요하다고. 나무보다 숲을 볼 줄 알아야 한다고 말이다.

✅ 쉽게 포기하지 말자.

한계를 넘어서려는 움직임조차 없으면 내가 여기 있을 이유도 없다.

💡 위기.

크게 간과했던게 있다. 1주차에는 프론트가 5명, 백엔드가 1명이었다. 그 말은 즉, 백엔드의 Capacity에 맞춰 프론트의 분량을 조절했어야 한다는 건데 1차때보다 욕심낸 것도 있고, 사이트 자체가 워낙 방대해 기능을 축소하는 과정도 쉽지 않았다.

거기다 예상치 못하게, 백엔드에서 소셜 로그인에 일주일간 발목을 붙잡혀 이미 대부분 페이지의 레이아웃이 나왔음에도 연결할 수 있는 API가 없었다. 그제야 우리는 백엔드 티켓이 큰 단위로 나눠져 있었음과 생각보다 API 개발이 능숙치 않다는 것을 알았다. 백엔드의 잘못을 말하려는 것이 아니다.
프로젝트는 모두가 '함께'하는 것이고, 따라서 모두가 같은 크기의 책임을 지고 있다는 걸 간과한 것이다.

나역시 내가 맡은 작업이 여유로워지고서야 ERD를 보며 API 분석을 했고, 그렇다는 것은 전체적인 프로젝트 흐름에 대한 파악이 늦었다는 것이다. 다들 각자 포지션에만 집중하면서 나무만 보고 있었던 것이다. 숲이 불타고 있는 것도 모른채.

결국 우리는 프론트도 백엔드에 붙어 API 개발을 시작했고, 다행히 기한 내에 목표치는 끝낼 수 있었지만 과정 상에 많은 아쉬움을 남겼다.

💡 남은 것은?

아쉬움을 남기고 되돌아보는 과정에서 나는 중요한 것을 깨달았고, 이를 기록으로나마 공유하고자 한다.

1. 협업시 중요도 1순위는 진행 상황을 지속적으로 공유하는 것.

개발자는 개발 실력 뿐만 아니라, 협업 능력을 중요하게 여긴다. 이슈 티켓을 분배하고, 데일리 미팅, 스프린트 미팅을 진행하는 이유도 다 여기에 있다. 백에게 아쉬웠던점 딱 하나는 바로 이런 진행 상황에 대한 공유가 잘 이루어지지 않았다는 것이다. 팀원이 많고, 초반엔 프론트 위주로 작업이 진행되다보니 작업량이 초라해보일 수 있었을 것이다. 그래서 그 때는 재촉하거나 파고들지 않는게 배려라 생각했는데, 지나고보니 무신경함으로 남은 것 같아 안타까웠다. 무책임한 배려는 안하느니만 못한 것 같다.

2. 프론트, 백엔드는 결국 하나의 목표(완성도 있는 웹서비스)를 좇는다.

그렇단 얘기는, 어떤 포지션이든 서로의 포지션에 관심을 가져야 한다는 뜻이다. 내가 1주차가 지나고 가장 반성했던 부분이기도 했다. 이전 프로젝트에서 백엔드 위주로 맡았다보니 이번에는 프론트에 온전히 집중해보고 싶은 욕심이 있었다. 이것은 완전히 잘못된 생각이었다. 프론트는 향후 붙힐 API에 대한 계산을 토대로 컴포넌트를 만들기 위해선 백을 알아야 하고, 백엔드 또한 프론트에서 어떤 API가 필요한지 파악 후 넘겨줄 데이터의 형태를 결정하기 위해 프론트를 몰라선 안된다. 결국 서로의 영역에 관심을 갖고, 받아들일 줄 아는 태도가 개발자에게 필요함을 절실히 깨달았다.

💡 다짐과 현실 사이

앞서 프로젝트를 시작하기전 내가 했던 다짐이 얼마나 지켜졌는지 돌아보고자 한다. 일단 가장 큰 목표는 이뤘다. 나는 티켓을 각 페이지에 대해 레이아웃과 기능, API 연결을 기준으로 나눴고, 1주일 내에 레이아웃 및 기능을 전부 끝내겠다는 목표치를 채웠다. 솔직히 어려울 것 같았는데, 기간 내에 끝낼 수 있어 정말 좋았다. 성장이 더디다 느꼈는데 가파르게 학습 곡선이 오른 듯한 기분을 느꼈다.

프로젝트에 애정을 갖고 숲을 보겠단 다짐은 사실 반은 실패했다. 내가 작업할 기능에서 막히는 부분이 생겨 몰두하다 전체 흐름을 놓쳤으니까. 팀보다 개인 성장을 좇은 듯해서 개인적으로 실망감이 든 부분이었다. 앞으로는 개인 회고외에도 팀에 대한 회고를 기록해서 아쉬웠던 점을 개선해나가고 싶다.

이번 프로젝트에서 쉽게 포기하지 않았던 것. intersection observer API를 이용한 무한스크롤 기능이었다. 너무 생소한 개념이어서 익숙해질때까지 코드 예시들을 수십번 봤던 것 같다. 결국 끝까지 붙잡고 있으면, 포기하지 않으면 된다는 걸 이를 통해 다시 한 번 배웠다.

🌔 나를 성장시킨 코드

 // 발행글 목록 무한 스크롤을 위한 API Fetch
 useEffect(() => {
    fetch(`${BASE_URL}/list/post/${keywordId}?page=1&pageSize=6`)
      .then(res => res.json())
      .then(data => {
        setPostLists(data);
      });
  }, [keywordId, params.id]);

  const fetchData = async () => {
    setTimeout(async () => {
      setCount(count + 1);
      await fetch(`${BASE_URL}/list/post/${keywordId}?page=${count}&pageSize=6`)
        .then(res => res.json())
        .then(data => {
          if (data !== null) {
            setPostLists(postLists.concat(data));
          } else {
            setSpinner(false);
          }
        });
    }, 700);
  };

  // Intersection Observer API
  useEffect(() => {
    let observer;
    if (target.current) {
      observer = new IntersectionObserver(handleObserver, { threshold: 0.4 });
      observer.observe(target.current);
    }
    return () => observer && observer.disconnect();
  }, [postLists]);

  const handleObserver = async ([entry]) => {
    if (entry.isIntersecting) {
      await fetchData();
    }
  };

🌕 끝으로

같이 1차 프로젝트를 한 팀원을 2차에도 만났었다. 발표가 끝나고 회식에서 나에 대한 얘길 해줬다. 1차보다 훨씬 성장한 모습을 보며 본인이 너무 뿌듯했다는 얘기에 그동안의 고생이 눈 녹듯 녹는 기분이었다. 항상 제자리를 걷는 듯한 느낌이었는데, 그 칭찬이 그렇게 좋을 수가 없었다. 그 분 역시 소셜로그인 기능을 구현하며 많은 고생과 성장을 하는 모습을 지켜봤는데, 항상 은은한 삶을 꿈꾼다 하시만 누구보다 열정있는 태도가 너무 좋고 멋있었다.

비록 3개월의 짧은 시간이었지만, 너무 대단한 예비 개발자들을 만나 참 고마운 시간이었다.
소중한 인연인만큼 소중하게 대하고 싶다.
1년 뒤, 어엿한 개발자로 성장하여 각자의 자리에서 빛날 우리들을 꿈꿔본다.