[3차 과제 프로젝트 회고] 레드마인 API를 활용한 이슈 추척 App. 구축기

목차

1. 내가 한 것과 잘한 것

2. 배운 것과 성장 지점

3. 아쉬운 것과 다음에 다시 시도해 볼 수 있는 것

4. 미래의 나에게 

 

---

3차 프로젝트 과제로 레드마인 API를 활용한 이슈 추적 application 구축을 진행하였다. 

총 7주 동안 진행하였다. 기본적인 화면단은 2차 과제 때 화면을 사용하였고, 필요한 화면만 추가로 개발하였다.

 

개발 환경

	Version
Ubuntu	18.0.4
Java	openjdk1.8.0
Vue.js	2.x
SpringBoot	2.7.7
Maria DB (API)	10.1
Redmine	5.0.4
Maria DB (Redmine)	10.5

 

1. 내가 한 것과 잘한 것

1) 설계 아키텍처대로 구현

 

아키텍처 구성도는 다음과 같다.

 

크게 app server, api server, redmind api server로 구성했다.
APP Server는 스프링부트를 사용하지 않고 vue로만 구성했다, app 서버는 axios로 api 서버와 통신한다.

구체적인 흐름은 다음과 같다.

 

1. 클라이언트가 브라우저에 요청을 하면, APP 서버는 axios를 이용해 API 서버에 요청을 보낸다.

2. API 서버가 바라보고 있는 DB에 유효한 데이터가 있다면, 사용자에게 전달받은 데이터를 담아 webclient로 레드마인 API 서버를 호출한다.

3. API 서버는 레드마인 API에서 응답받은 데이터를 가공하여 사용자에게 응답한다.

 

이런 식으로 구성하게 되면 만약 레드마인의 DB에 문제가 생겨도 API에 적재된 데이터를 활용할 수 있다.

 

 

2) 목표 기능의 80% 이상 구현 완료 

 

레드마인에서 제공하는 기능 중 크게 3가지를 메인으로 구현하고자 했다.

1) 권한별 액세스 제어 2) 프로젝트 관리 3) 일감관리이다. 20%의 기능은 마이페이지 기능인데, 시간관계상 해당 기능은 구현하지 못했다.

 

 

Task별로 기록하는 방법을 처음 써봤는데, 지금 당장 구현하지 않더라도 나중에 구현할 기능, bug fix등과 같이 하나의 기능 안에 세부적으로 구현이 필요한 기능을 정리할 수 있어서 좋았다. 

 

 

3) 개발 순서 정하기 

 

레드마인 api 분석을 끝내고 본격적으로 개발을 시작했다.

 

개발 순서는 다음과 같이 정했다.

포스트 맨으로 테스트  ➡️  app 적용  ➡️ 포스트 맨으로 테스트 ➡️ 화면단 연결 ➡️  화면단에서 기능 테스트 

 

위와 같은 순서로 진행하는 게, 어디서 문제가 발생했는지 파악하기 쉬워서 효과적이었다.

 

레드마인 api 명세서 정리

 

 

 

4) 테스트 시나리오 작성 

3차 과제 때는 팀원들 앞에서 직접 시연을 해야 한다.

당황하면 열심히 개발한 기능을 보여주지 못할 거 같아서, 테스트 시나리오를 작성했다.

 

아 왜...

테스트 시나리오 잘 썼다고 생각한 게, 특정한 경우에 에러가 발생하는 걸 확인했다 ㅋ...

예를 들어, 구성원 추가를 완료한 이후에 다시 구성원 추가 버튼을 클릭하면, 이미 구성원으로 추가된 사용자가 구성원 추가 모달 창에서 다시 보이는 것이다. 화면이 로딩되는 시점과 api를 호출하는 시점이 달라 발생한 에러인 거 같다.

 

(하지만 그 에러를 확인했을 때는.... 이미 발표 하루 전이었기 때문에 구성원 추가 이후에는 다시 구성원 추가 모달창을 클릭하지 않고, 다른 기능을 보여주는 걸로 넘어갔다. ^^..)

 

테스트 시나리오 일부

 

 

5) 사용자 권한별 접근제어

 

actor는 크게 3명으로 정의했다. 은근히 까다로웠던 작업이었다. 권한별 접근제어는 개발하려면 한도 끝도 없는 거 같다..ㅠ

 

2. 배운 것과 성장 지점

 

2차 과제 때와 마찬가지로 Study log를 열심히 작성했다.

그중 오래 기억하고 싶은 내용을 정리해서 포스팅을 했다.

포스팅하면서 더 깊게 공부한 내용들도 있었다.

 

1) webclinet를 이용하여 api 서버 -> 레드마인 api로 파일 업로드 (다중 파일 업로드 가능)

https://seongeun-it.tistory.com/287

[Redmine API] webclient를 이용하여 api 서버에서 레드마인 api로 파일 업로드

2) Docker로 Redmine 구축

https://seongeun-it.tistory.com/283

[Docker] Docker로 Redmine 구축하기(Ubuntu 18.04 / redmine 5.0.4 / mariaDB 10.5)

3) 로컬 PC에서 mariaDB container로 접속

https://seongeun-it.tistory.com/284

[Docker] 로컬 PC에서 mariaDB container로 접속하기

4) vue-simple-context-menu 적용

https://seongeun-it.tistory.com/285

[Vue.js] vue2에서 vue-simple-context-menu 사용

5) Vuetable-2 적용

https://seongeun-it.tistory.com/286

[Vue.js] vuetable-2 적용

 

6) 아직 포스팅하지 못한 내용들

 

 

언제 포스팅할지는 모름!

 

 

3. 아쉬운 것과 다음에 다시 시도해 볼 수 있는 것

1) 아쉬운 것

 

- 레드마인 API 내 미지원 기능 정리

• Issue 작성자 변경 불가
  • [추후 개발 필요] header에 X-Redmine-Switch-User:사용자명으로 해당 사용자임을 명시하는 방법이 있음

  User Impersonation
  As of Redmine 2.2.0, you can impersonate user through the REST API by setting the X-Redmine-Switch-User header of your API request. It must be set to a user login (eg. X-Redmine-Switch-User: jsmith). This only works when using the API with an administrator account, this header will be ignored when using the API with a regular user account.
  
  If the login specified with the X-Redmine-Switch-User header does not exist or is not active, you will receive a 412 error response.
  

• 일감 상태 생성 불가
• 유형 전체 조회만 가능
  • 유형 생성, 수정 기능 미지원
    • → 관리자 페이지에서 생성해야 함
    • → api 서버의 별도의 테이블 구성 하지 않았음.

- Issue 정리

vue-simple-context-menu.esm.js 파일의

simple context-menu 기존 optionClicked 메서드를 변경하였음 따라서 해당 모듈 업데이트된다면, 정상적으로 동작하지 않을 것임으로 리팩토링 필요하다.

optionClicked: function optionClicked(option) {
      // this.hideContextMenu();
      this.$emit("option-clicked", {
        item: this.item,
        option: option
      });
    },

    // custom start
    subMenuShowUp: function subMenuShowUp(option) {
      this.$emit("subMenu-clicked", {
        item: this.item,
        option: option
      });
    },
    // custom end

 

- URI 설계 

URI에도 설계 원칙이 있다는 걸 처음 알았다. 명사는 단수형보다 복수형을 사용해야 한다는 게 새롭게 알게 된 내용인데, 어쩐지 레드마인 api에서도 projects, users와 같이 복수로 사용했더라... ㅎ 다음엔 이 부분을 신경 써서 일관되게 개발하고 싶다. 

 

- Component 설계 

2차 과제에 비해 새롭게 만든 화면도 많아지고, main-menu, sidebar와 같은 컴포넌트도 많아졌다.

그런데 이걸 제대로 활용하지 못한 거 같아 아쉽다 ㅠ 예를 들어 main-menu에 있는 탭을 클릭하면, main-menu에 프로젝트 이름을 세팅해 주게 되는데, 프로젝트 이름을 세팅하려고 매번 api를 호출하는 건 아닌 거 같다.  시간 관계상 흐린 눈으로 넘어갔는데, 실제 업무에서는 어떻게 하는지 궁금하다. 조금 더 효율적인 component 설계를 하기 위해 어떤 식으로 구성하는지 공부할 필요가 있다.

 

2) 다음에 시도해 볼 것

 

- JWT Token 인증

- Validation Provider 사용

- 레이아웃 좀 더 깔끔하게 다듬기 

 

4. 미래의 나에게 

플젝 드. 디. 어 끝났다. 한 달 동안 주말 출근 3번 하고.. 야근은 셀 수 없다. 과연 내가 끝까지 할 수 있을까?라는 의문이 들었지만, 그래도 일단 계속했다. 아직 부족한 게 많지만, 그래도 스스로 만족할 만한 결과물을 만들어서 뿌듯하다. 그리고, 3개월 전과 비교했을 때, 아주 많이 성장했다는 사실이 너무 기분 좋았다. 플젝 당시 썼던 일기로 이번 프로젝트 회고를 마무리하겠다.

 

2023/02/22

오랜만에 생각노트, 요즘 3차 플젝하느라 정신이 없다. 처음 2차 과제했을 때보다 많이 성장한 게 느껴지지만,
해야 할 일들 앞에서는 이제까지 했던 일들이 작아지는 거 같다.
마음은 자꾸 조급해져 가고 여유가 생기지 않아서, 간신히 잡은 갓생루틴들이 깨질 조짐을 보이고 있다.

(중략) 

시간이 정말 빨리 간다. 그래서 무섭다. 하지만, 거뜬히 이겨내야지. 해 내야지

 

이겨낸 나 멋.져