JAVA 웹개발 과정 국비 세미 프로젝트 후기

64~69, 71~76일차

※ 배우는 과정이므로 정확하지 않을 수 있습니다.
잘못된 점은 알려주시면 수정하도록 하겠습니다!


++ 22.03.03 추가

학원 수료 후 조원이 배포한 것을 옮겨서 내 AWS EC2 인스턴스에 배포했다.
github 바로가기
웹사이트 바로가기

1. 프로젝트 후기

프로젝트 기간은 12/6~ 12/22일까지 휴일 포함 총 14일이었다.
12/22일에 끝나자마자 후기를 쓰려고 했는데, 긴장을 안했다고 생각했는데 생각보다 긴장을 많이했었는지 끝나자마자 컨디션 회복에 힘쓰느라…
그래도 이번주가 가기 전에는 꼭 정리해야지 하고 드디어 정리한다.
프로젝트에 대한 자세한 정보는 git 프로젝트 repository에 노션 링크를 걸어놓았다.

1) 프로젝트 시작 전..

최종 발표 PPT에도 적은 소감이지만, 사실 프로젝트라는 개념이 나에게는 너무 어려웠다.
한번도 제대로 된 프로젝트(사실 세미도 제대로 된 프로젝트라고 보기 어려운 것 같지만)를 해본적이 없었기에 더 와닿지 않았었다.

프로젝트의 정의를 검색해보면, 개발자가 프로그램을 코딩하여 결과물을 창출하는 일련의 과정 뭐이렇게 설명되어있는데, 사실 이제 처음 개발을 배우는 단계에서 제대로 된 결과물이 어딨으며…
막연하게 나중에 언젠간 개인 프로젝트를 해봐야지! 하는 수준이었다.

일방향적인 수업을 몇개월간 하고 나니, 자 이제 프로젝트 시작입니다~! 하는 강사님의 말이 너무 무책임(이때는)하게 들렸고, 원망도 많이 했다.
‘아니 이렇게 아무것도 안알려주고 그냥 시작한다고?!’ 할 정도로 맨 땅에 내쳐진.. 마치 절벽에 등대고 서있는데 발로 뻥 차여진 기분..
이렇게 어찌저찌하는데 프로젝트가 돌아가는가 싶었다.

2) 프로젝트 기획 단계

일단 6명의 조가 짜여졌고, 전부 비전공자에 경험자가 하나도 없었다.
큰일났다 싶었다 ㅋㅋㅋ
가장 크게 우려되는 점은 열심히는 했지만 결과물이 요상하게(?) 나오는 것이였다.
어쨌든 그런 상황은 막아야 했기에 정말 열심히 다른 국비생 분들의 세미 프로젝트도 찾아보고 여기저기 조언도 얻어보고.. 많은 정보를 검색했다.
근데 다들 후기만 있지 어떻게 시작했고, 어떤 단계를 거쳐 진행되는지가 안나오는 것이였다.
그래서 그냥 우리 식대로 진행하기로 했다. (뭐 다른 방법이 없었음)

  1. 프로젝트 주제 정하기
  2. 요구사항 명세, 정의서 작성하기
  3. ERD 그리기
  4. Wire Frame 그리기

이렇게 놓고 보니까 다 학원에서 하란대로는 했네..
주제는 검색을 많이 해보니 많은 시간을 쏟을 필요가 없대서 조원들의 아이디어 중 가장 괜찮은 것을 바로 채택했다.
그리고 어떤 기능이 필요할지를 일단 정의서에 쭉 적어내려갔다.
나중에야 느낀 것이지만 이때는 뭐가 어렵고 뭐가 쉬운건지 개념도 없어서 아무거나 다 적었는데 지금 처음 버전의 정의서를 다시보면 말도 안되는 양이다 ㅋㅋㅋ
정의서를 바탕으로 테이블을 짰다. 테이블을 어떻게 짜야되는지도 몰랐지만 그냥 되는대로 짰다.
그리고 Wire Frame으로 기본적인 UI 틀을 구성했다. 모티브 사이트의 UI를 많이 참고했다.

3) 기획안 발표

기획안 발표가 끝났다.
다들 비슷비슷한 주제를 가져온 것 같았다.
우리조는 기획안을 굉장히 심플하게 위의 저 4가지만 넣었는데, 잘한 조를 보니 왜 이런 주제를 선택했고 그거를 뒷받침해주는 자료들을 가져왔었다. 이부분은 우리조가 많이 부족하다고 느꼈다.
하지만 기획안이니까..!
그리고 우리조의 요구사항 정의서를 보니까 다른 조들보다 너무 양이 많을 것 같아 경량화 작업을 거쳤다.
참 잘한 일이었다^^

4) 프로젝트 시~작!

나는 주요 기능보다 다양한 기능을 구현해보고 싶어서 이것 저것 사이드 기능을 많이 담당했는데, 조금 아쉬움이 남았다.
이런 저런 기능들을 다양하게 구현해보는 것도 좋지만 아무래도 주요 기능이 더 구현하는데 어려움도 있고, 성취감도 높아서 만약 다시 돌아간다면 주요 기능을 맡지 않을까한다.
그래도 다방면으로 다른 조원들의 코드도 보고 같이 코딩도 해서 아예 손을 안대진 않았어서 다행이었다.

일단 처음 웹사이트의 틀을 잡는 것부터가 굉장히 힘들었다.
우리조원들은 다들 풀스택이라고는 하지만 백에 흥미가 많은 편이었고, 나도 프론트를 싫어하는 편은 아니지만 백에 흥미가 더 있는 편이여서 UI에 많은 시간을 투자하지 말자는 의견을 모두 동의했다.
UI에 많은 시간을 투자하지 말자가 부트스트랩 템플릿을 가져다 쓰자가 되면서, 좋을 것 같았는데 부트스트랩 템플릿을 찾고, 그것을 짜깁기하는데도 상당한 시간이 많이 소요되었다.
특히 거의 모든 템플릿은 html 기반이여서 jsp만 다뤄봤던 우리는 임시방편으로 html을 jsp로 바꿔주는 작업을 했는데 여기서도 꽤나 고생을 했다.
사실 지금도 제대로 썼는지는 모른다. 조금 더 찾아봐야겠다.
일단 깨지지만 않게 만들었다..

그 이후부터는 백 작업이라 조금 수월했다. 배운 것을 그대로 쓰는 것은 어렵지 않았고, 다만 배우지 않았던 기능이라던지 어떻게 시작해야할지 모르겠는 기능은 구글링의 도움을 많이 받았다.
프로젝트를 하면서 막혔던 부분은 아래에 따로 정리할 예정이다.

5) 혼돈의 git 사용

조원들 대다수가 git을 한번도 써보지 않았거나, 나처럼 써보긴 했지만 협업을 할 때 사용해본적 없다보니 처음 git을 시작하는 것부터 굉장히 삐그덕거렸다.
3일 정도는 리포지토리를 갈아엎고 fork하고 clone하고.. 이런 작업을 계속 했던 것 같다.
강사님도 세미때 git을 추천하지는 않으셨지만 지금 생각해보면 git 없이 작업하는게 더 힘들지 않았을까 하고 느낀다.
그래도 git을 많이 다뤄서 조금 자신감이 있었던 것이 나여서(…) 내가 pr을 승인하는 권한을 가지게 되었다.
git code 관리자가 되면서, 다른 사람들의 코드도 더 자세히 볼 수 있어서 결과적으로는 굉장히 만족스러웠다. 물론 시간도 많이 뺏기고 스트레스도 무지 받았다. 그래도 내가 잘못 승인하면 전체 코드가 망가질 수있다는 생각에 더욱 열심히 했던 것 같다.

6) 느낀점

아니 6번까지 썼는데 내용이 별로 없네..
뭐 세세하게 쓰자면 한도끝도 없지만 중요한 건 배우고 느낀 점이므로..

  1. 설계가 중요하다.
  2. push하는 사람이 한명은 있어야 한다.
  3. 프론트는 생각보다 시간이 많이 들어간다.
  4. 시간 분배를 잘하자.
  5. 조원들과 의사소통이 잘 되었는지 계속 확인하자.

1번은 내가 봤던 거의 모든 프로젝트 후기에 있었던 내용이다. 읽을 때는 이게 뭔데? 설계는 당연히 중요하지..! 라고 생각했는데 끝나고 나니 나역시도 이게 제일 중요한 것 같다.
우리조는 일단 대충 짜고 하면서 채워나가자~ 하는 방식이었는데, 이렇게 하면 실제로 개발할 때 코드를 뜯어고쳐야 하는 일이 빈번하게 발생한다.
특히 DB가 문제였는데, 테이블 컬럼 추가, 컬럼 삭제, 제약조건 변경 등.. 신경 쓸 일이 많아지므로 처음 설계할 때 되도록이면 세세하게 설계를 하고 프로젝트를 시작하도록 하자.

2번은 어느 후기에서도 비슷한 말이 있었던 것 같다. 내가 나쁜 사람이 되기 싫어서 말을 아끼다보면 결국 이도저도 아니게 된다. 할말은 하고 나중에 털어버리면 된다. 대신 비난은 절대 금지..
강사님께서 하신 말 중에 원인에 집중하지말고 결과에만 집중하면 상대방을 탓하지 않고 결과를 어떻게 해결할지에 집중할 수 있다고 하셨는데 정말 좋은 말이라고 생각한다.
돌이켜보면 내가 스트레스 받았던 상황들이 다 원인에 집중해서 그런 것인 것 같다. 앞으로 더욱 조심해야겠다는 생각이 들었다.

3번은 조금 아쉬웠던 부분이다. 애초에 처음부터 UI에 많은 노력과 시간을 쏟지 말자!라고 정하고 프로젝트에 들어갔는데도, 당장 보이는 부분이 UI다보니 이것만 고치고.. 저것만 고치고.. 이러고 있는 나를 발견할 수 있었다.
물론 그렇다고 백을 소홀히 한 것은 아니지만, 조금은 더 내려놓아도 되지 않았을까.. 하는 아쉬움이 있다.

4번.. 가장 힘들었던건, 내가 구현한 부분이, 그리고 조원들이 구현한 부분이 전체 프로젝트의 몇 %인지 알 수 없다는 것이였다. 내가 지금 잘하고 있는건지, 뒤쳐진 것은 아닌지.. 매일 매일 쫒기는 기분으로 프로젝트를 하다보니 마음에 여유가 없었던 것 같다.
이 부분은 다음 파이널 프로젝트를 하면서 조금 더 칸반보드를 세세하게 나눠서 정리하면 나아질 것이라고 생각한다.

5번은 개개인의 문제라기보다는.. 가끔 일어나는 해프닝(?)이었는데, 내가 이해했다고 다른 조원들이 이해했다고 가정하고 넘기지 말자라는 교훈을 얻었다.
더이상의 이야기는 조원들이 볼 수 있으므로.. 생략 ㅎㅎ

2. 배운 것이나 조금 더 공부해야 할 것

사실 대부분의 문제점들은 스프링으로 넘어가면 해결이 될 것이라고 생각한다.
스프링을 배운지 1일차이지만.. 그 안에서 내가 불편하다고 느꼈던 것들이 몇 번 언급이 되었기 때문이다.
또는 아직 내가 어떠한 부분을 제대로 이해하지 못해서이거나..
초반부에 조금 정리하다 말았지만, 그래도 정리해놓은 부분을 남겨본다.

1) 협업에서의 git 사용

혼자 git을 사용할 때와 여러명이 프로젝트를 협업할 때는 다르다.
기록용으로 올릴 때는 워크 스페이스 째로 리포지토리에 올려도 된다. 나도 이 방법을 사용하고 있었다.
그러나 다른 사람들과 협업할 때는 src 폴더만 올리는 것이 좋다고 한다.
또한 gitignore은 생각보다 많은 것을 넣어야 한다는 것이다.
gitignore가 필요하다는 것은 알고 있었지만, 혼자 기록용으로 git을 사용했기 때문에 중요성을 잘 알지 못했다.
그러나 주 목적인 특정 IDE에 종속되게하지 않게 만들려면 내 생각보다 많은 것을 넣어야했다.
이 부분은 gitignore를 자동으로 만들어주는 사이트와 구글링과 강사님의 도움을 많이 받았다.

2) jsp:include

헤더와 푸터를 모든 페이지에 넣을 수 있는 방법이 없을까 생각하다가 찾아낸 방법이다.
현재 jsp 파일에다 다른 파일을 포함시켜 사용할 수 있는 방법이다.
그런데 템플릿을 옮겨와서 사용하려고 보니 이 jsp:include 코드만 넣으면 템플릿이 깨지는 현상이 발현되었다.
도저히 이유를 찾을 수 없어서 결국 다른 템플릿을 사용했는데, 아마 cdn과.. 다른 js파일 css 파일 등등이 충돌해서 그런것이 아닐까.. 아직 jsp의 구조를 잘 몰라서 그런 것 같다는 생각이 들었다.
이 부분은 프로젝트 때는 시간이 없어서 그냥 넘어갔는데, 동일한 상황을 다시 만들어서 강사님께 여쭤본 후에 업데이트를 할 예정이다.

3) Page Navigator

페이지 네비게이션을 만들 때, 수업 때 배웠던 내용은 dao에서 메소드를 만들어서 String 값으로 네비를 만들어주고, 그 값을 jsp로 보내서 jstl로 출력하는 방법이었다.
문자열 안에 태그를 적어주는 것이 비효율적이라고 느껴서 list<String>으로 받아와서 jsp에서 출력해주려고 했는데, 그렇게하면 a태그를 적어줄 수가 없는 것이다.
«, »와 각각의 번호를 누를 때 이동하는 페이지가 다른데 이거를 jsp에서 제어할 방법을 찾지 못했다. 결국 다시 배운 방법으로 돌아와서 구현했다.
이 부분도 강사님께 여쭤보고 업데이트 할 예정이다.

4) rs.next()

메소드를 만드는 중에 체크해본다고 System.out.println(rs.next())를 하고 코드를 실행했는데 계속 결과값이 이상하게 나오는 거다.
알고보니 rs.next()는 포인트를 이동하는데 이미 sysout으로 포인트가 이동되버려서 첫번째 레코드 값이 건너뛰어지는 것이였다.
rs.next() 값을 체크해볼 때는 조심하자..!

5) 쿼리문에 검색 조건 넣기

검색 기능을 구현할 때, select와 option 태그로 검색 조건과 키워드를 sql문에 삽입하는 방법을 사용했다.
예를 들면 title, writer, contents 등 컬럼 명과 검색 키워드를 input 태그로 받아와서 sql문 WHERE 컬럼명 LIKE ‘%키워드%’ 로 맞는 레코드를 찾아왔다.
이 때, pstat.setString을 사용해서 검색 조건과 키워드를 둘다 넣어주었는데, 계속 아무 레코드도 나오지 않는 현상이 발생했다.
알고보니 setString을 할 때는 양쪽에 ‘ ‘ (작은따옴표)가 생기기 때문에 키워드는 setString을 해주는 것이 맞지만 검색조건(컬럼명)을 넣을 때는 직접 +를 해서 sql문 안에 넣어줘야 하는 것이였다.
전혀 생각지도 못했던 부분이라 강사님이 알려주셨을 때 센세이션을 경험했다..!

6) ajax 비동기 구현

프로젝트 동안 비동기 처리를 하려고 여러번 시도했는데 거의 다 실패했다.
그 이유는 jsp를 템플릿을 써서 done 뒤에 콜백함수로 html을 쌓아올리는 것이 너무 어려웠다.
예를 들면 검색을 ajax로 받아서, 검색 버튼을 누르면 검색된 페이지들이 페이지 이동 없이 나오는 것을 구현하려고 했는데 navi와 검색된 레코드 list를 jsp까지 가져오는 것은 성공했는데 콜백함수 안에서 jsp로 어떻게 보내줄지 감이 안왔다.
내가 시도한 방법은 각각 div를 만들어서 append 시키면서 js for문을 돌려서 프로퍼티 값을 가져오게 하는 것이였다.
그러나 이 방법은 너무 비효율적으로 코드 갯수가 늘어나고 보기에도 좋지 않아서 결국 포기했다.
후에 강사님께 여쭤보니, 이런 기능은 ajax로 구현하기 어렵다고 하셨다.
비동기로 어떻게하면 쉽게 구현할지 조금 더 알아봐야겠다고 느꼈다.

3. 마치며..

프로젝트 끝나고 나서 정리해야지! 라고 생각하고 쭉 정리해오던 것들이 중후반 쯤 가니 흐지부지되서 사실 앞쪽에 몇개 정리한 것 빼고는 제대로 정리한 게 없다.
그래도 MVC2 프로젝트보다는 스프링 프로젝트가 조금 더 제대로 된 프로젝트라고 하니 파이널 떄는 조금 더 세세하게 기록해둬야겠다.

프로젝트를 하는 내내 하나에만 집중할 수 있어서 너무 즐거웠다.
다들 스트레스 많이 받고, 심지어는 프로젝트가 굉장히 고되고 힘들었다는 사람들도 많이 있었는데, 나는 정말 즐겁고 재미있게 했다.
하나씩 구현되어지는 기능들이 도전욕을 불러 일으켰고, 조원들과 머리를 맞대며 문제를 해결하는 과정에서 희열을 느꼈다.
정말 프로젝트 기간 내내 주말을 반납하고 밥먹고, 자는 시간 빼고는 코딩만 한 것 같다.
시간 가는 것이 아까울 정도였으니..
이렇게 후기를 쓰다보니 빨리 스프링을 열심히 배워서 파이널 프로젝트를 하고 싶어진다..!!
사실 국비 프로젝트의 안좋은점을 많이 읽었다보니 그냥 혼자할까.. 라는 생각도 했었는데 정말 뜻깊고 좋은 경험이었다고 생각하고, 하길 잘한 것 같다.
이상 후기를 마친다!

댓글남기기