요구사항
필수)
1. 데이터 가지고 생짜 테이블을 그대로 그려보기
2. 배정 현황 테이블과 운영자 개발자 현황 테이블을 클라이언트 단에서 합쳐보기
3. 배정현황, 직원 현황, 대학 현황을 클라이언트 단에서 합쳐보기
선택)
1. 특정 개발자를 선택해서 모든 목록 보도록
2. 특정 운영자 선택해서 모든 목록 볼 수 있도록
3. 대학 선택해서 대학 내의 모든 서비스 볼 수 있도록
데이터
-const Joblog:
대학ID, 대학명, 서비스ID, 서비스명, 서비스년도, 페이지구분, 작업횟수 를 담고 있는 배열 객체
-const Users:
사용자ID, 이름, 그룹ID, 그룹명을 담고 있는 배열 객체
-const Assignment:
대학ID, 대학명, 서비스ID, 서비스명, 서비스년도, 카테고리명, 서비스구분, 개발자, 운영자 를 담고 있는 배열 객체
-const Exception:
서비스ID, 나의원서 예외처리, 일련번호 예외처리, 중복지원 예외처리, 결제정보 예외처리, 수험번호 발급 예외처리, 결제전 예외처리, 결제 후 예외처리, 출력물 예외처리, 접수시간 예외처리, 사진수정 예외처리 를 담고 있는 배열 객체
기술 스택 구성
Vue + VueBootstrap + HTML/Bootstrap/JS
*개발환경: 인터넷이 안되는 환경에서 vue 2버젼으로 개발
회고록
우리 세명 인턴 모두 Vue는 처음 접해보는 프레임워크라 새로 공부를 시작했다. 한사람은 공식문서를 공부하고 한사람은 책을 사서 공부했다. 나는 이전에 듣던 인강에 vue가 포함되어 있어서 인강으로 공부했다. 3-4일 정도 Vue를 독학하고 각자 프로젝트에 들어갔다.
처음에는 많이 헤맸다. 알고보니 내가 공부했던 인강은 cdn방식이 아니라 CLI방식이였어서 npm을 못써 프로젝트 생성도 못해 동기분들이 설명해주셨는데 DOM 작동 방식 제대로 모르고 있었더라...
실제 개발기간은 4-5일 정도 걸렸는데 이중 2일 정도는 삽질하는데 썼다...
원래 내가 하려던 구상은 Joblog+Assignment을 합쳐서 테이블을 프린트하고 이용자를 누르면 이용자 상세페이지로 이동하는 그림이였는데 데이터를 합치는데까진 성공 했는데 프린트가 안되서 삽질했다. 나중에 동기들이 봐주었는데 알고보니 중간에 undefined값이 포함되어있어서 map이 안도는 문제였다. undefined값을 제거해주고 프린트를 해보니 제대로 출력이 되었다. 첩첩산중이라고... 페이지이동에도 문제가 있었다. 페이지 이동을 하여면 router가 필요한데 vue-router.js파일을 다운받아 내부망으로 옮겨 시도해봤지만 router를 인지하지 못해 페이지 이동을 포기했다. 대신 모달창으로 대신하기로 하고 vue bootstrap을 사용했다. vue bootstrap을 사용하니 모달이나 테이블을 간편히 그릴수 있었다. 여기까지 했을때 필수 요구사항들은 완료를 했고 마지막으로 서치 기능을 만들어 선택요구사항들을 완성했다.
select로 필터링 항목을 선택하고 input태그 입력값을 includes하고 있는 값을 찾아 프린트 해주는 방식으로 서치기능을 구현했다.
처음에는 인터넷이 안된다는 개발환경은 충격적이고 막막하기도 하고 내 한계를 계속해 맞닥들이는 기분이 들어 너무 힘들었다. 개인 프로젝트라 누구에게 의지할 수도 없고 동기들에게 계속 물어볼 수도 없는 노릇이였다. 그럴 수록 더 기초부터 찾아봤다. 공식문서와 기초 문법들을 여러번 읽어보고 비교해보며 이것저것 시도해보니 어느덧 필수요구사항을 넘어 선택사항까지 완성할 수 있었다.
인터넷이 안되는 제한적인 개발환경 덕분에 이것 저것 긁어와 복붙하거나 뭣도 모르고 import하지 않아 코드가 더 간결하고 깔끔해진것 같다. 새로운 프레임워크로 요구사항에 맞춰 개발한다는게 쉽지는 않았지만 내 부족한 부분을 더 적나라하게 드러내어 채울 수 있는 기회였던것 같아 보람찼다.
