[TIL] 미니 프로젝트 2일차
2일차, 여전히 Modal 을 붙잡고 있었다.
function lists(rows) {
$('#cards-box').empty()
rows.forEach((a) => {
let author = a['author']
let title = a['title']
let desc = a['description'].substring(0, 50) + "...";
let image = a['cover']
let pubDate = a['pubDate']
let isbn = a['isbn']
let itemId = a['itemId']
let temp_html = `<button type="button" data-bs-toggle="modal" data-bs-target="#${isbn}">
<div class="col">
<div class="card h-100">
<img src="${image}" class="card-img-top">
</button>
<!-- 모달 부분 -->
<div class="modal fade" id="${isbn}" tabindex="-1" aria-labelledby="${itemId}" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="${itemId}">${title}</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<div class="imgBook">
<img src="${image}">
</div>
</div>
<div class="mb-3">
<p><label for="book-content" class="boldText">줄거리</label></p>
<p><text>${desc}<</text></p>
</div>
<div class="mb-3">
<p><label for="message-text" class="boldText">감상평</label></p>
<p><select class="form-select" id="inputGroupSelect01">
<option selected>-- 선택하기 --</option>
<option value="1">⭐</option>
<option value="2">⭐⭐</option>
<option value="3">⭐⭐⭐</option>
<option value="4">⭐⭐⭐⭐</option>
<option value="5">⭐⭐⭐⭐⭐</option>
</select></p>
<p><textarea class="form-control" id="message-text"></textarea></p>
</div>
</form>
</div>
<div class="modal-footer">
<!-- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button> -->
<button type="button" class="btn btn-primary">저장</button>
</div>
</div>
</div>
</div>
<!-- 모달 끝 -->
`
$('#cards-box').append(temp_html)
})
}
해결 방법은 api 에서 추출할 수 있는 인자는 많으니 그중에서 책과 관련된 고유한 값으로 대체하였다.
다만 만약 api 에 쓸만한 인자가 없으면 그때는 또 어떻게 해야하는지 잘 모르겠다.
뭔가 index 같은 걸 이용해서 ID 가 forEach 문을 돌 때마다 다른 변수로 바뀌게끔 만들고 싶어 계속 붙잡고 있었지만 다른 작업도 해야하기에 임시 방편으로 마무리하였다.
2일차엔 Modal 을 해결하고는
로그인 / 회원가입 을 맡고 있는 팀원을 도와주거나
사이트에 자잘한 디자인 수정하고
버튼들이 이동하는 경로들을 매끄럽게 수정하는 등
팀원들이 하고 있는 작업들을 보면서 도울건 도우며 자잘한 작업들을 하다 보니 어느 정도 사이트가 모습을 갖춰져서 배포를 해보았다.
배포는 간편하게 Amazon Elastic Beanstalk 로 진행하였다.
Elastic Beanstalk 배포 순서
- 프로젝트 폴더에서 mkdir deploy
- cp app.py deploy/application.py (app.py 를 application.py 로 이름 변경 후 복사)
- cp -r templates delploy/templates (templates 폴더 생성)
- pip freeze > deploy/requirements.txt ( * freeze : 프로젝트에 사용된 package 출력 명령어, requirements.txt 파일에 프로젝트에 사용된 패키지들 이름을 저장한다.)
- cd deploy (deploy 폴더로 이동)
- application.py 에서 app = Flask(__name__) 를 application = app = Flask(__name__) 으로 변경
- application.py 에서 app.run(포트 등등) 을 app.run 으로 변경
- pip install awsebcli (awsebcli 를 설치하기 전에 pip 를 최신 버전으로 설치하기를 권장)
- eb init (보안 자격 증명 절차)
- eb create myweb ( * myweb 은 이름으로 변경 가능)
- eb deploy myweb (코드 수정할 일이 있다면 수정 후 11번 명령어로 재배포)
으로 배포를 하니 처음부터 어플리케이션 상태가 Severe 로 떴고 배포된 도메인으로 접속해 보면 502 Bad Gateway 가 떴다.
이유는 코드에서 페이지를 이동할 때 window.location.href('___') 같은 식으로 직접적인 주소를 입력하여 하드 코딩 해놓았기 때문이다...
프로젝트 목표가 배포까지 정상적으로 진행되는 것이었어서 수정해야만 했다.
팀원 분 중 해결 방법을
window.location.href 를 window.location.replace() 으로 대체하면 된다 하여 코드를 하나하나 수정을 해주었다.
Javascript 에서 페이지를 이동하는 방법 중 가장 많이 쓰이는 것이 2가지가 있는데 아래와 같다.
- window.location.href = "" : 속성을 변경하는 것
- window.location.replace() : 함수를 호출하는 것
사실 1번째에서 2번째 것으로 바꿔준다고 되는지 몰랐지만 거짓말처럼 문제가 해결되었다...