인스타 UI 클론 코딩 프로젝트
- 기획
- 구현한 기능
# 사이트 헤더
- 왼쪽 상단의 로고
- 검색어를 입력할 수 있는 검색창
- 오른쪽 상단의 아이콘들
# 사이트 본문
1. 우측에 친구 추천 리스트
- 프로필사진, 아이디, 내용, 팔로우 버튼 배치
- 위치 고정하여 스크롤 움직여도 위치 유지
2. 좌측에 게시물들
- 상단에 네임카드 ( 프로필사진, 아이디 ) 배치
- 옵션 : 더보기 버튼 배치하여 클릭하면 모달 동작
- 본문 사진은 캐러샐을 사용하여 여러장 배치 가능
- 좋아요/댓글 이모티콘 배치
- 본문 내용 배치 : 본문 줄이기 기능은 구현하였으나 더보기 버튼 클릭시 전체 본문이 나타나지 않음..
- 댓글 기능 : 댓글을 쓰기와 기록 기능
3. 사이트 footer
- 우측 하단에 정보를 볼 수 있는 footer 구현
4. 반응형웹을 사용하여 창 크기 변화시에 배치 변경
- 구현한 페이지 영상
- 이미지
- 주요한 기능 코드 살펴보기
- 헤더: html
<header class="header">
생략
</header>* <body> 안에 <header> 전용 태그를 사용할 수 있습니다.
- 헤더: css
header {
/*상단에 고정*/
position: fixed;
/*여백 없음*/
top: 0;
left: 0;
right: 0;
/*헤더 속성*/
height: 75px;
padding: 1rem 12rem 1rem 12rem;
color: black;
background: white;
font-weight: bold;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid lightgray;
/*스크롤내리면 본문이 헤더를 덮음. z-index 값이 클수록 위로 올라온다.*/
z-index: 10;
}* 스크롤이 내려가도 상단에 항상 고정시키기 위해 position 값을 fixed 한다.
* padding 으로 로고와 검색창 이모티콘 div들의 사이 간격 조정
* justify-content(가로축 기준): space-between; (요소들 사이에 동일한 간격두기)
* align-items: center; (세로축 기준 가운데 정렬)
* 헤더가 고정이고 스크롤을 내릴때, 헤더가 맨 위에 위치해야하므로 z-index 에 10 값. 음수도 가능하고 높을수록 위에 위치한다.
- 친구추천 리스트 : css
.friend_recommend {
/*우측고정*/
position: fixed;
right: 0;
/*창크기가 줄어도 우측40% 항상 유지*/
width: 40%;
height: 100%;
z-index: 5;
}* 친구추천 전체 div 이다. position 고정하고 right만 0을 줘서 우측에 붙였다. 또한 좌측은 게시물이 위치하기 때문에 항상 화면의 40%만 차지하게 설정했다.
* z-index 는 헤더보다는 아래에, 게시물 보다는 위에 올 수 있도록 5로 설정했다.
.friend_item {
border: none;
display: flex;
flex-direction: row; /*가로선 정렬*/
justify-content: left;
align-items: center;
}
.friend_text {
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
margin-left: 10px;
}* 친구추천 리스트에서 막혔던 부분이다. friend_item 이 상위 div이고, friend_text가 하위 div이다.
* 프로필 이미지와 아이디는 수평으로 정렬 되면서도 아이디는 상태글과 수직이어야 했기에 아이디와 상태글을 _text div로 묶어 flex-direction: column; 으로 수직, align-items:start;왼쪽.. 수직왼쪽 정렬 후에 상위div인 _item은 flex-direction: row; 가로 정렬하여 프로필이미지와 수평 정렬을 할 수 있도록 작성했다.
- footer : html
<div class="footer">
<p>2022 - 04 - 20 // team.sparta // 12간지 // 최민기</p>
<address>문의사항 : 010 - xxxx - xxxx</address>
<mail>email : http://www.spata.com</mail>
</div>* footer 는 위와같이 div에도 쓸 수 있지만 footer 태그도 있다. <footer></footer>
* address 태그와 mail 태그 사용
- 게시글 상단 옵션버튼 모달기능 : html
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="bootstrap-modal-wrapper-factory.min.js"></script>* 부트스트랩의 모달을 사용하기 위한 모달 라이브러리. <head> 사이에 들어간다.
<!-- Button trigger modal -->
<button type="button" class="fa-solid fa-ellipsis dots"
data-toggle="modal" data-target="#exampleModal">
</button>
<!-- Modal -->
<div class="modal fade post_header_modal" id="exampleModal" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
신고하기
<hr>
팔로우 취소
<hr>
공유하기
<hr>
내 게시글에 저장
</div>
</div>
</div>
</div>* 부트스트랩에서 가져온 모달 예제 코드를 내가 사용할 폼으로 조금 수정함
- 게시글 상단 옵션버튼 모달기능 : css
/*모달 버튼 배치*/
.dots {
position: absolute;
right: 20px;
top: 20px;
background-color: white;
border: none;
}
/*켜진 모달창 배치*/
.post_header_modal {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 350px;
height: 300px;
text-align: center;
}* 모달 버튼 배치를 우측으로 옮기기 위해 position : absolute; 로 절대위치지정. 위치의 기준점이 되는 조상 요소 모서리로부터의 거리를 지정한다. 요소가 바깥 여백을 가진다면 거리에 더한다.
- 게시글 사진 캐러샐 기능 : html
우선 캐러샐기능은 https://swiperjs.com/get-started 여기 홈페이지에서 가져왔다.
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>* 캐러샐 사용을 위한 캐러샐 라이브러리 이다. <head> 사이에 추가하면 된다.
<!-- Swiper -->
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img class="post_img" src="../static/post1.jpg"></div>
<div class="swiper-slide"><img class="post_img" src="../static/post1.jpg"></div>
<div class="swiper-slide"><img class="post_img" src="../static/post1.jpg"></div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>* body 에 들어가는 코드. 이미지 경로만 수정해주면 된다.
<!--캐러샐 스크립트-->
<script>
var swiper = new Swiper(".mySwiper", {
pagination: {
el: ".swiper-pagination",
type: "fraction",
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
</script>* 캐러샐 스크립트 파일이다. 처음에 .js 파일을 따로 만들어두고 진행중이어서 js파일에 붙여넣었을때는 실행이 안되었지만 html파일의 body 맨 마지막에 붙여두니 기능을 구현할 수 있었다..
- 게시글 댓글 쓰기, 기록 기능
* 폴더에 html, css, js 만 있는 상태여서 데이터베이스 구축을 위해 현재 폴더에 파이썬 파일 만들기를 하니 venv 폴더도 생성되지 않고 달랑 .py 파일만 생겼었다. 상단메뉴 file -> new project -> 현재 작업중이던 폴더 선택 -> 위치에 \venv 생성되있는지 확인+파이썬버전확인 -> 생성하면 된다.
* 강의에서 배운대로 app.py / templates폴더 / static 폴더 / 생성하고, templates에 진행중이던 html 파일 넣고 static 폴더에 css 파일과 사용한 이미지 파일을 넣었다.
* flask, mongoDB, dnspython 패키지 설치
- app.py
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
from pymongo import MongoClient
client = MongoClient('mongodb_path')
db = client.dbsparta
@app.route('/')
def home():
return render_template('minsta.html')
@app.route('/minsta', methods=['GET'])
def test_get():
comment_list = list(db.minsta.find({}, {'_id': False}))
return jsonify({'comments': comment_list})
@app.route('/minsta', methods=['POST'])
def test_post():
comment_receive = request.form['comment_give']
doc = {
'comment': comment_receive
}
db.minsta.insert_one(doc)
return jsonify({'msg': '등록 완료!'})
if __name__ == '__main__':
app.run('0.0.0.0',port=5000,debug=True)* 다운받은 패키지 사용을 위해 임포트한다.
* render_template('minsta.html') => html 파일 가져오기
* 데이터 주고받기 위해 get, post 사용
* get : 클라이언트에게 줄것, (db.minsta.find) 데이터베이스에서 찾아서 list 리스트에 넣는다. comment_list 에 담아서 comments 로 클라이언트에게 준다.
* post : 클라이언트가 준것, comment_give로 받아서 comment_receive에 저장하고 comment 에 담아서 (db.minsta.insert_one) 데이터 베이스에 추가한다.
- html
<script>
// 로딩되면 코멘트기록 실행
$(document).ready(function () {
show_comment();
});
// 포스트 코멘트 기록
function show_comment() {
$.ajax({
type: "GET",
url: "/minsta",
data: {},
success: function (response) {
let rows = response['comments']
for (let i = 0; i < rows.length; i++){
let comment = rows[i]['comment']
let temp_html = `🗨 ${comment} <br>`
$('#comment-list').append(temp_html)
}
}
});
}
// 포스트 코멘트 쓰기
function save_comment() {
// let img = $('#img').val()
// let name = $('#name').val()
let comment = $('#comment').val()
$.ajax({
type: "POST",
url: "/minsta",
data: {comment_give: comment},
success: function (response) {
alert(response["msg"])
window.location.reload()
}
});
}
</script>* get : comments로 받은 데이터들을 for 문을 돌며 한줄씩 출력. $('#comment-list')는 들어갈 자리 div id 이름 이다.
* post : $('#comment').val() 인풋 받은 값을 comment에 넣고 comment_give로 데이터 준다. 성공하면 alert 메세지 뜨고 화면 새로고침한다.
- 반응형 웹 기능 : css
@media screen and (max-width: 700px) {
}* 부트스트랩 미디어쿼리 사용. 최대 700px 까지 적용될 css가 들어간다고 생각하면된다.
- 전체 코드
https://github.com/mankic/insta-clone-project.git
GitHub - mankic/insta-clone-project: 인스타 클론 코딩 프로젝트
인스타 클론 코딩 프로젝트. Contribute to mankic/insta-clone-project development by creating an account on GitHub.
github.com
- 회고 kpt
* Keep : 저번 프로젝트에 비해서 이번에는 내가 만들어야할 방향을 확실히 잡고갔다. 내가 필요한 기능들이 무엇이며 어떻게 사용할 것인가에 대해 정리하고 시작하니 계획대로 진행되는 느낌이었다.
* Problem : 구글링까지해도 막히고 시간이 계속 지체되는 경우가 많았다.. 처음 사용하는 기능도 많았고 무엇보다 인스타 배치를 맞추는게 어려웠다. 시간에 쫓기다보니 추가로 더 할 수 있는 기능도 구현해보지 못했다.
* Try : 이것저것 해봐도 안된다 싶으면 어떻게 무엇때문에 안되는지 명확하게 하고 할 수 있는것 부터 해나가야 할 것 같다. 또한 깃을 사용하며 버전을 좀 더 쪼개야 할 것 같다. 코딩에 정신팔려 기능을 몇가지 쌓아두고 푸쉬한 경우가 많았다.
* Feel : 다음 프로젝트에는 시간(마감)을 제일 우위에 두고 빠르게 끝내보려 노력해봐야겠다.
'AI 웹 개발 과정 > 개인 프로젝트' 카테고리의 다른 글
| 개인 프로젝트 04 : turtlestagram | 회원가입, 로그인 페이지 구현 (0) | 2022.05.15 |
|---|---|
| 개인 프로젝트 03 : 타임어택 미션 - 회원가입/로그인 페이지 만들기 (0) | 2022.05.08 |
| 개인 프로젝트 02 : 인스타 UI 클론 코딩 - 2일차 (0) | 2022.04.29 |
| 개인 프로젝트 02 : 인스타 UI 클론 코딩 - 1일차 (0) | 2022.04.29 |
| 개인 프로젝트 01 : pygame으로 간단한 게임 만들기 (0) | 2022.04.27 |