TIL - [20.08.24] 일정편집API 삽질과 피드백

수업가기 전까지 최대한 많이 해놓자!

 

오늘 할 일

API 완성
-일정검색API완성(디버깅)
-일정편집API 만들기
-그외 API 설계, 만들기

 

TIL

일정조회 API 

시작일, 종료일과 함께 요일이 표시되면 좋겠어서
요일찾는 함수(show_day)를 일정조회API에 적당히 삽입, 조정해봤는데 잘 안 된다. ㅜㅜ
API 다 만든 다음에 다시 구글링해서 만들어야겠다.

일정검색API

-여전히 검색어로 서버에서 전송도 되고 console창에도 찍히는데 프론트엔드에 결과값이 card로 append가 안 된다. ㅠㅠ

+ 보완점

검색결과 없으면 없다고 얼럿 띄우기
검색되는 조건 세분화하기-구글링. '밥을 먹기'일정 -> '먹기'만 검색해도 나오게..

일정편집API(Update)-post방식.

내가 생각한 일정편집의 알고리즘은..
1. '편집' 버튼을 누른다
2. 일정명(todo), 시작일(start_date), 종료일(end_date), .. 메모(memo) 등 일정 작성할 때 넣은 모든 정보들이 수정 가능해진다
-'일정명'으로 해당 일정을 찾아서, 일정 생성과 동일한 대상의 data를 수정 가능하도록 한다.
:검색된or조회된 일정 항목을 모두 표시 -> 사용자는 원하는 정보를 수정
3. 수정된 정보를 제출해 db에 업데이트한다.
: 수정된 부분을 포함해 모든 일정 항목을 다시 db에 update_one().

이 중 2번 과정을 어떻게 구현해야 할지 고민이다.

-일반 캘린더어플처럼 누르면 새 창이 나오고 기존 정보를 불러와 그 내용을 편집할 수 있게 할 것인가?
(약간 어려워보인다)
-아니면 편집버튼을 누르면 각 항목이 input창으로 변해 거기에 편집할 정보를 입력할 수 있게 할 것인가?
내 수준을 고려했을 때 아무래도 후자로 구현해야 할 것 같은데, 이것도 보통 일은 아닐 듯.

-익숙하지 않은 기능을 개발할 때 html을 따로 만들어 완성 후, 잘 동작하면 복붙하라고 했다.
그래서 test파일을 새로 만들어, 거기에서 기존 todo card와 동일하지만 '편집가능한 창'을 먼저 만들어보기로.

https://hianna.tistory.com/318

[HTML] 날짜, 시간 입력 항목 기본값으로 세팅하기

각 input type별 기본 value값 입력형식을 알아보고 기본값을 넣어보았다.

 

이런 식으로.

 

어디에 어떤 형식으로 기본값이 들어가는지 알았으니 이제..
(1)일정명(todo)를 키워드로, db에서 편집을 선택한 일정 data를 찾고
(2)불러온 data를 todo card에 기본값으로 넣어 편집이 쉽게 하고,
(3)편집된 일정을 다시 이 todo card 형식으로 append하게 만들고 편집된 데이터를 db로 보내면 되겠다.

(1)일정명(todo)를 키워드로, db에서 편집을 선택한 일정 data를 찾고
: 이것부터 생각보다 어려웠다ㅋㅋㅋ 왜냐하면 지금까지 실습하면서는 jQuery 상위요소, 하위요소 선택자를 거의 사용해보지 않았기 때문. 구글링으로 해결했다. 
https://jdm.kr/blog/144 제이쿼리 상위요소 가져오기 : .parent() 사용
https://sseambong.tistory.com/218 제이쿼리 하위요소 가져오기 : .find('#id값')으로 활용

그래서 '편집'버튼의 상위요소인 <div class="schedule">를 선택한 다음,
다시 하위요소 중 하나인 <input type='text' value="">의 값을 가져오는 데 성공했다!

이제 이 값으로 db에서 편집할 data를 찾으면 된다.

<< 문제>> : 첫 화면에는 편집할 일정 외에도 전체 일정이 모두 나오는데, 어떻게 편집버튼을 클릭한 '그' 일정의 일정명(todo)만 가져오는가??..

->> 그냥 오늘 수업 가서 튜터님께 질문해야겠다.. ㅠㅠ 흑흑 

 

 

 

앞으로 할 일

-'종일'기능 구현 : 이 체크박스를 선택하면 시작일=종료일로 만들고 input type='time' 값을 0으로 하기.
 온클릭? 함수에 조건문 사용해 구현. 선택되어있을 때 실행할 구문/선택되어있지 않을 때 실행할 구문.

-일정 삭제 : 이 일정을 삭제할지 한번 더 확인얼럿을 띄우는 기능을 추가해야겠다. 누르자마자 바로 삭제완료! 하니 실수로 누르면 큰일날 듯.

- 알림 기능 구현 : 카톡 / 이메일. 서버, 기존 API수정과  알림기능 API만들기.
지금까지 만든 카톡, 이메일 알림기능은 input값으로도 반영하지 않았기 때문에..(일단 아는거라도 해놓으려고)
이 부분은 공부하고 구글링하면서 구현해야 한다.

알아야 할 것은
- 카톡/이메일 선택하는 input type="radio" 의 data는 어떻게 처리되어 db에 들어가는지? true/false? 0/1? 아무것도 체크 안 되어 있을 때는?
- radio가 아닌 checkbox로 할까?.. radio로 하니 클릭하면 선택해제가 안 된다. 이걸로 많은 불편이 발생할지..?
- 카톡 알림 보내주는 플러스친구 어떻게 사용하는지? 가입, 계정생성, test해보기.

 

---

튜터님 피드백

 

1. 일정검색API에서 있었던 오류

let serched_list = response['serched'];
console.log(serched_list.length)
for (i = 0; i < serched_list.length; i++)

완성 코드.

#response는 배열이 아니기 떄문에 response.length로 사용하면 안 된다. console.log로 까보면 response 안의 'serched' 가 리스트 형식이었다. 따라서 response.length 가 아닌 response['serched'].length로 조건문 돌아야. 또는 위의 완성코드처럼 하나의 변수명으로 따로 지정해주고 그걸 쓴다.

 

2.일정편집API에서 필요한 조치

일정편집은 기본적으로
(1) 편집할 내용 조회(GET) (2) 편집된 내용받아서 db에 저장(POST)
이므로 API도 2개가 필요하다.

(1) 편집을 클릭한 일정을 검색해서 그 data를 불러온다. (GET)

• 편집 클릭한 일정은 일정명 대신, 일정명이 똑같아도 절대 겹치지 않는 'db상의 _id값'으로 찾아온다.
  : ['_id'] 의 ['$oid'] 형식. 그러므로 자식요소 찾을 필요가 없다.
  서버(파이썬)에서도 find()대신 find_one으로 사야 한다.
  (단, _id값은 파이썬에서 jsonify 되지 않아 오류 발생 - 어떤 라이브러리 설치해서 그걸로 사용. 구글링하기)
  -그러기 위해서 조회할 때에도 _id값을 숨겨서 가져온다. → '일정조회API'도 약간 수정함.(일정조회도 _id로 해야 하므로)

(2) 2. fix_card에 수정된 내용 input값을 다시 DB에 저장한다(POST) : API 만들어야 함! 여기부턴 내가 하기.

 

내일 할 일

수업내용 복습하기.
튜터님이 찾아준 라이브러리, 코드 구글링해서 정리해두기
내 코드 구조 파악하기(전체적으로)
이후 일정삭제도 id값으로 찾아서 삭제되도록 수정하기. (지금까지 만든 API 모두 _id값 기반으로 동작되도록 수정!!)

 

오늘 실공부시간 - 3:39:41 + 스파르타 수업시간 !

이제 프로젝트 끝나는 날까지 약 10일 남았다..!! 더더 열심히 하자