🧸 토이 프로젝트 1 후기

 

https://wei3on.tistory.com/4

Node.js를 사용하여 Error: Cannot find module '<module name>' 오류 해결 방법

 

프로젝트 시작부터 오류 직면해서 

챗지와의 씨름 끝에 해결하고 첫번째 프로젝트 시작!

 

기획 (1주차)

 

• 프로젝트 주제 : 부트캠프 수강생들을 위한 행정 인트라넷 구현
• 프로젝트 목표 : 행정 관련 신청/처리를 더욱 더 간편하게 하기 위한 목적

 

사용자용 기능

1. 외출/조퇴, 휴가, 공가 신청
외출/조퇴, 휴가, 공가 신청서 및 관련 서류 제출 기능pdf, zip 변환 기능제출 양식 다운로드 기능

2. 출결 기록 관리
현 시각 표시 기능입실/퇴실 스위치 기능입실/퇴실 확인 모달 창 기능수강생 본인의 입실/퇴실 기록 확인 기능

3. 공지사항 갤러리
공지사항 열람 기능

4. 문서 발급 신청
국취서류(참여확인서, 수강증명서, 출석부)등 요청 기능

5. 문의
행정 관련 문의 작성 및 제출 기능

6. 기업 공지 모음
구인 광고 열람 기능

7. 신청 현황
본인의 행정 신청 현황 열람 기능

 

관리자용 기능

1. 수강생 리스팅 페이지
수강생 목록을 스크롤 가능한 형태로 표시수강생 개별 프로필 페이지 제공수강생 프로필 삭제 기능페이지네이션(Pagination) 기능 추가

2. 출결 관리 기능
외출/조퇴, 휴가, 공가 신청 확인 및 승인/반려할 수 있는 기능 제공출결 관련 양식 수정 및 관리 기능페이지네이션(Pagination) 기능 추가

3. 공지사항 갤러리
사진 및 글 업로드 기능공지사항 양식 폼 등록 기능제출된 양식 목록 확인 기능페이지네이션(Pagination) 기능 추가

4. 문서 발급 요청 관리
수강생의 문서 발급 요청 확인 및 처리문서 발급 및 전달 기능

5. 문의 관리
수강생의 행정 문의 확인 및 답변 작성

6. 기업 공지 모음
구인 광고 업로드 기능

7. 신청 현황
수강생들의 행정 관련 신청 사항 현황 제공

 

• 비기능적 요구사항

  🧭 성능 요구사항

  시스템은 200명 이상의 수강생 데이터를 실시간으로 처리할 수 있어야 합니다.

  모든 페이지는 사용자가 요청을 보낸 후 1초 이내에 응답해야 합니다.

 

  🔒 보안 요구사항

  수강생 데이터는 암호화되어 저장되어야 합니다.

  모든 사용자와 관리자는 로그인해야 하며, 각 사용자 역할에 따라 접근 권한이 제한되어야 합니다.

 

  📌 사용성 요구사항
  사용자 인터페이스는 직관적이고 사용하기 쉬워야 합니다.

  모든 페이지는 다양한 디바이스 (데스크탑, 태블릿, 모바일)의 모던 브라우저에서 사용 가능해야 합니다.

  시스템 사용에 추가 소프트웨어 설치가 필요 없어야 합니다.

  🕑 유지보수성 요구사항
  코드베이스는 ESLint와 같은 도구를 사용하여 코딩 표준을 준수해야 합니다.시스템은 쉽게 업데이트 및 관리될 수 있어야 합니다.

  🔅 기타 요구사항
  모든 데이터는 최소 5년간 보관되어야 합니다.

 

 

• 개발 환경
  • 프론트엔드: HTML, CSS, JavaScript
  • 백엔드: Node.js, Express.js
  • 데이터베이스: MySQL

 

---

개발 (2주차~)

 

내가 개발한 기능은

• <수강생> 입퇴실 기록 기능 & 모달창
• <수강생> 실시간 업데이트
• <수강생> 실시간 출석 현황 그래프 
• <수강생> 입퇴실 확인 페이지
• <관리자> 공지사항 CRUD
• <관리자> To Do 리스트
• <공통> 캘린더

 

입퇴실 기록 기능은 

입실하기 버튼을 누르고 모달창의 예 버튼을 눌러야

입실하기-> 퇴실하기 버튼으로 변경되고

버튼을 누른 그 시점의 날짜와 시간을 

json의 더미데이터로 쌓아준다.

 

실시간 업데이트 기능은

1분마다 javascript date 함수로

시간을 가져와서 업데이트 해준다.

 

실시간 출석 현황 그래프는

char.js 라이브러리를 사용하여

doughnut 그래프와 progress 그래프를

구현했다.

 

입퇴실 확인 페이지는

입퇴실 기록할 때 json 파일에 쌓아뒀던 데이터를

axios로 가져와서 테이블을 생성해서 보여주고

상태에 따라 필터링되어 보여주는 기능을 추가했다.

 

공지사항 CRUD는

공지사항 json 파일에 쌓아뒀던 데이터를

가져와서 div로 보여주고

공지사항 생성, 수정, 삭제 할 수 있는 기능을 추가했다.

(화면이 resizing 되면서 공지내용이 3줄 이상이 되면 말줄임표 처리하여

  토글하면 내용이 보였다 줄여졌다 반복)

 

To Do 리스트는

각 json 파일을 axios로 가져와서

데이터의 갯수를 세서

입력되게 구현했다.

 

---

코드 리팩토링 (6주차)

 

1. 폴더 구조 변경

 

src 폴더 하위에 어떤 내용의 폴더가 있는지

안내도 없고, 파악하기 어렵다.

 

❗️ 비슷한 성격의 폴더끼리 묶어서 관리하기

❗️ 폴더 이름형식 통일하기

❗️ 서로 다른 내용의 작업물을 같은 폴더에서 분리하기

 

 

2. 변수/함수 이름 명명 규칙 통일하기

 

카멜 케이스와 로우 케이스가 섞여 사용되고 있다.

이름 형식이 섞이면 코드 가독성도 나빠지고

파일이나 경로에 접근 할 때도 어려움이 발생할 수 있다.

 

 

3. 예외처리 간결하게 줄여보기

 

값을 탐색 할 때,

옵셔널 체이닝을 사용하면

앞에서 탐색한 값이 존재하지 않으면,

undefined를 반환하고 종료된다.

 

❗️ 옵셔널 체이닝을 사용하면 중복된 예외처리를 줄이고,

더 깔끔하게 조건을 파악할 수 있다.

 

---

 

🧸 후기 🧸

 

혼자서 포트폴리오 작업만 해봤었고

프로젝트 참여 자체가 처음이라 초반에 깃으로 하는 협업 자체에 어려움을 겪어

눈물 한번 쏙 뺐지만

유튜브로 해당되는 강의 찾아서 듣고

모르는 부분을 오히려 더 파헤치고 익숙해지려고 노력하니

이제는 깃에 대한 두려움이 사라졌다.

'어떻게든 되겠지~!' 

라는 마음과 함께 에러가 떠도 잘 해결 할 수 있게 되어

 깃과 조금은 친해진 것이 이번 프로젝트에서 가장 뿌듯했던 부분인 것 같다.

 

자바스크립트를 통한 rounting과

Axios Api 사용,

json 더미 데이터 활용

SPA 방식 활용 등

처음 접해보는 방식에 대한 경험을 쌓아서

확실히 그냥 코드만 짤 수 있었던 시기보다

훨 성장한 것 같고 

다음 프로젝트도 걱정보다는 새로운 학습에 대한

기대감으로 채워지는 토이 프로젝트 1이었다.

 

다가오는 토이 프로젝트 2도 화이팅!!!