[4일차] 미니 프로젝트 최종 완성 & 개발일지

 

 

오늘 드디어 미니 프로젝트가 최종 마무리 되었다!!!

짝짝짝짝 

 

어제 수업 끝나고, 최종 프로젝트를 깃허브에 올리는 작업이 이상하게 계속 에러가 떠서

몇 시간을 끙끙댔었는데

오늘 또 맑은 정신에 이것저것 해보니 푸쉬가 정상적으로 되었당 👻

 

👇 작성한 개발일지는 요기 

https://warn-code.tistory.com/109

[깃허브] 깃&깃허브야 친해지자 ! / 터미널 이용하여 깃허브에 프로젝트 올리기 ( ssh 사용 )

 

---

오늘 처음 작성해본 개인페이지 부분 특징 & 기술스택

• 메뉴 바
  • 페이지 이동📍파이썬 : 파이썬은 1991년 네덜란드계 프로그래머인 귀도 반 로섬이 발표한 고급 프로그래밍 언어

    @app.route('/')
    def home():
        return render_template('index.html')
    
    @app.route('/home')
    def home1():
        return render_template('index.html')
    
    @app.route('/hjPage')
    def move1():
        return render_template('hjPage.html')
    

    <nav class="navbar bg-light">
        <div class="container-fluid">
            <a class="navbar-brand" href="dkPage" id="navdk">홍다경 대원</a>
        </div>
    </nav>
    

  • 📍Flask : 웹 애플리케이션 개발을 위한 파이썬  프레임워크
  • ✔️ app.py 에서 각 페이지의 <a> 태그 클릭 시 지정했던 url 을 맵핑
• 방명록 (DB연결)
  • 방명록 등록✔️ 넘겨줄 데이터들의 이름을 지정하여, request 객체에 담아 전송
  • 📍Ajax : 비동기적인 웹 애플리케이션의 제작을 위해 아래와 같은 조합을 이용하는 웹 개발 기법
  • ✔️ 개인페이지 내 id값으로 value값을 불러오고, 해당 데이터를 각 객체를 생성하여 값 저장

  function save_comment() {
  
              let nickname = $('#name').val()
              let comment = $('#comment').val()
  
              $.ajax({
                  type: 'POST',
                  url: '/savecomment1',
                  data: {'nickname_give': nickname, 'comment_give' : comment},
                  success: function (response) {
                      alert(response['msg'])
                      window.location.reload()
                  }
              })
          }
  

  ✔️ 개인페이지에서 넘어온 request 객체의 데이터 추출 → 객체 생성하여 데이터 저장📍 len() : 문자열의 길이 반환하는 파이썬 함수📍 몽고DB : 몽고DB는 크로스 플랫폼 도큐먼트 지향 데이터베이스 시스템
  • 방명록 삭제하기
  ✔️ 방명록 조회 시 삭제버튼 생성 및 삭제버튼 내 onclick="delete_comment(${membernum})" 구현📍Ajax : 비동기적인 웹 애플리케이션의 제작을 위해 아래와 같은 조합을 이용하는 웹 개발 기법
• ✔️  delete_comment(${membernum})에서 받아온 membernum 데이터를 request 객체에 담아 보내주는 작업 생성
• 📍JavaScript : 객체 기반의 스크립트 프로그래밍 언어
• @app.route("/savecomment1", methods=["POST"]) def savecomment1_post(): count = list(db.member1.find({}, {'_id': False})) num = len(count) + 1 # data: {nickname_give: nickname, comment_give: comment}, name_receive = request.form['nickname_give'] comment_receive = request.form['comment_give'] doc = { 'membernum' : num, 'name' : name_receive, 'comment': comment_receive, } # 저장 db.member1.insert_one(doc) return jsonify({'msg': '💜다경 대원에게 방명록이 등록되었습니다!!💜'})
• ✔️ 배열로 데이터를 생성하여 데이터베이스(몽고DB)에 데이터 저장 작업
• ✔️ len() 함수 사용하여, 방명록 게시물 번호 생성 → 게시물 고유 번호 생성 목적

function show_comment() {

            $('#comment-list').empty()
            $.ajax({
                type: "GET",
                url: "/showcomment1",
                data: {},
                success: function (response) {

                   /* db에서 직접 받아오는 건 app.py에서 하고 */
                    let rows = response['comments']

                    /* for문 돌리는건 */
                    for(let i = 0 ; i < rows.length ; i++){

                        let membernum = rows[i]['membernum']
                        let name = rows[i]['name']
                        let comment = rows[i]['comment']

                        let deletenum = $('#deletenum')

                        // <p style="display: none">${membernum}</p>
                        /*
                        *   <p>${comment}</p>
                                                <footer class="blockquote-footer">${name}</footer>
                                                <button type="button" onclick="delete_comment(${membernum})">삭제</button>
                        * */

                        let html_temp=`
                                    <div class="card" style="width:100%; height:150px;">
                                        <div class="card-body" ">
                                            <blockquote class="blockquote">
                                                <p style="display: none">${membernum}</p>
                                                <p>${comment}</p>
                                                <footer class="blockquote-footer">${name}</footer>
                                                <button type="button" onclick="delete_comment(${membernum})" style="background-color: #B983FF; border: none">삭제</button>
                                            </blockquote>
                                        </div>
                                    </div>`

                        $('#comment-list').append(html_temp)
                    }

                }
            });
        }

        function delete_comment(membernum){

            $.ajax({
                type: 'POST',
                url: '/deletecomment1',
                data: {'delete_give': membernum },
                success: function (response) {
                    alert(response['msg'])
                    window.location.reload()
                }
            })

        }

✔️ request에 받아온 membernum 데이터를 int로 형변환하여 DB에서 해당 조건 데이터 삭제 구현

📍 몽고DB : 몽고DB는 크로스 플랫폼 도큐먼트 지향 데이터베이스 시스템

@app.route("/deletecomment1", methods=["POST"])
def deletecomment1_post():

    delete_receive = request.form['delete_give']
    db.member1.delete_one({'membernum': int(delete_receive)})
    return jsonify({'msg': '방명록 삭제가 완료되었습니다'})

 

 

---

📖 4일차 개발일지 

오후에는 담임매니저님과 잠깐 면담도 했는데

면담하기 전에 고즈넉한 음악도 틀어주시고 세심하시면서도 유쾌한 면담시간이었다 ㅎ.ㅎ

 

추가로, 

오늘 프로젝트 설명서 작성에 필요한 특징, 기술스택(바로 위에 작성한 것!) 작성하는걸 했는데

아직 정확하게 기술스택이 무엇을 의미하는 건지 모르겠어서 그냥 내가 어떤식으로 코드를 짰었고

어떤 것들을 사용했는지를 정리해서 적었었다

 

 

 

모두가 집중해서 미니 프로젝트를 완성했기 때문에

오늘 오전중으로 마무리가 될 수 있었던 것 같아 팀원분들에게 고마우면서도 뿌듯했다👍🏻

 

내일 발표를 어떤식으로 해야할 지 잘 감이 오지 않지만

앞에 분들이 발표하시는 걸 보면서, 방향이 잡힐거라고 생각한당

 

발표자료를 주시기 전까지는 자바스크립트 공부하고 있다가

발표자료 넘겨받으면, 전체 프로젝트 숙지 다시 한번 하고 발표 연습을 해야겠당 ㅎㅎ

어제보다는 여유있는 오늘!!

 

역시 난 적응 요정!!!! 

이번 주 더더욱 드는 생각

'에너지 조절을 잘하자'

 

에너지를 써야하는 부분에 에너지를 쏟고, 아껴야할 때는 아낄 줄도 알아야하는 법~

들뜨지 않은 상태를 유지하기 🌳

앗쏴 내일 금요일이당 ㅋ

 

오늘의 개발일지 끝!!!!!!!!