■ JITHub 개발일지(TIL : Today I Learned) 2일차
□ TIL ::
HTML/CSS/Javascript/Jquery/Ajax/Flask/MongoDB/...
1. 네비게이션바 상단에 위치 하기
(1) 헤더가 될 부분과 네비게이션바를 <body> ... </body> 안쪽에 <header> ... </header> 태그를 만들어
내부에 작성한다.
(2) 헤더 제목, 그리고 네비게이션 바가 될 소스를 넣는다.
(3) 헤더를 고정하기 위해 style 지정을 한다. <style> ... </style> 안에 지정. (*참고 : 링크)
- header에는 position : fixed; (헤더를 고정하는 역할)
- 페이지를 올렸을 때 헤더가 다른화면에 가려지지 않도록 z-index : 1;을 넣어준다
- body에는 padding-top : 000px; (본문이 헤더에 일정부분 가려지므로 padding을 아래로 내리는 역할)
2. 네비게이션바를 활용한 페이지 연결
(1) 상단헤더에 네비게이션 바를 위치하였기 때문에 버튼별 페이지를 구분할 필요가 있었다.
2. 자주 사용하는 스타일
(2) 현재 필요하다고 생각되는 페이지를 구분하여 나누었다.
- Home
- Introduction
- Members (팀원 소개 페이지, 멤버 등록 페이지, 멤버 정보 수정 페이지)
- GroundRule 페이지
(3) 화면구성을 한 후 app.py를 활용하여 각 templates을 가져올 셋팅을 하였다.
app.py에서는 아래와 같이 페이지별 셋팅을 하였다.
* 서버에 저장된 이미지를 사용할 땐 static/images에 저장하고 아래와 같이 호출하였다.
# 페이지 불러오기
@app.route('/')
def home():
return render_template('index.html')
# 이미지 불러오기
@app.route('/images')
def images():
return 'kai.jpg', 'guppy.jpg'
(4) 관리할 데이터 셋팅 (POST, GET)
우리가 사용할 데이터가 어떤 것들인지 나열해보면
(이름, 생년월일, 취미, MBTI, 강점, 협력성향, 하고싶은말, 블로그주소, 이미지, 패스워드) 였으며,
아래와 같이 POST 셋팅을 하였다.
@app.route("/members", methods=["POST"])
def web_members_post():
name_receive = request.form['name_give']
birth_receive = request.form['birth_give']
hobby_receive = request.form['hobby_give']
MBTI_receive = request.form['MBTI_give']
strength_receive = request.form['strength_give']
coop_receive = request.form['coop_give']
comment_receive = request.form['comment_give']
blog_receive = request.form['blog_give']
card_img_receive = request.form['card_img_give']
pass_w_receive = request.form['pass_w_give']
member_list = list(db.members.find({}, {'_id': False}))
count = len(member_list) + 1
doc = {
'num' : count,
'name':name_receive,
'birth':birth_receive,
'hobby':hobby_receive,
'MBTI':MBTI_receive,
'strength':strength_receive,
'coop':coop_receive,
'comment':comment_receive,
'blog':blog_receive,
'card_img': card_img_receive,
'pass_w': pass_w_receive
}
db.members.insert_one(doc)
return jsonify({'msg': '멤버정보 저장 완료!'})
@app.route("/members", methods=["GET"])
def web_members_get():
member_list = list(db.members.find({},{'_id':False}))
return jsonify({'members': member_list})
3. 작업완료시 서버와 연결
(1) 작업중인 파일들은 FileZilla를 사용하여 수정즉시 서버에 업로드하고, 확인하고 있다.
- templates 에 저장된 각 Page들은 바로 업로드 후 페이지에서 '새로고침(F5)'하여 즉시 확인하지만,
- app.py는 페이지를 구동하는 파일이기 때문에 GitBash에서 서버를 잠시 종료(Ctrl + C) 하고,
app.py를 업데이트 한 후 GitBash에서 'python app.py' 명령어를 입력하여 재가동하며 업데이트를 확인했다.
4. 멤버 정보 보여주기 (show_member, GET)
(1) 몽고DB에 저장된 멤버 정보 데이터를 가져오는데는 작업에 쉽지는 않았다.
아래와 같은 폼(Form)으로 만들어 넣고 싶었는데, 사진이며 버튼이며, 옮겨온 텍스트며..
크기나 배열이 만만치 않았다.
→ 가장 중요한 하나를 빠뜨렸었는데, 'margin' 이었다.
margin을 조정하니 신기하게 모두 제자리로 돌아갔다.
(2) GET을 활용해서 members에 있는 데이터를 긁어온다.
for 반복문을 사용하여 i값을 0부터 하나씩 올려가며 각각의 데이터들을 긁어오고
let temp_html = ` ~~ ` 에서는 가져온 데이터들을 Ajax 문법인 $('#____') 를 이용하여 테이블을 append하였다.
function show_member() {
$.ajax({
type: 'GET',
url: '/members',
data: {},
success: function (response) {
let infos = response['members']
for (let i = 0; i < infos.length; i++) {
let name = infos[i]['name']
let birth = infos[i]['birth']
let hobby = infos[i]['hobby']
let MBTI = infos[i]['MBTI']
let strength = infos[i]['strength']
let coop = infos[i]['coop']
let comment = infos[i]['comment']
let blog = infos[i]['blog']
let card_img = infos[i]['card_img']
let temp_html = `<div class="col">
<div class="card">
<div class="card-body">
<div class="card_img">
<img src="${card_img}">
</div>
<div class="info_edit">
<button type="button" id="btn_edit"
class="btn btn-success" data-bs-toggle="modal" data-bs-target="#staticBackdrop_1" style="margin-bottom: 10px">정보 수정
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop_1" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">정보 수정</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p style="margin: auto">멤버 정보를 수정하시겠습니까?</p>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Password</label>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button>
<button type="button" class="btn btn-primary" onclick="location.href = 'http://j-it-hub.shop/edit'">정보 수정</button>
</div>
</div>
</div>
</div>
<button type="button" id="btn_delete"
class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#staticBackdrop_2">정보 삭제
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop_2" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">정보 삭제</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p style="margin: auto">멤버 정보를 삭제하시겠습니까?</p>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Password</label>
</div>
</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>
</div>
</div>
<div class="card_contents" style="width:80%">
<ul class="list-group">
<div class="input-group mb-3">
<span class="input-group-text" style="width:120px">이름</span>
<span class="input-group-text" style="background-color: white; width:75%">${name}</span>
</div>
<div class="input-group mb-3">
<span class="input-group-text" style="width:120px">생년월일</span>
<span class="input-group-text" style="background-color: white; width:75%">${birth}</span>
</div>
<div class="input-group mb-3">
<span class="input-group-text" style="width:120px">취미</span>
<span class="input-group-text" style="background-color: white; width:75%">${hobby}</span>
</div>
<div class="input-group mb-3">
<span class="input-group-text" style="width:120px">MBTI</span>
<span class="input-group-text" style="background-color: white; width:75%">${MBTI}</span>
</div>
<div class="input-group mb-3">
<span class="input-group-text" style="width:120px">강점</span>
<span class="input-group-text" style="background-color: white; width:75%">${strength}</span>
</div>
<div class="input-group mb-3">
<span class="input-group-text" style="width:120px">협업</span>
<span class="input-group-text" style="background-color: white; width:75%">${coop}</span>
</div>
<div class="input-group mb-3">
<span class="input-group-text" style="width:120px">하고싶은 말</span>
<span class="input-group-text" style="background-color: white; width:75%">${comment}</span>
</div>
<div class="input-group mb-3">
<span class="input-group-text" style="width:120px">Blog</span>
<a href="${blog}" class="list-group-item list-group-item-action" style="background-color: white; width:75%"> ${blog}</a>
</div>
</ul>
</div>
</div>
</div>`
$('#member-box').append(temp_html)
}
}
});
}5. 고민해볼 점
현재 DB에 등록[POST]하고 등록된 정보들을 가져오는[GET] 작업은 가능하다.
각각의 정보를 등록할 때에는 패스워드를 입력받고,
등록된 정보는 num이라는 항목에 count되어 일련번호를 받는다.
· 궁금증 1.
→ 기존에 등록된 정보를 수정할 때, Password의 유효성을 검사 후 적합할 시 수정화면으로 갈 것
→ 수정화면에서는 해당 멤버의 기존 데이터를 모두 가져와야하고,
→ 수정 완료 후 기존 데이터를 변경하여야 함.
· 궁금증 2.
→ 기존에 등록된 정보를 삭제할 때, Password의 유효성을 검사 후 적합할 시 기존 데이터를 모두 삭제할 것
■ TIT :: Today I thought
1) 강의를 듣지 않고도 프로젝트를 하며 문제에 부딛혔을 때 수많은 것들을 배우게 된다.
그런데 역시, 기록이 습관화되지 않았기 때문에 이후에도 똑같은 실수를 반복하는 것 같다.
역시나 오늘도 만나게된 반가운 문제들을 모두 적지 못한 아쉬움이 있다.
2) 궁금증이 발생하면 구글링을 하는데, 정말 다양한 방법들이 나온다.
잘 몰랐던 코드들(새로운 라이브러리를 써야한다는 등)을 만나게 되면 머리가 복잡해진다.
'잘 짜여진 코드'란 부드럽게 잘 동작하고 정리가 잘 된 코드라고 하던데
구글링해서 나온 모든 코드가 다 좋은 코드는 아니었던 것 같다...
좋은 코드를 판별하기 위해서는.. 노력이 많이 필요할 것으로 예상된다.
3) 포스팅에 너무 '완벽'을 걸지 않아야겠다.
'이왕 할 거, 평생할 코딩이라면 재미있게'
'DEV > Web 개발' 카테고리의 다른 글
| 파이썬 웹 프로그래밍 :: 9월 첫째주 WIL #01 (2) | 2022.09.05 |
|---|---|
| 파이썬 웹 프로그래밍 :: html/CSS 스타일, 소개 페이지 제작(3)_TIL#03 (0) | 2022.08.31 |
| 파이썬 웹 프로그래밍 :: html/CSS 스타일, 소개 페이지 제작_TIL#01 (2) | 2022.08.29 |
| 파이썬 웹 프로그래밍 :: aws 활용 웹 퍼블리싱 (0) | 2022.07.24 |
| 파이썬 웹 프로그래밍 :: 파이썬 플라스크(Flask) 서버 제작, API 생성, Client 연결 (0) | 2022.07.24 |
댓글