2023/01/24 - 2023/01/27

월요일에 연차를 써서 3일의 달콤한 휴가가 끝이났다... 다시 행복한 직장생활을 시작해보자~

이번 일 내용은 엑셀로 파일을 따로 받았다. 수정할곳이나 말로 설명하기 어려운 부분이 있어서이다. 내용을 정리 해보면 기존 Status라는 컬럼은 1,2,3의 값을 가졌지만, 0을 추가하여 그에 맞춘 수정을 하는일이다.

재밌을거같다 ㅎㅎ

1. Enter the line버튼을 눌렀을때 테이블에 새로 등록을 한다. 컬럼 중 Status는 0으로

2. EndShift의 경우 Status가 0이였던것을 1로 Update해준다.

3. 검색항목에 状況(상황)을 추가한다.*조건 상황과 日付(날짜)는 필수 항목이고, 둘 중 하나만 입력하면 반대쪽 필수(required)는 없애기.

4. 검색결과에 날짜도 나오도록 추가

5. 검색 후 상세페이지부분에서 4개의 버튼을 추가하고, status값을 변경 할 수 있게한다. Status값에 따라 버튼이 다르게 나오게 설정

시작해보자~

1-1. 버튼을 눌렀을때의 컨트롤에 들어가, 모델로 들어간다.

1-2. 추가할 테이블과 동일한 class타입으로, view로부터 받은 데이터값을 파라미터에 넣어준다.

1-3. Status는 0으로 설정해주고 create를 진행해준다.

2-1 어떤 대상을 update할지 알아야 하기 때문에, Post로 받은 정보로 db에서 데이터를 가져온다.

2-2 가져온 값의 Status값이 0인경우 그 대상을 1로 update

3-1. 프론트 앤드부분 이다 select 항목을 만든다

3-2 item에 들어갈 배열을 만들어준다.

지금처럼 직접 선언을 해주어도 되고, table이나 서버에 값을 설정한 경우에는 서버에서 get으로 값을 가져온 데이터값을 넣어도 된다.

3-3. 데이터의 실시간 변동을 알아야하기 때문에 watch를 사용한다. 각각의 bool변수를 만들어 required부분에 넣어준다.

4. 검색결과 테이블에 날짜를 추가

5. 버튼을 만들어야 하기때문에 버튼 vue파일을 생성 두 버튼은 같은 위치에 있고, Status에 따라 값이 달라지고, 처리하는 메소드도 다르다.

방법은 2가지있다.

첫번째. End Shift버튼과 Cancel End Shift버튼을 각각 만들어, v-if Status === ??? 로 어떤걸 표시할지

두번째. Vue파일은 하나를 만들고, Status값을 보내주어, Vue파일안에서 props로 Status를 받고 어떤걸 표시할지

나는 두번째 방법으로 해보겠다.

5-1. 메소드 처리

난 이벤트 처리를 위해 한 자리의 2개의 버튼이 있기 때문에 한 자리의 3개의 메소드를 준비했다.

1번 메소드 endShift처리

2번 메소드 endShiftCancel처리

3번 메소드 현재 status를 읽어 어떤 메소드를 처리할지 결정하는 click이벤트 메소드

5-2 같은방법으로 EndofDuty버튼도 만들어준다.

5-3 프론트 처리를 다 했기 때문에 나머지는 컨트롤에 보내주고 모델에 sql만 추가하면 완성이다.

서버의 코드는 response받은 데이터값을 sql에 넣어 update하는 부분이기 때문에 생략하겠다.

어려웠던점.

1.프론트 부분에서 시간을 많이 뺏긴거같다. Watch부분이나, 버튼vue를 한개만 만들어 수정하는 부분

2. 테이블을 2개 사용하였는데, 연관관계가 이해가 안되서 코딩하는데 생각을 많이 하였다.

느낀점

코딩도 코딩이지만, 먼저 내가 어떤 기능을 추가하는건지 내용을 이해해야 더 빠르고 좋은 코딩이 되는거같다.