<오늘 한 일>
- 좋아요 개수 비동기적 반영 구현
사실 이건 오늘 한 게 아니라 저번 주 금요일에서 토요일로 넘어가는 새벽에 했다
저번 주 금요일에 좋아요 구현 실패하고 다른 팀원분이 javascript로 하트 색깔 바꾸는 걸 구현하셨다
그날 좋아요 구현하지 못한 상실감이 너무 커서 그걸 회복하려면 좋아요 개수가 바뀌는 걸 구현해야겠다고 생각했다
내가 처음에 설정한 스크립트 경로의 위치가 문제였던 건지 팀원분이 만들 js 파일에 금요일날 시도하다가 성공하지 못 했던 코드를 작성하니 이번엔 잘 됐다
다른 팀원분이 쓴 하트 색깔 바꾸는 걸 구현하는 코드랑 내가 쓴 좋아요 개수 변경하는 코드가 다른데, 원래는 팀원이 구현한 코드에 좋아요 개수 변경하는 코드만 넣고 싶었는데 javascript를 잘 모르니까 어떻게 써야 html에 반영되는지 모르겠어서 그냥 코드를 따로 만들었다
view.py에 좋아요 기능 함수는 똑같고 리턴 값에 팀원이 원하는 값과 내가 원하는 값을 딕셔너리로 반환해서 내 코드에 필요한 딕셔너리 키를 이용해서 코드를 작성했다
// post_like.js 팀원분이 작성한 좋아요 하트 색깔 바꾸기
const likeClick = (buttonId) => {
console.log(buttonId);
const likeButton = document.getElementById(buttonId);
const likeIconFind = likeButton.querySelector(".bi-heart2");
const likeIcon = likeIconFind.children;
const csrftoken = getCookie('csrftoken');
const postId = buttonId.split('-').pop();
const url = '/post/' + 'post_like/' + postId
// api 호출
// https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch
fetch(url, {
method: "POST",
mode: "same-origin",
headers: {
'X-CSRFToken': csrftoken
}
})
.then(response => response.json())
.then(data => {
// 결과를 받고 html(좋아요 하트) 모습을 변경
if (data.result === "like") {
// 좋아요 설정
likeIcon[0].style.display = 'flex';
likeIcon[1].style.display = 'none';
} else {
// 좋아요 취소 설정
likeIcon[0].style.display = 'none';
likeIcon[1].style.display = 'flex';
}
});
}// post_like.js 내가 작성한 좋아요 개수 바꾸기
$(document).ready(function () {
$(".like-i3").click(function () {
var pk = $(this).attr('name') // name에 post.id 값으로 지정해서 pk로 받음
const url = '/post/' + 'post_like/' + pk
$.ajax({ // .like-i3 버튼을 클릭하면 <새로고침> 없이 ajax로 서버와 통신하겠다.
type: "POST", // 데이터를 전송하는 방법을 지정
url: url, // 통신할 url을 지정
data: { 'pk': pk, 'csrfmiddlewaretoken': '{{ csrf_token }}' }, // 서버로 데이터 전송시 옵션
dataType: "json", // 서버측에서 전송한 데이터를 어떤 형식의 데이터로서 해석할 것인가를 지정, 없으면 알아서 판단
// 서버측에서 전송한 Response 데이터 형식 (json)
// {'likes_count': post.like_count }
success: function (response) { // 통신 성공시 - 동적으로 좋아요 개수 변경
$("#count-" + pk).html("좋아요 " + response.like_count + "개");
}
})
})
})- 팀 프로젝트 발표 및 KPT 회고
- 장고 시크릿 키 변경 후 깃허브에 업로드 되지 않게 수정하기
python manage.py shell
from django.core.management.utils import get_random_secret_key
print(get_random_secret_key())
위 명령어를 한 줄씩 터미널에 써주고 나온 시크릿 키를 복사해서 따로 생성한 secrets.json 파일에 붙여주면 된다
모자이크 된 부분은 외부로 노출되면 안 되는 시크릿 키다
이후에는 위 블로그에서 알려주는 대로 settings.py 파일을 수정하고 .gitignore에 secrets.json 파일을 추가하면 된다
그리고 팀원들한테 secrets.json 파일을 따로 공유하면 된다
파일 위치는 아래와 같은 곳에 두면 된다
<오늘 새롭게 알게된 것>
- 장고 시크릿 키의 존재...!
프로젝트 발표 후 세상에 공개되어서는 안 되는 시크릿 키가 깃허브에 올라와 있다는 피드백을 받았다
피드백을 받기 전까지 시크릿 키가 있는지도 몰랐다...ㅋㅋㅋ
열심히 검색해본 결과 시크릿 키가 노출되면 장고의 보안 기능이 상실된다고 한다
만일 노출된 경우 시크릿 키를 변경해주어야 하고 깃허브에 업로드 되지 않도록 secrets.json 이라는 파일을 따로 생성해 거기에 시크릿 키를 적고 .gitignore 파일에 secrets.json 파일을 추가한다
secrets.json 파일은 프로젝트에 참여하는 팀원들끼리 공유하면 된다
<내일 목표>
장고 심화 열심히 공부하기
페어프로그래밍(알고리즘 5문제 풀기!!)
