본문 바로가기
Project/2

내일배움단 15일 프로젝트 13일차 개발일지

by 썬이 2021. 10. 6.

#코딩 개발일지 시작의 한마디

  • 프로젝트 13일차 어느덧 막바지. 이번주 금요일이 발표회라니! 믿기지 않는다.

# 개발 업무내용

[오늘의 목표]

  1. 민정님 질문 페이지에 랜덤으로 질문 띄우기 (랜덤으로 띄우기는 민정님이 구현해놓으신 프론트 json이용)
  2. 질문 페이지에서 작성한 질문과 답을 넣는 db 구축. (질문과 답 저장)

[토의 내용]

  • 진전 상황 보고
  • 튜터님과 업무 고민 해결

# 업무 중 이슈/고민 .. 그리고 해결한 내용

질문 페이지에 랜덤으로 질문 띄우기 해결!!!!!

파이썬으로 db랑 질문 페이지를 연결하는 게 처음에는 너무 막막하고 어렵게 느껴졌지만, POST와 GET을 이용하면 나름 간단히? 적용 가능한 기능이었다. 강의의 도움을 받아 열심히 구현에 성공했다.

아직도 POST와 GET을 완벽하게 이해하는 것은 어렵지만, 그래도...! 성공해서 너무 기쁘다.

 

랜덤 질문과 답변
db에 저장된 질문 리스트와 질문+답변

민정님이 알려주신 랜덤 코드 내용이 딱 알맞게 구현되어서 너무 다행이었다.

나는 아직 코딩 전반에 대한 이해가 부족한데(코드 전반적인 구성이나, 어떻게 뭐가 구현되는지 이해하는 능력) 민정님은 그런 점에 있어서 굉장히 이해도가 높다고 느꼈다.

아직 완전히 이해하지는 못 하지만 오늘 정말... 모두가 머리를 싸매고 구현에 성공해서 더더 짜릿하고 감격적인 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 그런 날이었다. 스우파 본방에 살짝 늦어도 상관없었을 정도로 ㅋㅋㅋㅋㅋㅋㅋㅋ 재밌고 짜릿한 회의(?)였다.

 

let i = Math.floor(Math.random() * rows.length)

민정님께서 주신 랜덤 추출 코드.

Math random()은 난수(랜덤수)를 추출하는 함수이고, rows.length는 이전에 지정해놓은 rows라는 변수의 길이이다.

예를 들어 rows가 두 개이면, 두 개 중에 랜덤으로 추출되는 식!

질문 db에서 가져온 질문 변수를 넣어 1800개가 넘는 질문 변수들 중에 하나가 출력되도록 구현했다.

 

function randomStation() {
            $('#station').empty();

            $.ajax({
                type: "GET",
                url: "/contents/get",
                data: {},
                success: function (response) {
                    let questions = response['all_questions']
                    let i = Math.floor(Math.random() * questions.length)
                    let question = questions[i]['question']
                    let temp_html = `${question}`
                    $('#station').append(temp_html);
                }
            })
        }

그렇게해서 구현된 코드는 이런 느낌!

이제 백엔드를 아주 조금이지만,, 알게된 기분이다 ㅋㅋㅋㅋㅋㅋ 너무 기쁘고 뿌듯한 날이었다.

드디어 우리가 구현하고 싶은 기능들에 한발자국 가까워진 느낌. 뭔가... 할 수 있겠다는 느낌이 왔다.

 

 

자세한 코드와 기능 설명은 아래 페이지에서

https://fromyeongsxxn.tistory.com/34

 

GET과 POST를 이용해서 랜덤 질문 추출 기능 구현

@app.route('/contents') def contents(): return render_template('contents.html') # API 역할을 하는 부분 @app.route('/contents/get', methods=['GET']) def contents_get(): client = MongoClient('localhos..

fromyeongsxxn.tistory.com

 

# To-do List

1. 질문페이지 민정님꺼랑 합치기(헤더, 푸터)
2. 시간까지 db에 나올 수 있도록 공부, 구현. (flask 프레임워크 - import datetime)

3. 메인페이지 섹션 2 백엔드 부분 정리

4. 깃허브에 정리해서 올리기!! - 다른 분들도 함께 잘 볼 수 있는지 확인

 

오늘의 성과 (브이)
사랑방 같은? ㅋㅋㅋㅋ 우리 조 미팅룸