1차 프로젝트 [브랜치] 회고

인내하라, 경험하라, 그리고 희망을 가져라 - 조셉 에디슨

제가 좋아하는 명언으로 글의 시작을 알려보았습니다.
첫 프로젝트를 시작하고 마친 현재에 시점에서 저를 다시 돌아보게 하는 문장입니다.
인내하고 경험하고 희망을 가지는 사람이 되기 위해 항상 감사하는 마음을 가지겠습니다.

모든 코드는 React로 작성 되었습니다.

📖 브런치 ? 💻 브랜치 !

저희팀은 카카오에서 나온 [브런치]라는 글씨기에 최적화 된 블로그 플랫폼을 클론코딩을 하였습니다. 글을 올리기 위해서는 먼저 작가 신청을 하고 승인 심사에 합격해야지 글을 올릴 수 있는 특이한 시스템이 돋보이는 곳입니다. 저희는 이 곳을 개발자들이 이용할 수 있는 곳이 되었으면 좋겠다는 생각을 하고 개발자들이 사용하는 git branch를 이용해보자고 생각하여 [브랜치]라는 이름으로 바꾸어 프로젝트의 진행방향을 잡았습니다.

제가 맡은 페이지는 포스팅페이지 / 리스트페이지 였습니다.

[브랜치] 시연 영상

브랜치 시연 영상

포스팅페이지 (상세페이지)

• 댓글 추가 / 삭제 기능 구현
• 댓글 창 열고 닫는 기능 구현
• 이전글 / 다음글 구현
• 스크롤 인디케이터 구현
• 포스팅페이지 안에 리스트 구현
• 댓글 아이콘 클릭 시 댓글창으로 이동하는 기능 구현
• 스크롤과 함께 내려가는 header 구현

(마지막에 들어가는 배너는 직접 그려넣었습니다.)

어려웠던 기능은 솔직히 말씀드리면 모든 기능이라고 말씀드리고 싶습니다. 모든 기능이 쉽지 않았으며 모르는 것이 있으면 고민하다가 팀원들과 함께 고민해보고, 검색해보며 해결해나아갔습니다.

이 중에서 저의 흥미를 갖게 했던 기능은
'스크롤 인디케이터' 였습니다. 스크롤을 내리면 현재 스크롤의 위치를 상단에서 확인 할 수 있습니다.

작성한 코드

import React, { useEffect, useState } from 'react';
import './Indicator.scss';

const ScrollIndicator = () => {
  const [scrollTop, setScrollTop] = useState(0);

  const onScroll = () => {
    const winScroll = document.documentElement.scrollTop;
    const height =
      document.documentElement.scrollHeight -
      document.documentElement.clientHeight;

    const scrolled = (winScroll / height) * 100;

    setScrollTop(scrolled);
  };

  useEffect(() => {
    window.addEventListener('scroll', onScroll);

    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <div className="scrollContainer">
      <div className="progressMainStyle" style={{ width: `${scrollTop}%` }} />
    </div>
  );
};

export default ScrollIndicator;

정리해서 말씀드리자면 scrollTop을 설정해둡니다. 그리고 전체 스크롤 길이scrollHeight와 현재 내가 보고 있는 높이clientHeight를 빼고 그 값을 퍼센트로 계산을 하여 그 값을 width값으로 넣어주는 코드입니다. 그리고 이것을 컴포넌트로 사용합니다.

React의 장점을 한 눈에 볼 수 있는 코드라고 생각합니다. 자바스크립트로 하면 HTML CSS 모두 따로따로 적었어야하는 것을 한번에 설정할 수 있는 모습을 보고 정말 매력적이라고 느꼈습니다.

리스트페이지

• 더보기 / 접기 버튼 구현
• 키워드란 애니메이션 구현
• 무한스크롤 구현 (라이브러리 없이)
• 리스트페이지에서 각 포스팅페이지로 이동 기능 구현

리스트페이지는 포스팅페이지만큼의 기능은 없었지만 무한스크롤에서 정말 어마어마한
절망감을 맛보게 했던 페이지입니다.
라이브러리 없이 기능 구현을 하려니 기능 구현에 이틀 넘게 걸렸던 것 같습니다.
동기들과 머리를 감싸도 쉽지 않은 기능이어서 검색을 정말 많이 해보고 알아냈던 방법이라
코드를 꼭 공유하고 싶었습니다.

검색하다가 알아 낸 것은 이 것을 라이브러리없이 구현할 때 커스텀훅을 만들어서 쓴 다는 것이었습니다.

import { useState, useEffect } from 'react';

const useInfiniteScroll = callback => {
  const [isFetching, setIsFetching] = useState(false);

  useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  useEffect(() => {
    if (!isFetching) return;
    callback(() => {});
  }, [isFetching]);

  function handleScroll() {
    if (
      window.innerHeight + document.documentElement.scrollTop !==
        document.documentElement.offsetHeight ||
      isFetching
    )
      return;
    setIsFetching(true);
  }

  return [isFetching, setIsFetching];
};

export default useInfiniteScroll;

callback 을 사용하여 사용자가 아래로 스크롤 할 때마다 트리거가 되는 매개변수를 추가했습니다. 그리고 isFetching useState데이터가 로드 중인지 여부를 신호에 추가합니다.
상태가 변경되고 값이 앝을 때 callback을 호출하는 수명주기를 추가합니다 (isFetching true) 그런 다음 새로운 useEffect 를 추가한 다음 isScrolling함수를 스크롤 이벤트에 바인딩을 합니다. 이렇게 커스텀훅을 준비하고 그 커스텀훅을 쓰고 싶은 곳으로 가서 컴포넌트 추가하듯 추가해주고 함수표현에서 함수 선언으로 함수를 리팩토링하면 됩니다.

이렇게 적긴 했지만 지금도 혼자 쓰라고 하면 힘들 것 같은 코드입니다.
코드를 뜯어보면서 공부를 더 많이 해봐야겠다는 다짐을 많이 했습니다.

해당 프로젝트를 통해 느낀 것

1. 기본기
- 기본중에 기본인 HTML과 CSS의 대해서 많이 생각해보게 되었습니다. HTML은 제가 생각보다 쓸대없는 div를 많이 소비하고 있다는 것을 알게 되었습니다. 이 것을 코드리팩토링을 하면서 하나하나 뜯어보는데 시간을 꽤나 소비하였습니다. 기본 레이아웃이 제대로 되어있지 않으면 작업에 많은 영향을 끼친다는 것도 알게 되었습니다. 그리고 제 생각보다도 더 깊은 CSS의 깊이의 대해 많이 놀랐습니다. 예를 들어 댓글 기능을 구현하던 중 댓글을 2줄을 적었는대도 1줄로 출력되는 문제점이 있었는데 이것을 어떻게 하면 좋을까 생각하던 중.
white-space: pre-wrap; 이라는 속성을 발견하고 바로 이 기능을 구현을 할 수 있었습니다. 그리고 저는 float라는 속성을 자주 사용해왔었는데 이 프로젝트로 인해 flex 속성과 친해지는 계기가 되었습니다.

2. 내가 맡은 페이지를 상세히 생각해볼 것
- 프로젝트를 시작할 때 맡은 페이지를 정확히 파악하는 것이 굉장히 중요했습니다.
초기에 페이지를 더 많이 상세히 보고 생각을 했더라면 코드를 적고 생각할 때 더 효율적이었을 것 같습니다. 2차 프로젝트를 시작하기 전에 알게 되어서 다행이라고 생각합니다.

3. 오타
- 프로젝트를 진행하면서 저의 코드에도 몇 개의 오타가 있었습니다. 처음엔 이 것의 대해서 중요하게 생각하지 않았습니다. 하지만 이건 저의 큰 오산이었습니다. 저의 코드가 문제가 되었던 것은 아니었지만 프로젝트를 진행하면서 어떤 오타 하나가 전체 프로젝트의 발목을 계속 잡게 되었고 이것으로 인해 시간을 소비하게 되었습니다. 2차 프로젝트에서 이 것을 더욱 더 신경쓸 수 있게 하는 계기가 될 것 같습니다.

4. 기능 구현에만 집중하지 말 것
- 처음에 봤을 때는 무조건 기능. 기능. 기능! 이런 생각으로 작업을 하게되었지만 작업은 제가 생각하는 방향대로 흘러가지는 못했습니다. 실제로 원래 생각했었던 '구독'기능 '좋아요'기능은 시간의 한계로 인해 작업을 하지 못했습니다. 하지만 이 기능을 못한 것을 안타까워하는 것도 좋긴 하지만 제가 여태까지 작업했던 기능의 코드를 명확히 아는 것이 더욱 중요한 것이라는 걸 알았습니다.

이번 프로젝트를 통해 내가 얻은 것

1. 작업방식의 대한 생각

- 프로젝트를 시작하기 전까지는 제가 프로젝트의 작업을 어떻게 할 지. 어떻게 진행 할 지 전혀 모르는 상태였습니다. 하지만 이번 프로젝트로 인해 제 작업 방식에 대해 알게 되었습니다.
트렐로와 노션으로 작업상황에 대해서 공유하면서 작업을 시작하였지만 1주차때는 크게만 생각했을 뿐. 세세하게 생각하지는 못했던 것 같습니다. 그래서 이 부분을 2주차때부터 보완하여 세밀하게 계획을 짜고 그것의 맞춰 작업을 해내어갔습니다. 물론 생각대로 흘러가지 않은 것이 더 많은 것이 사실입니다. 그래도 2주차때 진행했던 방식이 저에게 더 도움이 된다는 것을 알게 되었습니다. 2차 프로젝트에서는 저의 작업방식의 단점과 장점을 파악해서 좀 더 나은 방식으로 작업을 할 수 있을 거라는 생각을 하게 되었습니다.

2. 나의 대한 믿음
- 제가 프로젝트를 진행하기 전에 가장 많이 걱정했던 부분은 "내가 할 수 있을까?" 였습니다. 제가 저의 역량을 전혀 모르는 상황이었기 때문에 이 부분이 제일 많이 힘들었는데. 이번 프로젝트를 통해서 제가 어디까지 할 수 있을 지 알게 되는 계기가 되었습니다. 제가 이러한 상황에 처했을 때 어떻게 대처를 하고 어디까지 노력을 하는 사람인지 알게 되었고, 저의 대한 믿음이 생겼습니다.

3. 소통
- 이 부분에 대해서는 반성할 부분이기도 하면서 얻은 부분이기도 합니다. 백엔드의 대한 지식이 전혀 없는 상황이었기때문에 어떻게 소통을 해야할지가 큰 고민이었습니다. 프로젝트를 시작하고 나서도 소통은 많았지만 서로서로의 작업방식을 모르기때문에 이로 인해 데이터베이스를 초기화를 여러번 해야하거나 기능구현을 완료하지 못하는 등의 이슈가 있었습니다. 백엔드와 프론트엔드간의 더욱 더 활발한 소통이 프로젝트를 성공으로 이끄는 중요한 요소가 될 것 같다는 생각을 하였습니다.

마치며...

이번 프로젝트는 저에게 굉장히 큰 의미가 되었던 첫번째 프로젝트였습니다.
평소에 아무렇지 않게 쓰던 기능들이 이렇게 힘들게 제작되었던 것들이구나. 라는 것을 가장 많이 생각하게 되었습니다. 그리고 그 기능들을 구현하기 위해서는 어떠한 로직을 생각하고 어떤식으로 생각해야하는지도 많이 깨닫게 되었습니다. 여러 어려운 위기 속에서도 끈끈하게 이겨낼 수 있는 인내심과 여러 상황들을 대처해보면서 판단력을 높여주는 경험들과 시행착오를 겪으면서 얻게 되는 신중함. 이 세 가지를 겪고 더욱 강인한 저로 거듭나지 않았을까 하고 생각을 했습니다. 프로젝트를 진행하면서 가장 중요한 것은 바로 마인드 컨트롤이 아닐까 싶습니다.
집중도 잘 안되고 지치기도 하지만 이런 흔들리는 시기에 다시 나를 바로 잡아주는 것은 '나 자신'이라는 걸 알게 되었고 그래서 2차 프로젝트를 앞두고 마음을 새롭게 가다듬어보려고 합니다.

1차 프로젝트를 함께해준 5명의 동기들에게 감사합니다.

함께할 수 있어서 즐겁고 힘차게 프로젝트를 완료할 수 있었습니다!