인내하라, 경험하라, 그리고 희망을 가져라 - 조셉 에디슨
제가 좋아하는 명언으로 글의 시작을 알려보았습니다.
첫 프로젝트를 시작하고 마친 현재에 시점에서 저를 다시 돌아보게 하는 문장입니다.
인내하고 경험하고 희망을 가지는 사람이 되기 위해 항상 감사하는 마음을 가지겠습니다.
모든 코드는 React로 작성 되었습니다.
저희팀은 카카오에서 나온 [브런치]라는 글씨기에 최적화 된 블로그 플랫폼을 클론코딩을 하였습니다. 글을 올리기 위해서는 먼저 작가 신청을 하고 승인 심사에 합격해야지 글을 올릴 수 있는 특이한 시스템이 돋보이는 곳입니다. 저희는 이 곳을 개발자들이 이용할 수 있는 곳이 되었으면 좋겠다는 생각을 하고 개발자들이 사용하는 git branch를 이용해보자고 생각하여 [브랜치]라는 이름으로 바꾸어 프로젝트의 진행방향을 잡았습니다.
제가 맡은 페이지는 포스팅페이지 / 리스트페이지 였습니다.
(마지막에 들어가는 배너는 직접 그려넣었습니다.)
어려웠던 기능은 솔직히 말씀드리면 모든 기능이라고 말씀드리고 싶습니다. 모든 기능이 쉽지 않았으며 모르는 것이 있으면 고민하다가 팀원들과 함께 고민해보고, 검색해보며 해결해나아갔습니다.
이 중에서 저의 흥미를 갖게 했던 기능은
'스크롤 인디케이터' 였습니다. 스크롤을 내리면 현재 스크롤의 위치를 상단에서 확인 할 수 있습니다.
작성한 코드
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차 프로젝트를 앞두고 마음을 새롭게 가다듬어보려고 합니다.
함께할 수 있어서 즐겁고 힘차게 프로젝트를 완료할 수 있었습니다!
고생많으셨습니다!!