Github : https://github.com/EntryDSM/Natuur
대덕소프트웨어마이스터고등학교의 신입생 입학전형 시스템 입니다. EntryDSM은 3가지의 시스템으로 나뉩니다. 저는 EntrySystem을 개발하였습니다.
학생들이 입학원서를 작성하는 EntrySystem
선생님께서 신입생의 1차 합격 여부를 판단할 1차AdminSystem
1차 합격자들의 면접을 도울 2차AdminSystem
Project Manager 및 EntrySystem 개발
TS + React.js + Redux_@middleware + webpack4 + css in js + PostCSS
개발에 들어가기 앞서서 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.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;
}