KOSTA 파이널 프로젝트 64 ~ 78일차(업무 협업 툴)

19. 2. 8(금) ~ 19. 2. 25(월)

 

프로젝트 내용

 

1. 파이널 프로젝트를 시작하면서..
2. 구현 단계
3. 파이널 프로젝트를 마치며..

---

1. 파이널 프로젝트를 시작하면서

기존에 세미 프로젝트 때 제작하던 업무 협업 툴을 이어서 제작하기로 하였다. JSP에서 Spring기반으로 옮겨야 했기 때문에 사실 처음부터 하는 것과 큰 차이가 없었다.

동일하게 MVC 패턴을 이용하여 제작을 하기로 하였으며 구조를 이해하면서 구현하는데 집중하였다.

2. 구현 단계

프로젝트 과정 중 모든 과정을 작성하진 않고 중요하다고 생각한 부분 그리고 구현하는데 애먹었던 부분을 리뷰하는 형식으로 작성하려고 한다.

 

이벤트 종류

• 수정 및 입력할 대상을 클릭하고 다른 공간을 클릭하거나 엔터를 클릭 하였을 때 저장되는 결과를 얻고 싶었음
• 처음엔 다른 공간의 id를 가져와 click 이벤트를 주었더니 중복 저장 및 여러가지 예상치 못한 오류가 발생하였음
• 그래서 focusout과 keyup 이벤트를 통하여 해결

 

• PATCH 메소드를 활용하여 부분적으로 수정
• JSON 형태로 title을 받는다.

 

• 두개의 이벤트를 통하여 update 함수를 실행시킴
• 여기서 this.val()은 수정한 updateTitle을 말함
• 그리고 isUpdate를 false로 두어 수정이 끝났다는 것을 알림
• keyCode의 경우 13번이 엔터키므로 13이면 update 실시

 

이벤트를 click이벤트만 알고 있어서 구현하기 쉽지 않았는데 위의 이벤트를 학습하고 구현하였더니 좀 더 편하고 구현하기 쉬운 방법을 알게 되었다.

 

Date객체를 JSON으로

@JsonFormat 어노테이션을 통하여 패턴을 입력하여 JSON 형식으로 Date를 입력 가능하다.

 

• 위와 같은 패턴으로 어노테이션을 사용하면 따로 과정 필요 없이 JSON 형식으로 Date가 넘어간다.
• 만약 timezone을 Asia/Seoul로 입력하지 않으면 미국시간으로 들어가기 때문에 주의!!

 

Date객체를 문자열로 보내기 위해서 따로 String 변수를 만들어서 보내기도 해보고 했지만 좀 더 스마트한 방법으로 해결하여서 다음에도 사용하기 편할 것 같다.

 

input태그의 id, class, name으로 접근해서 값 가져오기

input에 존재하는 값을 가져오는게 생각보다 중요해서 다시 한 번 리뷰하려고 한다.

<input type= “hidden” id= “test_id” class = “test_class” name = “test_name” value = “test”>

1. id로 접근해서 가져오기 : var value = $(`#test_id`).val();
2.  class로 접근해서 가져오기 : var value = $(`.test_class`).val();
3. name으로 접근해서 가져오기 : var value = $(`input[name=test_name]`).val();

 

오픈소스 활용(DatePicker)

마감일 출력시 DatePicker를 사용하여 달력을 출력하고 싶었다.
그래서 단순한 jQuery 말고 오픈소스를 활용하여 좀 더 트렌디하게 구현해보고 싶어 사용하였다.

출처 : https://flatpickr.js.org/events/#onvalueupdate

flatpickr

• 사용하기 위하여 위의 코드를 입력한다.

 

• jQuery를 사용시 위의 코드로 사용이 가능하다.

 

• default를 오늘로 해놓고 바뀌면 저장이 될 수 있도록 하였다.
• endDay는 마감일을 나타내며 선택한 index값 0을 선택하고 update한다.

 

• update문의 함수는 위와 같다.

 

오픈소스 활용에 대해서 불안감과 자신이 없었는데 이번 기회로 사용해봐서 자신이 붙었고 자신이 만드는 것도 중요하지만 남이 만든 소스를 잘 활용하는 것도 능력이라 생각한다. 
때문에 D-day를 구할 때도 issues를 활용하여 제작자와 소통하여 구하는 방법을 터득해구현은 해보았지만 실제론 사용하지 않아서 조금 아쉬웠다.
하지만 방법을 알았으니 다음에 활용할 시 유용하게 사용할 수 있을 것 같다.

 

삼항연산자를 사용한 예외처리

마감일이 없을 때 null이 출력이 되는데 null이 출력될 시 ‘마감일이 없습니다.’ 라는 문구가 뜨게하고 싶었다.

 

• 템플릿 리터럴 문법을 사용하여 태그들을 return하였음
• dday가 있으면 나타내고 없다면 ‘마감일이 없습니다.’ 문구를 출력하도록 나타냄

 

• 성공시 반복문을 타게 하여 각 위치별로 리터럴 문법으로 나타낸 함수를 출력한다.

 

이 기능을 구현하면서 템플릿 리터럴 문법에 관해 배웠고 삼항연산자의 유용성을 이해하였다.

 

CSS 적용

D-day를 메인페이지에 가독성있게 나타내주고 싶어서 CSS를 적용하여 나타내보기로 하였다.

• tag라는 class를 주어 dday가 있으면 보여주고 없으면 숨긴다.

 

• 이 때 tag는 absolute를 주어 메인 페이지에 나타내는 부분을 고정시켜주고 hide는 none을 하여 보이지 않도록 한다.

 

이번 계기를 통해 position의 relative, absolute 관계를 이해할 수 있었다.

 

클릭시 삭제되는 이벤트

마감일을 삭제하고 싶을 때 불편한 과정 말고 삭제하기 버튼을 클릭시 바로 삭제될 수 있도록 구현하였음

 

• 클릭하였을 때 마감일에 공백이 들어가야 하며 DB에 저장이 되어야함
• 그래서 ajax 처리시 공백이 되기 위해 JSON형식으로 날짜를 공백으로 보냈음
• 그리고 성공시 날짜를 공백으로 나타낸다.
• 만약 공백이 아니라면 삭제를 해야하기 때문에 delete 함수를 선언하고 삭제를 시키고 만약 기존에 공백이었다면 경고창을 뱉어낸다.
• 하지만 실행을 하면 NULL 오류가 뜨는데 이건 Mybatis의 오류이다. 그래서 밑과 같은 쿼리문을 작성하여 NULL 처리를 해주어야 한다.

 

• jdbcType=NULL 명령어를 통해 처리를 해주어야 정상적으로 구현이 된다.

 

이 구현을 통해서 삭제할 때 클릭 이벤트의 과정을 알게되었고 JSON으로 공백을 보낼 때의 방법을 이해하고 쿼리문 작성법을 알게 되었다.

 

Optional int parameter 오류 직면

java.lang.IllegalStateException: Optional int parameter ‘b_no’ is present but cannot be translated into a null value due to being declared as a primitive type. Consider declaring it as object wrapper for the corresponding primitive type.

위와 같은 오류를 직면하였다.

많은 삽질을 통해 알아낸 결과는 …
View에서 Controller로 데이터를 보낼 때 값을 제대로 보내주고 있지 않은 것
자세히 살펴보니 JSP 파일에서 오타로 인해서 Controller가 받지 않았던 것이다.

 

@SessionAttributes

세션을 저장하고 사용하기 위해 위의 어노테이션을 사용하면 자동으로 세션을 가지고 다니게 된다.

 

• @SessionAttributes를 통해 세션을 가져온 상태
• @ModelAttribute를 통해서 세션을 가져올 수도 있다.
• Model객체로 View로 데이터를 보냈다.

 

redirect시 SEQ를 가져가야 할 때

어떤 행동을 마치고 redirect를 통해 값을 들고 갈 때 SEQ가 없이 가면 행동한 값을 가지고 이동하지 못한다.

 

• 수정하고 글 상세보기로 redirect를 할 때 seq를 가져가기 위하여 수정된 board라는 객체의 getB_no();를 하여 SEQ를 가져가도록 한다.

3. 파이널 프로젝트를 마치며

약 4달간의 길면 길지만 짧다면 짧은 기간동안 정말 많은 일들이 있었다.
자바를 처음 배울때의 그 끔찍함과 프로젝트 기간 동안 구현이 안되면 정말 답답하고 미치겠던 그 느낌 하나하나가 다 기억이 난다.

 

이번 프로젝트를 통하여 많은걸 배웠고 내가 그래도 도움이 되는 존재라는 것을 알았다.
내가 생각하는 것처럼 구현하는 것이 쉽지 않았고 배운 이론을 활용해도 구현이 안될 수도 있다는 것을 깨닫고 정말 많은 삽질과 노력이 필요한 것을 알았다.
그리고 협업의 중요성은 어딜 가도 빠뜨리지 않고 강조하고 싶다.

 

처음 KOSTA에 들어와서 교육을 받을 때 그 느낌은 아직도 잊혀지지 않는다.
지금 생각해보면 참 쓸데없이 무식 했다고 표현해도 될 정도로 단지 하고싶어졌다고
배우러 왔던 패기가 대단했다고 생각한다. 물론 그 패기만큼 잘 했다고 생각하진 않지만…

 

처음엔 그저 잘하고 싶은 마음 뿐이었는데 마음이 급해서 그런지 몰라도 시간을 투자한 만큼의 아웃풋은 나오지 않은 것 같다. 하루 7시 기상해서 19시 수업 종료 후 22시까지 자습.. 귀가 후 02까지 재복습 후 취침.. 4개월의 반복..
머리가 나쁘면 몸이라도 사용하라고 했던 조상님들의 말을 빌어 이해가 안되면 눈으로 바르고 최대한 머리를 굴리려고 노력했다.
지금 생각해보면 참 무식했지만 그래도 이렇게라도 했기 때문에 그나마 이정도까지 배울 수 있었지 않았나 싶다.

 

인생에서 정말 바쁘고 정신없이 보낸 4개월이었다. 
하지만 놀라운건 이렇게 정신없는 하루하루를 보냈어도 더 배우고싶고 더 욕심이 나는 증상을 보인다는 것이 신기하다. 나도 처음엔 의심했지만 이번 교육을 계기로 확실히 깨달은 것 같다.

 

앞으로는 교육기관에서 배웠던 기본적인 내용들을 바탕으로 하여 새로운 기술들과 필요한 내용들을 학습하며 일지로 기록하려 한다.

교육기관보다 더 알차고 바쁜 하루하루를 보내서 꼭 내가 원하는 개발을 하기 위해 노력해야겠다.