팀프로젝트 10일차
5명이서 진행하던 프로젝트였는데, 팀원들이 개인사정으로 그만두게되면서 엄청난 난관에 부딪혔다.
앞으로 2주도 안남은 시간안에 과연 완성할수있을지 정말 모르겠다.
평일주말할것없이 하루에 12시간씩 눈떠있는시간에는 개발을 하고있는데도 도무지 진척이 보이질않는다..ㅠㅠ
하면 할수록 실력이 부족해서 개발속도가 더디다는것을 뼈저리게 느끼게되었고, 또 반대로 프로젝트를 시작하고나서
눈에띄게 실력이 늘고있다는것을 느끼고있다.
그룹웨어 시스템을 만들면서 메시지를 주고받을수 있는 기능을 구현중이다.
처음에는 웹소켓을 이용하여 실시간 통신을 주고받는 기능을 만들고싶었는데,
만들고자 하는 기능이 메일에 가까워 socket을 통해 서버와 클라이언트가 계속 연결을 유지하고있을 필요가 없다는 생각이들었다. 카카오톡이나, 실시간 대화창과 같은 기능을 구현할때 한번 써먹어봐야겠다.
기존의 Microsoft의 Outlook과 유사하게 만들고자 최대한 비슷한 기능을 구현하려하는데,
확실히 코드를 짜보면서 느낀점은 사용자의 편의성을 위해서는 비동기통신을 이용해 클라이언트단에서 JavaScript를 통해
처리하는것이 사용자입장에서 편하다는 것을 느꼈다.
이를위해 최대한 서버와의 통신을 지양하고 클라이언트단에서 스크립트 구문을 통해 내부에서 비즈니스로직을 실행할수있도록 구현하고자 하였다.
서버에서 받아온 메시지 데이터를 출력하면서, 최대한 페이지 이동을 지양하고자 해당 메시지를 클릭하면 오른쪽에 메시지 세부내용을 볼수있도록 값들을 담을수있는 임시저장공간을 생각하다가, hidden타입의 input에 값을 담아놓고 필요할때마다 꺼내쓸수있도록 하였다.
주요기능 1.
메시지 수신날짜가 오늘이면 00시00분으로, 오늘이 아니면 1월 1일 월요일 형식으로 출력하기
, 메시지 수신 날짜가 오늘이면 해당 Table에 Today 컬럼 생성하여 구분하기
해당 로직을 구현하기위해 JSTL의 조건문을 사용하였다.
Java Util의 Date를 이용하여 오늘 날짜,어제날짜를 받아오고, <c:foreach>가 받아온 메시지함을 출력하는동안,
오늘날짜와 같을 경우 어제날짜의 메시지와 처음 생성되는 오늘날짜 메시지 사이에 딱 1번만 <p>TODAY</p>라는 행을 삽입할수있는 로직이 필요하여, boolean타입의 변수를 생성하여 스위치 역할을 할수있도록하였다.
주요기능 2. 메시지 작성기능
모달팝업을 활용하여 사원 검색을 통해 클릭하면 받는사람에 1명씩 추가
메시지 작성기능은 자바스크립트를 통해 모달팝업을 이용하여 최대한 사용자 편의성을 높이고자 노력하였는데,
스크립트단에서 화면전환없이 다양한 데이터들을 출력하고, 주고받는 과정에서 변수들의 우선순위와 데이터의 누적문제등의 문제들이 발생하여 개발난이도가 더 까다롭고 복잡하다는것을 뼈저리게 느끼게되었다..
이과정에서 자바스크립트의 코드줄만 500줄이 넘어가게되었다.
발생한 문제 :
메시지 작성화면에서 추가버튼을 클릭하면, 사원을 검색할수있는 팝업이 나오고 여기서 검색된 사원을 클릭하면
자동으로 받는사람 옆으로 사용자가 들어갈수있도록 구현하면서, 처음 1번 추가할때는 문제없이 해당값을 가져왔지만
여러번 실행시 화면전환없이 스크립트 구문안에서 계속 처리하다보니, 이전 값들을 초기화하지않아 누적되는 문제가 발생하여 이 문제를 해결하는데 시간이 많이 걸렸다.
해결방법 :
클릭이벤트로 선택한 사용자를 받는사람 칸에 추가하는 구문을 append하기위해 받았던 addedElements 문자열 변수를
배열형태로 선언하여, 클릭이벤트 발생시, forEach함수를 통해 remove()메소드로 이전 검색내용을 초기화 시켜주어
2번이상 검색시 이전 검색결과값을 삭제시켜주었다.
또한, 받는사람뿐만 아니라 참조 항목도 구현하기위해
받는사람 항목의 코드와 똑같은 실행흐름이라, 기존의 받는사람에 사용했던 코드를 동시에 같이 받아서
클릭이벤트에서 if 조건분기처리를 통해 부모요소의 id값에 따라 받는사람 or 참조에 append 하려고했는데
페이지 새로고침없이 스크립트내에서 모달팝업을 이용해 스크립트 구문을 왔다갔다 하다보니 데이터 값들이 제대로 초기화할수있는 시간?타이밍?이 꼬여버려 데이터 값들을 초기화해야할 구간을 찾을수없었다.
단순히 같은 코드를 똑같이 2개만들어 각각 다르게 처리하면 해결할수있겠지만 뭔가 비효율적이고 세련되지못하다는 생각에 같은 요소를 클릭해서 여러가지의 요소들에 입맛에맞게 넣어주고자 했지만
그냥 똑같은코드 2개만드는것보다 훨씬더 많은 시간이 걸렸는데도 결국 해결하지못했다..
전체적으로 사용자 편의성을 높이는 방향으로 코드를 구현하기위해 개발을 하면서 프론트단에서 스크립트를 통한 처리가 훨씬더 많이 이루어진다는 것을 느꼈다.
백엔드만 공부하다보니 프론트쪽은 요소 하나 옮기는데도 엄청나게 많은 시간이 걸리는데, 이번 기회에 HTML,CSS,제이쿼리를 실컷 사용해보면서 정말 많은 공부가 되었다.
'Category > Project' 카테고리의 다른 글
[팀프로젝트] 12일차 - 전자결재 시스템 만들기 (0) | 2024.01.30 |
---|---|
[팀프로젝트] Mybatis 매핑에러 - BindingException (0) | 2024.01.29 |
[Spring] 스프링 시큐리티 사용하기 (1) | 2024.01.25 |
[팀프로젝트] JSP Include 동적변수 문제 --해결! (1) | 2024.01.24 |
[팀프로젝트] 7일차 - 그룹웨어 시스템 만들기 (0) | 2024.01.24 |