인스타그램 클론 코딩 팀 프로젝트
이제 오늘 내일동안 이 프로젝트를 끝내야 한다. 주말까지 메인 페이지의 모든 UI를 완성하려 했지만 구석구석 손볼 부분이 생각보다 많았다. 특히, 메인 페이지는 버튼 마다 모달 창이 튀어 나오거나 하는 이벤트를 가지고 있어 더 오래 걸렸던 것 같다. 그래도 오늘 모든 UI 부분을 손보고 완성했다. 또, DB를 연동해보고 몇몇 데이터를 집어 넣어 보고, Jinja2를 활용하여 웹 페이지에서 정상적으로 잘 출력되는지 확인했다. 마지막으로 내가 활용할 몇몇 함수를 짜보았다.
더보기 모달 수정
1. 자기 자신의 게시물의 더보기 버튼을 클릭했을 경우
2. 팔로우 중인 계정의 게시물의 더보기 버튼을 클릭했을 경우
3. 팔로우 중이 아닌 계정의 게시물의 더보기 버튼을 클릭했을 경우
세 모달 모두 달라 보이지만 하나의 모달로 만들었다. JavaScript에서 매개변수로 type을 받아 type=0이면 자기자신, type=1이면 팔로우 중인 계정, type=2이면 팔로우 중이 아닌 계정을 나타내도록 하여 '.text' 메소드를 사용해 type마다 뜨는 메시지를 다르게 해보았다..! 이게 더 효율적인 것일지는 아직 잘 모르겠다. 튜터님께서 피드백해주시겠지...?
최근 알림 모달
최근 알림 모달도 더보기 모달과 동일하다. 하지만, 기능과 역할이 다르기 때문에 이는 같은 클래스로 구현하지 않고, 다른 모달 클래스를 하나 더 추가하여 변수명을 헷갈리지 않도록 하였다. 더보기 모달은 'more_button_modal', 최근 알림 모달은 'alert_button_modal'과 같이 둘의 역할이 다르다는 것을 명시해주었다..! (사실 alert까지 이전 더보기 모달처럼 type=4에 넣어버리면 내가 헷갈릴 것 같아서 그런 것도 있다 ㅠ.ㅠ)
게시물 작성 모달
구현한 모달 중 가장 시간이 오래 걸린 모달이었다.... 좀 더 세련되게 구현하고 싶은 욕심이 들어 그런 것도 있다. input 태그의 type을 file로 설정하면 파일을 선택할 수 있는데, 이 때 multiple 특성을 활성화 시키면 여러 장을 선택할 수 있다는 것도 알았다. 하지만, 여러 장을 선택할 경우, 미리보기를 띄우는 JavaScript 함수를 짜는 데에 무리가 있었다... 구글링을 열심히 해보고 다른 사람의 코드를 활용해보기도 했지만 뭔가 원하는 디자인대로 나오지도 않고.. 길이 제한도 걸어야될 것 같아서...? 팀원들과 상의 후에 최대 4장의 사진만을 업로드할 수 있도록 기능을 간소화하기로 하였다. 그래서 4개의 input 태그와 4개의 img 태그로 각각의 미리보기를 아래에 띄울 수 있도록 구성하였다. input 및 img 태그의 각각의 id 뒤에 1~4의 숫자를 붙이고, onchange 시 함수 호출을 할 때, 해당 함수의 매개변수에 id 뒤에 붙은 숫자를 함께 넣어주어 1번 파일 선택 버튼을 눌러 선택한 사진은 1번째 미리보기 div에 띄울 수 있도록 구현하였다.
DB 연동
우선 오늘은 각자 DB에 연결해보고 내일 하나의 DB에 몰아 넣기로 팀원들과 상의하였다. 나는 내 클라우드 DB에 연동하였다. Ogustagram에 Users를 만들고, 내 정보를 추가해봄으로써 연동이 잘 되는 것을 확인하였다.
DB -> app.py -> index.html
info = db.Users.find_one({"UserName": user_name})
return render_template('index.html', info=info)app.py 코드
<div class="my_info">
<div class="my_id" style="font-weight: bold">{{info['UserName']}}</div>
<div class="my_name" style="color: #909090;">{{info['Name']}}</div>
</div>index.html 코드
잘 연동된 것을 확인할 수 있었고, 내부 데이터를 옳게 가져오는 것도 볼 수 있었다. 이미지는 어떻게 가져오면 좋을지 팀원들과 고민하다가 DB 설계를 조금 수정하게 되었다.
수정된 DB 설계
이미지 파일들에 관한 컬렉션들을 모두 분리했다. 이미지의 크기에 따라 DB에 저장되는 것이 달랐던 것이 원인이었다. Users가 너무 무거워보인다고 생각했는데 오히려 좋아졌다고 생각한다!!
몇몇 함수 구상
메인 페이지에서 사용할 몇몇 함수를 구상해보았다. 이외에도 검색어 입력 시 유사한 사용자 이름을 띄워줄 추천 검색어 함수, 좋아요 수를 계산해주는 함수 등등이 필요할 것이다. 마저 구상해보려 한다.