미니 프로젝트 4일차. 개인 소개 페이지를 각자 완성시키고 프로젝트 정리본을 만들었다. 개인소개 페이지는 더 꾸미기보다는 그냥 있던 css에 추가로 자기소개만 넣었다.
정리본은 노션을 처음 사용해 봤는데 서로 편집도 가능해서 굉장히 편한 사이트였다. 웹페이지 기능에 어떤 기술이 들어가는지 작성하는게 걱정됬는데 같이 보고서를 맡은 팀원분이 너무 잘 작성해 주셔서 바로 가져다 붙여 완성시켰다. 확실히 같이 하니 두어시간만에 끝나서 미니 프로젝트 담당 부분을 끝낼 수 있었다.
자습
- 오전에 미니 프로젝트가 끝나서 서전캠프 4주차 flask부터 post,get부분을 쭉 돌려봤다.
@app.route("/bucket", methods=["POST"])
def bucket_post():
bucket_receive = request.form['bucket_give']
bucket_list= list(db.bucket.find({}, {'_id': False}))
count = len(bucket_list) +1
doc = {
'num':count,
'bucket':bucket_receive,
'done':0
}
db.bucket.insert_one(doc)
return jsonify({'msg': '등록 완료!'})
@app.route("/bucket/done", methods=["POST"])
def bucket_done():
num_receive = request.form['num_give']
db.bucket.update_one({'num': int(num_receive)}, {'$set': {'done': 1}})
return jsonify({'msg': '버킷 완료!'})
@app.route("/bucket", methods=["GET"])
def bucket_get():
bucket_list = list(db.bucket.find({}, {'_id': False}))
return jsonify({'buckets': bucket_list})
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)
- db.users.insert_one(doc)
users라는 이름의 컬렉션을 생성하고, 거기에 doc에 들어가 있는 데이터를 db에 '삽입'한다.(컬렉션은 비슷한 데이터를 나눠 담기 위한 카테고리).
- all_users = list(db.users.find{},{'_id':False}))
-{}괄호에 '조건'을 작성하고 해당 조건을 만족하는 데이터들을 가져와서 all_users라는 변수에 넣는 것(list형식). 그리고 이때 id값을 나타내지 않는다. {'_id':False}가 없어도 상관은 없는데 id값이 다 입력되어 지저분해진다.
미니프로젝트
- 미니프로젝트 개인 페이지를 오전 중에 끝내야해서 혹시나 연결시킨 코딩들을 지울까봐 css를 새로 바꾸거나 다른것을 긁어오지는 않았다. 개인적으로 맘에 드는 디자인이 있었는데
<style>
body {
margin: 0;
}
/* 프로필 이미지 */
.img {
justify-content: center;
}
#porfile-img {
width: 150px;
height: 150px;
border: 1px solid #2B3856;
transform: scale(1); /* 이미지 사이즈 고정 */
border-radius: 70%
}
.menu-bar {
position: fixed;
border: 0;
background-color: #2B3856;
display: block;
width: 200px;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.index {
text-align: center;
display: flex;
flex-direction: column;
}
/* 목차 */
.index h3 {
color: white;
opacity: 0.7;
text-decoration: none;
cursor: pointer;
}
/* 목차 각 항목 반응형 커서 */
.index h3:hover {
font-size: 1.1em;
opacity: 1;
text-shadow: 0.7px 0.7px 0.7px #000;
}
</style>
<body>
<header>
</header>
<nav class="menu-bar">
<div class = "index">
<!-- 프로필 이미지 -->
<div class = "img">
<img id="porfile-img" src ="images/mimoticon.jpeg">
</div>
<br>
<!-- 목차 내용 -->
<h3 class="click">ABOUT</h3>
<h3 class="click">EXPERIENCE</h3>
<h3 class="click">EDUCATION</h3>
<h3 class="click">INTERESTS</h3>
</div>
</nav>를 입력하세요
</body>>
단어 위에 올리면 그에 맞게 움직이는 구성을 넣어보고 싶었는데 시간이 너무 부족해서 결국은 포기했다. 잘 저장해 뒀다가 다음기회에 사용해 볼 계획이다. 외국 개발자가 무료로 배포한 코딩이라고 한다.
- 자기소개에서 여러 줄을 적으려니 부제목이과 내용이 서로 어긋나서 보기 영 좋지 않았다. 그래서 <p>를 넣어서 선으로 구분할 수 있게끔 만들었다.
- html에서 띄어쓰기를   넣어 사용한다. 하지만 링크가 달린 문장앞에 넝으니 링크밑선이 띄어쓰기에도 적용되서 보기 좋지 않았다. 그래서 결국 뺐다.
'스파르타 부트캠프(spring)' 카테고리의 다른 글
| [내일배움캠프_spring] 주간회고 WIL - 1주차 (0) | 2022.11.05 |
|---|---|
| [내일배움캠프_spring] 5일차-미니 프로젝트 (0) | 2022.11.05 |
| [내일배움캠프_spring] 3일차-미니 프로젝트 (0) | 2022.11.02 |
| [내일배움캠프_spring] 2일차-미니 프로젝트 (0) | 2022.11.02 |
| [내일배움캠프_spring] 1일차-미니 프로젝트 (1) | 2022.10.31 |