💼 프로젝트명 : B2Tech 근태 관리 프로그램
(1) 프로젝트 소개
- 근태 등록, 근무제 선택 및 신청, 연차 등 휴가 관리, 초과 근로 관리 및 수당 지급 등
인사 업무 시스템개발 프로젝트(2) 프로젝트 기간 : 2021.06.07. ~ 2021.07.01. (4주)
(3) 프로젝트 계획
- 1주차 Sprint : 프로젝트 기획 및 모델링, 레이아웃 및 스타일링
- 구현해야하는 agenda 선정
업무정의서작성- 2주차 Sprint : 근태 입력 및 조회, 휴가/근무제 신청, 마이페이지, 관리자 페이지 기능 구현
- 3주차 Sprint : 백엔드와
API연결(4) 프로젝트 팀원 (👩💻github)
(5) 적용기술
- Front-end :
React,React Hooks,Styled Component,JavaScript- Back-end : Python, MySQL, Django, AWS(RDS, EC2)
- Common : gitlab, git graph, slack, trello, google ppt, google sheets
(6) 필수 구현사항 💥
- 🎈 근태 프로그램 메인
- 개인별 고유한 데이터인
사원번호입력을 통해 출퇴근 등록 및 조회- 🎈 휴가/근무제 신청
- 휴가 신청: 개인별
휴가일수(발생/사용/잔여),휴가 type,휴가 일자선택 후 등록- 근무제 신청: 유연근무제 4가지 type 중
시차출퇴근에 대한월단위 기간및출근시간선택 후 등록- 🎈 마이페이지
- 개인별
당일 출퇴근 시간확인- 주 52시간에 따른 한주 동안의 근로시간, 요일별 초과근로시간 및 출퇴근 시간
시각화
- 🎈 관리자 페이지
관리자 권한이 부여된 사용자인지 여부에 따라, 좌측 사이드 바 메뉴의 활성화 영역 조정react-table 라이브러리및useMemo Hook을 활용하여, 전 직원 기본정보 및 출퇴근정보 테이블화fetch 함수를 통해 서버에서 불러온 전 직원의 기본정보 및 출퇴근 정보에 대한검색기능(7) 프로젝트 전체 시연 영상
0. 구현 agenda 선정
1. 구현 사항 (🚧관리자 페이지)
(1) 관리자 권한이 부여된 사용자인지 여부에 따라, 좌측 사이드 바 메뉴의 활성화 영역 조정
- 로그인 후
마이페이지로 이동시, fetch 함수를 이용해 관리자 권한이 부여된 사용자의 token 인지 확인 후 활성화 메뉴 구분
일반 직원의 경우,마이페이지메뉴만 활성화관리자의 경우,마이페이지및관리자 메뉴전체 활성화
(2) 전 직원 기본정보 및 출퇴근정보 테이블화
react-table 라이브러리를 활용하여 table 양식 및 정렬 기능 구현useMemo Hook을 활용해 table header 구성
- 전 직원의 기본정보 및 출퇴근정보 data는 fetch 함수를 이용해 서버로부터 받아옴
(3) 전 직원의 기본정보 및 출퇴근 정보에 대한 검색 기능
- search box 에 onClick 이벤트 발생 시,
Query Parameter를 사용한 fetch 함수 호출
🎁 2. 기억하고 싶은 로직/코드
async & await
- 서버로부터 전 직원의 기본정보를 받아오기 위해
promise.then문법을 사용하여 fetch 함수 호출
- data 가 화면에 랜더링 되지 않아, 콘솔창에
콘솔로그확인
- operation 이 수행중인 상태를 나타내는
promiseState : <pending>메시지 확인
- 구글링을 통해, promise object 의 상태를 크게 3가지로 구분하는 것까지는 확인하였으나,
- operation 수행중 : pending 상태
- operation 성공 : fulfilled 상태
- operation 실패 : rejected 상태
- 코드를 어떻게 수정 적용해야 할지 방법이 떠오르지 않아, 사수님께 조언(?)을 구함
- 기존
promise.then문법 대신,async와await키워드를 사용하여 문제 해결
🎨 3. 인턴십을 마치고...
(1) 부트캠프 수강생에서 신입개발자로
-
주어진 사이트를 클론하는 프로젝트가 아닌, 기획부터 직접 구상하는 것이 쉽지는 않았지만, 같이 인턴십에 참여한 동기들과 서로 의지하며 끝까지 완주할 수 있었음
-
나름대로 팀원 간에 소통도 많이 하면서 구체적인 그림을 가지고 시작했지만, 기능을 구현하다보니 조금 더 디테일한 부분까지 신경써서 프론트와 백엔드 간에 조율을 하고 진행했더라면 하는 아쉬움이 남음
-
3개월 동안 갑자기 너무나 많은 지식을 스치듯 받아들이기만 한 것 같아, 차분히 정리하고 되짚어보는 시간이 필요하지 싶음
(2) 인턴십을 통해 새롭게 배운 것들
-
터미널 창을 이용하여 git 명령어를 입력하는 대신 git graph extension 활용
-
사용자가 주소창에 URL을 직접 입력하여 접속하려 할 때, 토큰 또는 권한이 없는 사용자는 접근이 불가하도록 구현
-
백엔드는 프론트엔드에서 요청한 데이터를 전달하는 것이 주요한 역할로, 데이터의 포맷을 변경하고 가공하는 부분은 프론트엔드에서 담당하는 것이 좋음
- 이번 프로젝트에서는 백엔드 쪽에서 거의 모든 데이터를 변경하고 가공하는 역할을 담당
-
ideal React project structure
기능 단위 분할(통신기능, 유저입력 처리기능, 이벤트대응, 화면 갱신 기능)시각적 단위 분할(atomic, molecule, organism, template, page)데이터 중심 분할(MVC, MVT, MVVM)
