멋사 여덟 번째 과제

olhsg·2023년 5월 29일

멋쟁이 사자처럼

목록 보기

8/15

일곱 번째 과제를 이어서
Todolist를 계속 만들 것이다!

6. Todo 생성

이번에는 관리자 페이지가 아닌 todo 페이지에서 todo를 생성하는 기능을 추가할 것이다!
템플릿 파일을 만들기 전에 생성 페이지에서는 제목, 설명, 중요도를 입력해야 하므로 입력 폼이 필요하다!
todo > forms.py 파일로 이동

django에서 기본으로 제공해 주는 forms 호출
현재 파일에서 models 파일의 Todo 함수 호출

변수명이 TodoForm인 class 함수 정의 (장고의 forms 클래스의 ModelForm을 상속)
Todo 모델을 변수 model에 저장하고
Todo를 생성할 때 입력할 제목, 설명, 중요도를 fields 변수에 저장!

그리고 이제 템플릿 파일을 작성한다!
todo > templates > todo > todo_post.html 파일 생성

위와 같이 코드를 생성한다! 생성 템플릿 파일에서 주목해야 하는 점은
폼은 POST 방식으로 전달하기 때문에 csrf_token이 필수라는 것이다
그리고 PhotoApp에서도 그랬듯이 form.as_p 를 입력해 폼을 HTML P태그를 사용해 렌더링!

다음은 뷰 파일을 입력할 차례이다
todo > views.py 파일로 이동

todo_post는 form을 사용하기 때문에 조건문을 사용하여 들어오는 요청이 POST인지 판별하는 코드를 작성하고, POST 요청이면 폼을 검증하고, 데이터를 저장하는 코드를 작성!

그리고 만약 요청이 POST가 아닌 GET이면, 템플릿에 form을 나타내는 코드를 작성
이 또한 PhotoApp에서 작성했던 것과 유사하다!

뷰 코드를 다 작성했으면 urls.py 파일로 이동해서

todo_post의 url을 설정하는 코드를 추가하고,

todo_list.html 파일로 가서 Add Todo 라는 텍스트에 클릭했을 때 todo_post 템플릿 파일이 웹에 보여질 수 있도록 url 설정을 해 준다!

웹 페이지에 잘 나오는지 runserver를 실행

Add Todo 텍스트를 클릭했을 때 이러한 화면이 나온다면 성공!

이렇게 Todo를 입력하고 등록을 누르면

Todo 목록에 추가된 것을 확인할 수 있다! 그럼 성공 > <

7. Todo 수정 기능

todo 수정 기능은 todo 생성과 유사해 만드는데 어려움은 없을 거다!
todo > templates > todo 폴더에 todo_edit.html 파일을 만들어주고, todo_post.html에서 작성한 코드를 그대로 적되, 버튼 이름은 다르게 작성해 줄 거다!

빨간색 밑줄 친 부분만 변경하면 된다!
이제 views.py 파일로 이동해서

위 코드를 추가하자! todo_post와 비슷한데 다른 점이 있다면 폼에 기존 Todo 데이터를 전달해야 하므로 id값으로 구분해서 todo를 가져온다는 점이다!
그리고 instance를 사용하는데 이는 폼에 객체를 전달할 때 사용하는 것이다
고로 기존 데이터를 수정할 수 있도록 코드를 작성한다 생각하면 된다

후에 urls.py 파일로 이동

밑줄 친 부분을 추가한다
pk는 몇 번째 데이터인지 구분하는 것으로 이를 int 즉 정수형으로 가져온다는 의미이다

그리고 수정 기능 역시 Todo 목록에서 수정하기를 클릭했을 때 해당 템플릿 파일이 웹에 보여질 수 있도록 설정해줘야 하기 때문에 todo_list.html 파일에서 url 설정을 해 준다

이제 runserver를 해서 todo목록에서 수정하기 버튼을 클릭했을 때

위와 같은 화면이 나온다면 성공! 수정할 내용을 입력하고 업데이트 버튼을 클릭하면

이렇게 수정된 todo 목록을 볼 수 있다!

8. Todo 완료

todo > templates >todo 폴더에서 done.list.html 파일을 생성하고

위와 같이 코드를 작성한다. 우선 다른 html 파일처럼 똑같이 css 스타일 시트를 넣어주고
홈으로 돌아갈 수 있는 버튼을 만들고, todo_list.html 템플릿 파일을 url로 연결!
done.title을 클릭했을 때 상세보기 창으로 이동할 수 있도록 todo_detail.html 템플릿 파일을 url로 연결해주면 된다

그 후 views.py 파일로 이동

Todo 데이터 중 complate=True, 즉 완료가 된 Todo 데이터들을 변수 dones에 저장하고,
dones를 템플릿 파일 done_list.html에 return하게 하는 함수를 작성한다
이렇게 하면 완료된 Todo를 조회할 수 있는 함수 완성

todo 데이터를 id로 구분하여 가져온 뒤 todo 변수에 저장한 뒤,
todo를 complete=True (완료) 상태로 설정한 뒤 save()로 저장한다!
이렇게 작성하면 Todo를 완료로 바꿔주는 함수 완성~

이제 views.py 파일에서 url을 설정!
위와 같이 done_list, todo_done 를 추가하고,
마지막으로 todo_list.html 파일로 이동

빨간색 밑줄 친 부분을 추가해 준다
그럼 완료한 Todo 목록을 클릭 했을 때와 완료 버튼을 눌렀을 때 해당 템플릿 파일이 웹으로 보여질 수 있다!

이제 Terminal에서 runserver를 실행!

홈화면에서 완료한 Todo 목록 버튼을 클릭하면 위 화면이 나오는 것을 볼 수 있다!
그리고 홈 화면의 Todo에서 완료 버튼을 클릭하면 홈 화면에서 사라지고,
완료 목록으로 들어가는 것을 정상적이게 확인한다면 기능 구현에 성공한 것이다!

이렇게 django를 이용해 Todolist 프로젝트를 끝낸 후에는
다음 프로젝트 API에 대해 공부했다!

9. API

API란?

두 개의 SW 요소가 서로 통신할 수 있게하는 메커니즘으로 OS와 응용프로그램 사이의 통신에 사용되는 언어나 메시지 형식이다.
API는 Application Programming Interface의 약어이다.
예시로는 식당 점원을 들 수 있다. 사용자가 점원에게 음식을 주문하면, 점원은 이러한 메시지를 요리사한테 전달한 뒤 완료된 요리를 사용자에게 전달하는 방식이다.
또 다른 예시로는 우리가 흔히 사용하고 있는 코딩 프로그램이다. 사용자가 해당 프로그램에서 제공하는 함수를 입력하여 실행하면, 해당 프로그램은 코드를 실행하며 사용자가 원하는 값을 출력해 주기 때문이다.

API 아키텍처는 클라이언트, 서버 측면으로 설명되는데 총 4가지 방식으로 작동한다.

(클라이언트): 요청 ---> : 요청을 보내는 API (Ex: 식당 손님, 프로그램 사용자)
(서버): 응답 ---> : 응답을 보내는 API (Ex: 요리사, 프로그램)

1. SOAP API 방식
  단순 객체 접근 프로토콜 사용
  클라이언트, 서버는 XML을 사용해 메시지를 교환하고
  과거에 많이 사용했던 유연성이 떨어지는 API

1. RPC API
  원격 프로시저 호출이라고도 함
  원격에 위치한 프로그램을 로컬에 위치한 프로그램처럼 사용할 수 있음
  분산 네트워크 환경에서 더 나은 프로그래밍을 위해 등장
  다양한 언어를 가진 환경에서 쉽게 확장 가능

1. Websocket API
  JSON 객체를 사용해 데이터를 전달하는 최신 웹 API 개발
  클라이언트, 서버 간의 양방향 통신 지원
  서버가 연결된 클라이언트에 콜백 메시지를 전송할 수 있어 REST API보다 효율적

1. REST API
  오늘날 가장 많이 사용되는 API며 가장 대표적
  클라이언트, 서버 간의 양방향 통신 지원
  (클라이언트): 요청(데이터) ---> (서버)
  (서버): 입력 사용해 함수 시작(출력 데이터) ---> 클라이언트
  클라이언트와 서버는 HTTP를 사용해 데이터 교환
  서버가 요청 간에 클라이언트 데이터를 저장하지 않는 무상태가 주 특징

이번에는 Open API에 대해 알아보자!

Open API란?

누구나 쓸 수 있또록 공개된 API
정부의 공공데이터포털, 코로나 확진자 현황, 카카오 or 네이버의 무료 Open API
- 유형 4가지
  프라이빗(Private): 기업 내부에 존재하며 시스템과 데이터를 연결하는데만 사용
  퍼블릭(Public): 누구나 사용 가능하며 제 3자가 API와 상호 작용하는 앱 개발 가능
  파트너(Partner): 기업, 대기업의 파트너십을 지원하기 위해 권한이 부여된 개발자만 액세스 가능하고 특정 비즈니스 파트너와 공유
  복함: 2개 이상의 API를 결합해 요구 사항, 동작 등을 처리하는 API
장점
개발 시간 감소 (새로운 개발을 할 필요가 없으므로)
비용 절감
유지보수가 수월하고 누구나 쉽게 이해할 수 있어 협업에 용이