제수기 > django > 4

Eunbi Jo·2025년 1월 17일

제수기

목록 보기

66/90

제수기 - 제발 수업내용을 기억해라 / 단순수업정리 시리즈

Ajax

원래 html을 받아서 보여주는데, 데이터를 주는 것이라고 보면 된다.

동기통신 Synchronous 이란?
먼저 동기화를 알아보자. 동기화는 짝을 맞추는 거다.
클라이언트는 서버에 요청을 보냈다가 응답이 올 때까지 기다린다. 응답이 오면 그때 짝을 맞춰서 화면을 보게 되고 화면 위에서 뭘 할 수 있게 된다. 그래서 동기적 처리라고 부른다. 지금까지 배운 게 다 동기적 처리.
그때마다 wating 시간이 반드시 발생한다. 이게 동기적 통신.

이 기다림을 없앨 수 있을까? 해서 비동기통신이 나오게 됐다.
비동기통신
이번에 요청은 주소창이 아니라, 백그라운드에서 보내게 된다.
url이 바뀌지 않아서, 사용자는 여전히 그 창에 머물러 있으면서 요청을 백그라운드로 보내게 된다. 서버는 요청을 받았을 때 어쩔 수 없이 wating 시간이 걸리는데, 그 시간 동안 사용자는 기다리지 않는다. 그냥 화면에 머물러 있으면서 다른 것들 스크롤 해서 본다거나 하는 게 가능해진다. 기다림이 없다. 물론 요청에 대한 응답은 시간이 걸리겠지만, 머물 수 있다.
그래서 짝을 맞추지 않는다.

예제를 통해 비동기통신에 대해 더 알아보자.

비동기통신은 백그라운드에서 자바스크립트로 이뤄진다. 그러면서 url 변동 없이 서버랑 통신을 한다.

그래서 비동기 통신으로만 해야 하는 케이스들이 몇가지 있다. 세 가지 예제를 보자.

1. 회원가입할 때 아이디 중복체크 (이 페이지를 떠나버리면 절대 안 되는 상황. 머물고 있는 상태로 응답을 받아야 함)
1. 검색창에 타이핑하고 있을 때 자동완성을 시켜주는 거. (타이핑하는 와중에 서버랑 백그라운드가 통신한 상황이다.)
1. 게시글 볼 때 '좋아요' '추천' 이런 기능.

회원가입 아이디 중복검사

templeate > uauth > signup.html

자바스크립트 연결

url 등은 당연히 돼있고(나중에 강사님 이슈해두신 코드 살펴보기), 원래 render였던 곳이 이렇게 바뀌었다.

추가된 전체 코드 모습. 사용중인 아이디인지 아닌지 확인하고 메세지를 보낼 수 있게 해놨다.

repository > uauth_repository.py에도 비슷하게 맞는지 아닌지 확인하기 위해 (username 동일한지 아닌지 확인) exists 함수 사용

원래는 사용자 이름만 아니라 페이지를 다 작성하고 한번 보내야 응답이 왔지만

이제는 실시간으로 사용가능한 건지, 아닌지 응답을 볼 수 있다.

게시글 검색어 자동완성 구현하기

'라떼' 검색하면 자동완성 목록으로 저렇게 뜨고

'테스트' 검색하면 자동완성 목록으로 저렇게 뜬다.

이렇게 바로 목록이 나오는 게 백그라운드와 통신을 한 결과다.

template > qna > question_list.html
여기.. 음.. 뒤에 코드만 캡처했는데 앞에 코드도 바뀌었다.

여기 써두신 링크 참고해서 부트스트랩 확인하기

자바스크립 파일은 여기에 넣어두셨다.

j쿼리에 .autocomplete 넣어주고

마찬가지로 JsonResponse로 마무리

질문 추천(좋아요) 기능 구현하기

추천 누르면 콘솔에서 바로 카운트 1이 응답으로 오고, 다시 한번 더 누르면 취소됐다고 나온다.

모델 조치 먼저 필요하다.

아래 코드도 추가하셨다.

Question은 여러 사용자의 추천을 받을 수 있다.
User는 여러 qeustion을 추천할 수 있다.

그래서 ManytoMany 필드가 하나 추가됐다.

✨여기에 related_name은 반드시 추가해야 한다. Question이 User에 대한 참조를 두개를 가지고 있기 때문이다.
하나는 author가 foreinkey로 있고, 또 하나는 voter 추천한 사람으로 있다. 그래서 User쪽에서 보면 헷갈리니까 역참조 이름을 꼭 넣어줘야 한다. 여기서는 questions, question_votes 이렇게 구분해줬다. answer 쪽도 똑같이 해줬음.

추가추가

마이그레이션 꼭 하고, 그러면 테이블이 중재용 링크 테이블이 생겼다.

1번 게시글을 10번 유저가 추천합니다 이런 식으로 정보가 남는다.

uri로 요청 보내고
recommend 클래스 만들었고

유사배열을 진짜 배열로 바꾸기 $ 빼먹으심

fetch는 정상처리가 안 됐을 때 .then을 못타고 catch()는 오류가 발생했을 때 가게 된다. 근데 fetch()는 catch를 안 타서 예외 처리에 대한 게 애매해서 fetch를 안 썼ㄷ다.
그래서 async, await를 같이 썼다. 그러면 then을 안 쓰고도 구현할 수 있다. await로 반환값을 담아서 response 변수에 담을 수 있다.