[sparta] 15일 메이킹챌린지 #3

19107 단어 스파르타코딩클럽스파르타코딩클럽

시작의 한마디

오늘은 메이킹챌린지를 시작한지 15일차이다.
드디어 대망의 마지막날이다🤧

요 며칠동안은 정말 하루종일 컴퓨터 앞에서 고군분투하고 있는데,
개발자들이 왜 운동을 필수로 해야하는지 알거 같다.

오류 찾으려고 코드 보다보면 거북이가 되어있는 나를 발견할 수 있다...ㅋㅋㅋ
이 글을 보고 있다면 우리모두 일어나서 스트레칭 합시다!!😎

그럼 스트레칭 한번하고
마지막날까지 아자아자 !

개발 업무내용

✔ 완성시킨 워드클라우드 png 파일 서버에 띄우기

업무 중 이슈/고민 ... 해결내용

문제1

📌 만들어진 워드클라우드 이미지 파일을 cloud.html로 보여질수 있도록 연결을 해야하는데 쉽지않은 상황.

튜터님께 도움을 요청해 받은 피드백으로는 POST요청을 만들어서 ajax로 요청을 받았을때 서버가 만들어진 이미지 파일을 데이터에 담아 보내주고 클라이언트에서는 받은 이미지파일을 temp_html을 통해 append를 시킨다는 맥락이었다.

그래서 우선은 POST요청을 만들어줬다.

app.py

@app.route('/cloud')
def show_cloud():
    word_cloud = wc.to_file("wordcloud.png")
    return jsonify({'word_clouds': word_cloud})

cloud.html

<head>
  <script>
          $(document).ready(function () {
              showcloud();
          });

          function showcloud() {
              $.ajax({
                  type: "POST",
                  url: "/cloud",
                  data: {},
                  success: function (response) {
                      let make_cloud = response['word_clouds']

                      let temp_html = `<div class="card-img">
                                          <img id="cloud-img" src="${make_cloud}" alt="img">
                                      </div>`
                      $('#cloud-img').append(temp_html)
                  }
              })
          }
  </script>
<head>
    
<body>
  <div class="wrap">
      <!--워드클라우드-->
      <div class="card-img">
      <img id="cloud-img" src="wordcloud.png" alt="img">
      </div>
  </div>
</body>

결과는 실패였다.
이 부분에서 어떤짓을 해봐도 해결이 안되서...ㅜ 계속해서 튜터님에게 질문을 하며 피드백을 받았다. 워드클라우드 이미지 파일의 경로를 못잡을 수 있다는 피드백을 주셔서
워드클라우드 이미지 파일이 저장되는 경로를 static파일로 바꿔보았다.

app.py(수정후)

@app.route('/cloud')
def show_cloud():
    word_cloud = wc.to_file("static/wordcloud.png")
    return jsonify({'word_clouds': word_cloud})

cloud.html(수정후)

<head>
  <script>
          $(document).ready(function () {
              showcloud();
          });

          function showcloud() {
              $.ajax({
                  type: "POST",
                  url: "/cloud",
                  data: {},
                  success: function (response) {
                      let make_cloud = response['word_clouds']

                      let temp_html = `<div class="card-img">
                                          <img id="cloud-img" src="${make_cloud}" alt="img">
                                      </div>`
                      $('#cloud-img').append(temp_html)
                  }
              })
          }
  </script>
<head>
    
<body>
  <div class="wrap">
      <!--워드클라우드-->
      <div class="card-img">
      <img id="cloud-img" src="static/wordcloud.png" alt="img">
      </div>
  </div>
</body>

이렇게 경로만 수정해주니 잘 나오는 것을 확인할 수 있었다 !!!
혼자 폭풍 구글링하고 난리를 쳤는데 이렇게 쉽게 해결되는 거였다니, 이렇게 허무할수가
그렇지만 또 다른 문제가 발견되는데...

문제2

📌 제일 마지막에 들어온 DB의 내용으로만 워드클라우드가 만들어지는 상황.

DB를 많이 쌓아가던 중에서 이상한 점을 발견할 수 있었다. 워드클라우드가 잘만 만들어지는 줄 알았는데, 사실은 가장 마지막으로 들어온 DB만으로 워드클라우드를 만들고 있다는 것을 알게 되었는데 내 지식으로는 원인을 찾을 수가 없었다ㅠ

그래서 튜터님의 도움을 받아서 몽고디비에서 텍스트만 가져오는 부분의 코드 수정을 하였다.

texts = list(db.travelLog.find({}, {'_id': False, 'writer': False, 'numbers': False, 'date': False, 'weather': False}))
text_list = []
for text in texts:
    text_list.append(text['place'])
    text_list.append(text['title'].replace('!','').replace('~','').replace('.',''))
    text_list.append(text['comment'].replace('!','').replace('~','').replace('.','').replace(',','').replace('\n',''))

new_text_list = " ".join(text_list)
print(new_text_list)

이 수정된 코드는 사실 튜터님이 불러주시는 데로 받아 적어 수정한거라.... 아직 왜 해결이 된건지 파악이 안된다.... 시간될 때 공부를 조금 해봐야 할 것 같다.!

to do list

✔ AWS 서버로 배포해보고 오류 있는지 확인하기

EIP-11559 요약
Rubby on Rails의 코드는 동일하지만 환경에 따라 글의 다양한 현상과 대응을 나타냅니다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage