강의에 따르면 이번 챕터가 제일 어렵다고 한다. (그래도 뭐 별거 있을까 까짓거 열심히 따라해보자.)
지금까지는 웹사이트 화면을 구성하기 위해 브라우저 즉, 클라이언트에 직접적으로 피드와 관련된 필드를 작성했다. 백엔드 즉, 모델에 데이터를 넣어서 뷰를 통해 템플릿으로 이동시켜 웹사이트 화면도 구성해봤으나, 웹사이트에서 피드를 작성하여 피드를 작성하는데에 필요한 데이터가 DB에 저장이 되고, DB에 저장된 데이터들이 올바른 데이터라면 다시 웹사이트에 화면이 표시되는 것을 구현해보도록 하겠다. 인스타그램처럼 동작하는 나만의 웹사이트를 구현하는 것이 나의 목적이니까..
📌 01. 화면에서 데이터 끌어오기
피드를 작성하는데에 필요한 데이터는 "프로필 이미지, 프로필 이름, 피드 이미지, 피드 내용, 좋아요 개수" 정도이다. 웹사이트 화면에서 적은 이 데이터들을 제이쿼리를 이용해 가져오고, ajax 통신을 통해 장고에 views.py에 만들어놓은 함수로 보내면 된다. 여기서 ajax란 무엇일지 한번 정리해보자.
🔎 AJAX(Asynchronous Javascript And XML)
자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능이다. 여기서 비동기 방식에 대해 자세하게 알아볼 필요가 있는데, 비동기 방식이란, 웹페이지를 리로드하지 않고 데이터를 불러오는 방식을 말한다. 예를 들어, 파일을 업로드해야 하는 것과 같은 경우 ajax를 사용한다. 웹페이지를 리로드 하지 않아도 되고 파일만 업로드되면 되기 때문이다. 인스타그램의 피드 이미지를 업로드하는 경우에도 비동기 통신이 요구된다.
공유하기 버튼 즉, id= "feed_create_button"을 클릭하면 웹페이지에 입력된 데이터를 긁어 모으게 된다. image, content, profile_image, user_id, file을 가져와서 데이터가 비어있는지 채워져 있는지 체크를 한다. 이후 긁어 모은 파일을 전송하기 위해서 formdata를 사용해야하기 때문에 만들어준다. (파일이 아닌 일반적인 데이터 같은 경우는 json 형태로 넘기는 것이 보통이다.(rest표준))
ajax에 success, error, complete function이 있는데 각각 성공, 실패, 완료 후 실행되는 callback 함수이다. (callback 함수 : 특정 조건에서 호출되는 함수) ajax api 요청이 성공하면 자동으로 success 안의 코드가 실행되며, 에러일 경우에는 error가 실행되고 complete는 성공이든 실패든 요청이 끝나면 무조건 실행된다. 또한 complete가 실행될 경우 작성된 "location.replace("/main")"로 인해 웹사이트 main 페이지가 띄워지게 된다.
ajax의 data로는 웹페이지에서 긁어온 데이터를 넣고, url을 /content/upload로 만들었기 때문에 해당 경로에 views.py에 함수를 만들어 연결시켜주면 된다.
📌 02. 서버에서 데이터 전달받기
views.py에 UploadFeed라는 class를 생성하고, 이후 urls.py에 ajax에서 만든 url 경로를 맵핑해준다. 이제 views.py에 데이터를 받는 소스들을 작성해주어야 하는데, 이때 이미지는 파일 서버에 저장되게 해주어야 한다. 하지만, 파일 서버가 없다. 그럴 때는 장고에서 제공하는 "media 폴더" 기능을 활용하면 된다.
- file = request.FILES['file'] : 파일을 불러오는 소스
- uuid_name = uuid4().hex : 파일 이름을 영어와 숫자로 된 랜덤 고유 ID를 만들어 사용한다.
- with open(save_path, 'wb+ ) as destionation ~: 파일을 읽어서 파일을 넣음
위 소스들로 인해 파일이 media에 저장되게 된다.
views.py에 <ajax 통신을 통해 서버에서 데이터를 받는 소스>를 만들어주었다면, views.py 안에 UploadFeed 클래스가 urls.py랑 맵핑이 되어야 한다. 아래와 같이 urls.py 소스를 작성해줌으로써 content.views에 있는 UploadFeed가 실행되도록 작성한다.
urls.py 하단에 작성된 MEDIA_URL 소스는 media에 저장된 파일들을 조회하기 위해 필요한 소스이다. (~/media/{파일 이름}으로 조회 가능)
📌 03. 실습. 피드 생성해보기
이제 피드를 생성해보자. 이미지를 드래그하여 드랍하고, 피드 내용을 적고 공유하기 버튼을 누르게 되면 "프로필 이미지, 프로필 이름, 피드 이미지, 피드 내용, 좋아요 개수" 데이터가 ajax를 통해 views.py로 전달된다. views.py에서 받은 데이터 중 파일에 해당하는 것들은 "media/"경로에 새롭게 생성된 고유 ID로 저장되게 되고 같은 이름으로 DB image 필드에 저장된다. 그 후, main.html이 feed를 읽을 때 DB의 각 필드에 저장한 값들을 호출하게 되고, 파일의 경우 media경로를 합쳐서 ~/media/{파일 이름} 으로 호출한다. 정상적으로 이미지가 띄워지기 위해서는 {%get_media_prefix %}를 붙여줌으로써 이미지 주소가 정확하게 표현되어야 한다.
공유하기 버튼을 누르면 피드에 작성한 글이 조회되는 것을 확인할 수 있다. 휴... 더 자세히 이해하려면 반복해서 살펴보고 공부해야겠다 .. ㅠㅠ
📚 요약하자면,
- 데이터를 브라우저에서 긁어온다.
- 긁어온 데이터를 각각 서버에 올린다.(urls.py를 거쳐서 views.py에 맵핑된 클래스(UploadFeed)를 찾아서 코드들이 실행이 됨)
- Feed 객체를 create 하게 되면, 자동으로 DB에 한 줄이 생성이 된다.
- OK(status=200)가 되면 브라우저에서 새로고침을 하여 우리가 만든 Feed를 확인할 수 있다.
https://cholol.tistory.com/548
이 게시물의 모든 저작권은 마이쮸(mychew__)님께 있으며, 저는 오직 학습과 기록을 목적으로 포스팅한 것임을 알려드립니다.
좋은 강의 컨텐츠를 제공해주신 마이쮸님께 감사의 말씀 드립니다. (_ _)
'ToyPJ > Python-Django' 카테고리의 다른 글
| [ToyPJ/Python] django 로 인스타그램 만들기 - 09 로그아웃, 프로필 페이지, 프로필 사진 변경 만들기 (0) | 2023.04.02 |
|---|---|
| [ToyPJ/Python] django 로 인스타그램 만들기 - 08 장고 유저 모델 이용해 사용자 정보 모델 만들기 / 로그인,회원가입API 만들기 / 세션 정보에 데이터 받아오기 (0) | 2023.03.31 |
| [ToyPJ/Python] django 로 인스타그램 만들기 - 06 피드 생성 화면 만들기 (0) | 2023.03.30 |
| [ToyPJ] IMG 서버 대용 (0) | 2023.03.30 |
| [ToyPJ/Python] django 로 인스타그램 만들기 - 05 DB에서 피드 글 불러오기 (0) | 2023.03.29 |
