미니프로젝트(1)

팀원과의 협업을 통해 미니프로젝트를 진행했다.

미니프로젝트의 대략적인 틀은 메인페이지에 팀원에 대한 내용을 간략하게 표시하고, 팀원의 사진을 누르면 팀원 개인에 대한 상세페이지가 팝업되는 것으로 계획했다.

팝업되는 상세페이지 창에는 코멘트를 남길수 있으며, 코멘트를 남기면 mongodb를 통해 남긴 코멘트를 저장하고 불러오는것으로 결정했다.

이 중 상세페이지 팝업과 코멘트를 mongodb에 저장하고 불러오는 기능구현을 팀원 한명과 같이 담당하게 되었다.

그 동안 배운 것을 활용하면 간단할 것이라고 생각했는데 상세페이지 팝업부터 구현에 어려움을 겪었다.

구현된 html안에서 html을 불러와서 팝업으로 띄워야하는데 방법이 좀처럼 생각나지 않아 한시간동안 구글링을 했다.

답은 window.open()함수와 url을 이용하는 것이였다. 

window.open()함수는 window.open(url, name, size)형식이며 name안에 이름을 지정하는 것으로 구현하는 기능이 있다.

우리는 새 창을 띄우는 것이 목표이므로 window(url, _blank,size)형식으로 함수를 이용했다.

여기서 또 문제에 부딪혔는데, mongodb서버 연결을 위해 app.py를 구동하면 파일을 불러오지 못했다.

원인은 함수의 url부분이었다. app.py 구동전에는 window(example.html,_blank,size)형식으로 함수를 넣어 사용하고 있었는데, app.py로 구동하니 경로를 잡지 못했다.

원인을 생각해보니 app.py에서 따로 작성한 팀원프로필파일을 불러오지 못한다는 생각이 들었다.

따라서, 다음과 같이 일단 app.py에서 팀원 프로필파일을 불러올수 있게 코드를 작성했다.(Profile_SW.html 파일)

@app.route('/popup1')
def popup1():
    return render_template('Profile_SW.html')

그리고 app.py에서 작성된 url을 window.open()함수에서 불러올수 있게 다음과 같이 작성했다.("/popup1")

window.open("/popup1" ,"_blank", "width=2600,height=2100")

이렇게 수정하고 나니 팝업창이 제대로 작동했다. 

사실, 몇줄로 정리했지만 이렇게 코드를 정리할때까지 감이 잡히지 않아 수정과 삭제를 반복하며 한참이 걸렸다.

어쨌든 팝업창을 띄우는 것까지는 성공했고 방명록의 db를 연결하려고 했는데 여지없이 문제가 생겼다...