✅ 목표
남아 있는 팀 프로젝트 목표는 "내가 가본 여행지"를 추가하는 것이다.
세부 기능으로 사용자가 리뷰를 직접 추가하고, 글을 수정하거나 삭제할 수 있으며
좋아요 기능으로 다른 사용자들이 투표할 수 있도록 해야 한다.
그 중에서 오늘은 부트스트랩에 있는 Form과 Card를 이용해 여행지의 사진을
업로드하고 리뷰를 작성할 수 있도록 하는 기능을 추가했다.
🔎오늘의 발견 #1
오늘 가장 흥미롭게 배운 부분은 사진 파일을 업로드 하는 부분이었다.
우선 사진을 업로드 할 때 항상 같은 이름으로 저장되어 덮어쓰기 하는 것을 방지하기 위해
daytime이라는 것을 import해 사용자가 사진을 저장하는 시간을 초단위까지 적용해
파일명에 넣어 저장할 수 있도록 아래와 같이 정의해 주었다. 이렇게 하면 확실히 파일 중복을
방지할 수 있겠다는 생각이 들었다.
today = datetime.now()
mytime = today.strftime('%Y-%m-%d-%H-%M-%S')
filename = f'file={mytime}'
save_to = f'static/{filename}.{extension}'
file.save(save_to)
doc = {
'title': title_receive,
'content': content_receive,
'file': f'{filename}.{extension}'
}
db.diary.insert_one(doc)
return jsonify({'msg': '추천 완료!'})한편, 파일의 확장자까지도 고려해야 하는 문제는 전혀 생각해보지 못했던
부분이었다. 이 또한 접근 방식이 매우 기발하다고 생각했는데, 보통 파일명과
확장자를 . 으로 이어주므로 .을 기준으로 파일 이름을 쪼갰다.
그런데 혹시 파일명에도 .이 들어갈 수 있으므로 가장 마지막 .을 기준으로
삼으라고 범위를 지정하는 것을 보고 정말 신기하다고 생각했다.
extension = file.filename.split('.')[-1] # -1은 "가장 마지막 .을 선택"의 의미🔎오늘의 발견 #2
팀장님이 제기해주셔서 시도해 본 것인데, OpenAPI에서 여행지 정보를 받아오게 하다보니
편리한 점이 참 많지만, 해당 API 자체에도 이미지가 없는 경우가 있다.
그래서 404 Not Found Error가 발생했다.
해결을 위해 팀장님의 코드를 참고한 결과, 이미지가 있을 경우와 없을 경우를 나누어서
대응하도록 해 주었다.
if (!image) {
let temp_html = `<div class="card">
<img src="../static/img/no-image.png" class="card-img-top" alt="이미지 없음">
<div class="card-body" style="background-color: white;">
<h5 class="card-title">${title}</h5>
<p class="card-address">${address}</p>
</div>
</div>`;
$('#card-box').append(temp_html);}
else {
let temp_html = `<div class="card">
<img src="${image}" class="card-img-top" alt="내 위치 근처 여행지">
<div class="card-body" style="background-color: white;">
<h5 class="card-title">${title}</h5>
<p class="card-address">${address}</p>
</div>
</div>`;
$('#card-box').append(temp_html);}❗️느낀점
오늘 목표한 것들을 시도하면서 코딩으로 생각보다 더 많은 범위를 지정하고, 제한할 수 있다는 점이 매우 흥미로웠다. 수정한 내용들을 GITHUB에 남겨두기 위해 계속 commit하고 있는데, 이제야 조금 익숙해 진 것 같다. 일단 시작 전에 main 브랜치를 pull해서 맞춰 놓고 수정한 것들을 차례로 add / commit / push 해야 안전하다.
