프로젝트의 이유 및 목표

프로젝트를 하는 이유

부트캠프를 졸업하고 취업준비를 시작한지 벌써 4개월차가 되었습니다. 4개월동안 부족했던 CS 및 기술 관련 학습을 꾸준히 하고 있고, 면접 준비와 이력서 정리 등 굉장히 많은 것들을 준비하고 있습니다. 더불어 지원도 많이 하고 면접도 생각보다 많이 봤다고 생각합니다. 대기업부터 이제 시작하는 스타트업까지 대략 10곳 정도 면접을 진행하면서 면접 스킬을 많이 익힐 수 있었습니다.

하지만 면접을 보며 아쉽게 느껴졌던 부분이 있습니다. 취업을 준비하며 최근 회사에서 필요로 하는 다양한 스킬과 지식을 학습해왔고 면접 자리에서 이야기를 했지만, 결과물로 보여주지 못해 긍정적인 결과를 받지 못했다는 생각이 많이 들었습니다.

하지만 또 새로운 프로젝트를 기획부터 디자인까지 시작하기에는 너무 많은 리소스가 필요하기에 고민하던 중, 부트캠프에서 진행했던 Westagram 프로젝트를 리팩토링 하면 좋겠다는 생각이 들었습니다.

그래서 최근 필수 역량으로 손꼽히는 타입스크립트를 중심으로 프로젝트를 진행했고, 이전에 구현하지 못했던 기능을 추가 및 수정했으며 사용해보지 않았던 axios와 custom hook을 사용해 프로젝트를 진행했습니다.

프로젝트의 목표

TypeScript와 친숙해지려고 노력했으며, 이전 프로젝트에서 구현하지 못했던 댓글 추가, 삭제 및 좋아요 기능을 구현했습니다.

최근까지 사용했던 fetch가 아닌 현업에서 선호하는 axios를 경험하고, custom hook을 사용해 로직의 반복을 최소화하고 재사용성을 높였습니다.

관심을 갖고 학습 중인 성능 최적화를 위해 useCallback과 useMemo를 학습 후 useCallback을 실제로 사용해 최적화를 구현했습니다.

또한, media query와 가변형 이미지를 활용해 반응형 웹을 구현했습니다.

목표 리스트

✔️ TypeScript 활용

✔️ 댓글 추가, 삭제 및 좋아요 기능

✔️ Custom Hook & Axios 사용

✔️ 반응형 구현 (Media Query 및 가변형 이미지)

✔️ 성능 최적화 (useCallback, useMemo)

🌟 Project Overview

---

Link

✔️ Github
✔️ 회고

---

작업 기간

22.06.05 - 22.06.16 (실제 개발 기간 7일)

기술 스택

JavaScript(ES6) | TypeScript | React | React Router | Styled-component | Axios

주요 구현사항

타입스크립트 활용

• TypeScript 기초 학습 후 프로젝트를 진행했습니다. (학습 기록 링크)
• Type와 Interface의 공통점 및 차이점을 학습 후 Interface를 주로 사용했습니다.
• Interface 관심사 분리를 통해 효율적으로 Type을 관리했습니다.

// Interface.tsx

export interface ImageType {
  id: number;
  image: string;
  description: string;
}

export interface CommentsType {
  id: number;
  name: string;
  comments: string;
}

export interface IgetData {
  url: string;
}

export interface IResponse {
  id: number;
  image: string;
  name: string;
  description: string;
}

댓글 추가, 삭제 및 좋아요 기능

• 처음 렌더링되는 댓글 리스트에 새로운 id의 댓글이 추가됩니다.
• 댓글의 좋아요 혹은 삭제 클릭 시 id값을 활용해 상태를 변경했습니다.

Custom Hooks & Axios

• 이전에 사용했던 Fetch와 Axios의 차이점을 학습 후 Axios를 활용했습니다.
• async / await를 이용해 비동기 통신을 순차적으로 실행했습니다.
• 프로그램 문제 발생 시 대처를 위한 try / catch 예외 처리를 진행했습니다.
• Custom Hooks을 사용해 로직의 반복을 최소화하고 재사용성을 높였습니다.

// useAxios.tsx

import { useState, useEffect } from 'react';
import axios from 'axios';
import { IgetData, IResponse } from '../Type/Interface';

const useGetData = (url: IgetData) => {
  const [data, setData] = useState<IResponse[]>();
  const [isLoading, setIsLoading] = useState<boolean>(true);
  const [error, setError] = useState<string>('');

  useEffect(() => {
    const fetchData = async () => {
      try {
        await axios(url)
          .then(res => {
            setData(res.data);
          })
          .finally(() => {
            setIsLoading(false);
          });
      } catch (err: any) {
        setError(err);
        alert(err);
      }
    };
    if (isLoading) {
      fetchData();
    }
  }, [url]);

  return { data, error, isLoading };
};

export default useGetData;

반응형 구현

• 가변형 이미지 및 media query를 활용해 반응형 웹을 구현했습니다.

성능 최적화

• useCallback과 useMemo를 학습 후 useCallback을 사용해 최적화 구현했습니다.

// MainCard.tsx

const addFeedComment = useCallback(() => {
  if (!comment) return;
  setCommentList([
    ...commentList,
    { id: ids, name: 'Seokho__lee', comments: comment },
  ]);
  ids += 1;
  setComment('');
}, [comment, setComment, commentList, setCommentList]);

const updateComment = useCallback(
  (e: React.ChangeEvent<HTMLInputElement>) => {
    setComment(e.target.value);
  },
  [setComment]
);

const keyEnter = useCallback(
  (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter') {
      addFeedComment();
    }
  },
  [addFeedComment]
);

const removeComments = useCallback(
  (id: number) => {
    setCommentList(commentList.filter(comments => comments.id !== id));
  },
  [commentList]
);

구현 결과

댓글 게시물을 추가 및 삭제할 수 있으며, 댓글과 게시물에 좋아요를 할 수 있습니다. 반응형 웹으로 구현되어 다양한 디바이스 및 뷰포트에 대응할 수 있습니다.

🌟 Project review

고민과 해결(내용 정리 중)

타입스크립트 사용 방법

• 스타일컴포넌트 사용 시 타스
• props 전달 시 타스

useCallback & useMemo

• 사용 이유, 방법, 언제 사용?

axios와 customHook

• axios와 fetch의 차이점
• 예외 처리 사용 이유, 사용 방법
• customHook 사용 이유, 사용 방법

칭찬해주고 싶은 점

✔️ 타입스크립트

새로운 기술을 학습할때 기초 학습 후 직접 코드를 작성해보며 성공과 실패를 경험하는 것은 성장의 지름길이라고 생각합니다.
하지만 처음에 어려움을 많이 느꼈는데, 초기 세팅부터 이전과 달라 힘들었으며 state와 인자 등 모든 곳에서 예상하지 못한 에러가 계속 발생해서 쉽지 않았습니다.
중간 중간에 페이지와 기능별로 리팩토링을 하며 진행했는데, props를 전달하는 것도 쉽지 않아 리서칭을 통해 에러를 해결하는데 전전긍긍했습니다. 하지만 어느정도 익숙해진 후로 interface 를 보다 효율적으로 관리하는 방법을 익힐 수 있었고, 타입스크립트를 사용하는 이유에 대해서 더욱 잘 알게되었습니다.
아직 완벽하진 않지만, 이번 프로젝트를 통해서 타입스크립트와 친숙해질 수 있었고 계속 리팩토링 하면서 아쉬운 부분을 수정 및 보완하려고 합니다.

✔️ 실력 향상

나와 같은 구직자들은 코딩 테스트, 이력서, 면접 등 준비해야할 것들이 매우 많기 때문에 새로운 프로젝트를 진행할지 말지에 대한 의견이 다양합니다. 저 또한 그랬기에 현직자들의 멘토링과 조언을 많이 받았는데, 대부분 새로운 프로젝트 보다 이전 프로젝트를 리팩토링해서 업그레이드하는 것이 더 중요하다는 의견이 대부분이었습니다. 프로젝트를 끝난 후 저도 이 의견에 동의하게 되었습니다.

이유는 첫번째로, 생각보다 많은 고민이 필요하다!
이전에 작성했던 코드들을 다시 분석하면서 틀렸던 부분은 수정하고 부족했던 부분은 추가했는데, 이 과정에서 예상하지 못한 고민과 학습이 필요했습니다.

왜냐하면 이전에 잘못 사용하고 있거나 잘못 알고 있던것을 다시 학습해야 했고, 비효율적인 부분을 효율적으로 수정 보완하는게 생각보다 쉽지는 않았습니다.

새로운 프로젝트를 진행하는 것도 당연히 많은 고민이 필요하지만, 시간이 소중한 구직자 입장에서는 이전 프로젝트를 리팩토링하는게 시간 대비 효율적인 학습 방식이라는 생각이 들었습니다.

두번째, 성취감을 통한 자존감, 자신감 상승!
저는 소위 '성취주의자' 라고 부를만큼 성취감을 통해 삶의 활력을 느끼는 사람이고, 커리어 전환을 하게된 이유 중 하나이기도 합니다.

저와 같이 하루 하루 열심히 노력하는 구직자들은 체감하지 못할 수 있지만, 분명 실력이 조금씩 늘고 있을 것 입니다. 하지만 피부로 와닿을 정도로 느끼지 못하는 경우가 많은데, 저에게 이번 프로젝트는 실력 향상을 느낄 수 있는 계기가 되었습니다.

예전에는 어떻게 시작해야할지 감도 안왔던 기능의 전체적인 로직의 흐름을 어느정도 파악할 수 있게 되었고, 고민 조차 할 수 없었던 기능과 기술을 사용해볼까 라는 생각까지 할 수 있게 되었습니다.
개인적으로 이 부분에서 나름 성장했구나 라고 느꼈는데, 이번 프로젝트에서 pagination 은 처음부터 고려하지 않고 시작했습니다. 하지만 막바지에 처음부터 MainCard 를 공통컴포넌트로 받아오고 MockData 를 활용해 Card 내용의 api를 받아왔으면 pagination 을 쉽게 구현할 수 있었겠다 라는 생각을 하게 되었습니다. 더불어 search 부분에서 검색을 하면 Aside 의 추천인들을 검색할 수 있게 한다거나, 좋아요 기능의 Count 를 보여준다거나 등등 다양한 아이디어를 고민할 수 있게 되었습니다.

이러한 성장과 고민을 통해 너무나도 큰 성취감을 느끼게 되었고, 다시 한번 개발에 재미와 흥미를 느낄 수 있었습니다.

개발자 선택하길 잘했다~ 꿀잼 🐝🍯

개선하고 싶은 점

✔️ 리팩토링

프로젝트 막바지에 pagination 구현에 대해 고민했는데, 초기 설계가 pagination 기능을 고려하지 않고 진행해서 시간이 오래 걸릴 것으로 판단되었습니다.

그래서 추후 천천히 진행 예정이고, MockData 를 활용해 MainCard 의 userInfo 데이터를 api로 받아 진행 예정입니다.

✔️ 성능

최근 면접에서 많이 질문으로 나오는 성능 최적화 관련해서 차근차근 학습 중입니다.

성능 최적화를 크게 나누어 보면 로딩 최적화, 렌더링 최적화로 나뉘는데, 그중 리액트에서 성능 최적화를 구현할 수 있는 useMemo와 useCallback을 학습했습니다.

이전까지 면접용으로 학습만 해봤고 실제 사용 경험을 전무했는데, 이번 프로젝트에서 직접 사용해보았습니다. 하지만 토이 프로젝트라서 큰 체감은 못했지만, 이번 경험으로 언제 사용해야 하는지에 대해 고민할 수 있었습니다.

로딩 및 렌더링 최적화 관련 방법과 기술이 다양한데, 하나씩 학습하면서 리팩토링 예정입니다.