https://s3-us-west-2.amazonaws.com/secure.notion-static.com/a40027e4-6cd2-4925-9727-0e7241b93634/61729163_2260095747419488_7099524074921000960_o.png

Entry DSM ver. 4

개발 참여 기간: 2019.01 ~ 2019.10.20

🤔 앱 소개

Github : https://github.com/EntryDSM/Natuur

👨‍💻 개발


역할

Project Manager 및 EntrySystem 개발

기술 스택

TS + React.js + Redux_@middleware + webpack4 + css in js + PostCSS

Git Branch 전략

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/a795666f-b8c6-4b1b-aa84-fec8818c25af/Untitled.png

개발에 들어가기 앞서서 EntryDSM 팀원들 간의 '코드 스타일을 어떻게 적용할 것인가'. '배포를 어떻게 할 것인가'. 등에 대해서 먼저 이야기를 나눴습니다. 이때 저와 팀원들은 매우 중요한 한 가지를 놓쳤었습니다. Git Branch규칙이나 commit 방법, Github 권한 관리 등 개발을 진행하며 큰 차질이 생길 수도 있는 Git 문제에 관한 회의를 거치지 않았었습니다. 결국 branch conflict가 발생하며 개발에 큰 차질이 생겼었습니다. 이후 Branch에 관한 규칙을 정하지 않았음을 깨닫고 효율적이고 정렬된 형상 관리와 간편한 코드리뷰를 위해 Git-flow를 적용하였습니다. 또한 권한을 팀장에게만 부여하고 commit명 앞에 어떠한 commit인지 알리는 코멘트(Ex] ADD: styling component)를 작성하도록 하였습니다.

Branch전략을 세우고 master에 직접 commit하던 걸 develop branch에 commit하게 하니 문제는 더이상 발생하지 않았고 CI/CD를 위한 production branch를 통해 주기적인 배포로 깔끔하게 끝 마칠 수 있었습니다.

source: https://nvie.com/posts/a-successful-git-branching-model/

lodash.debounce의 활용

제가 개발을 맡은 부분 중 자기소개서와 학업계획서를 작성해서 제출하는 페이지가 있습니다. 자동저장을 구현해야하는 부분에서 어떻게 처리할까 고민 하며 구글링을 했습니다. 이후 lodash.js의 lodash.debounce를 이용하기로 했습니다.

하지만 lodash.js의 lodash.debounce함수 하나를 위해 큰 용량을 자랑하는 lodash를 import해오기가 꺼려졌습니다. 그래서 useDebounce hook을 만들어보기로 하였습니다.

import React, { useState, useEffect } from "react";

export default function useDebounce(text: string, delay: number) {
  const [debounceValue, setDebounceValue] = useState(text);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebounceValue(text);
    },                         delay);

    return () => {
      clearTimeout(handler);
    };
  },        [text]);

  return debounceValue;
}