[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 배포 순서

1. 프로젝트 폴더에서 mkdir deploy
2. cp app.py deploy/application.py (app.py 를 application.py 로 이름 변경 후 복사)
3. cp -r templates delploy/templates (templates 폴더 생성)
4. pip freeze > deploy/requirements.txt ( * freeze : 프로젝트에 사용된 package 출력 명령어, requirements.txt 파일에 프로젝트에 사용된 패키지들 이름을 저장한다.)
5. cd deploy (deploy 폴더로 이동)
6. application.py 에서 app = Flask(__name__) 를 application = app = Flask(__name__) 으로 변경
7. application.py 에서 app.run(포트 등등) 을 app.run 으로 변경
8. pip install awsebcli (awsebcli 를 설치하기 전에 pip 를 최신 버전으로 설치하기를 권장)
9. eb init (보안 자격 증명 절차)
10. eb create myweb ( * myweb 은 이름으로 변경 가능)
11. 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번째 것으로 바꿔준다고 되는지 몰랐지만 거짓말처럼 문제가 해결되었다...