Share My Music 카테고리 후기

안녕하세요! 바로 후기를 올릴려고 했는데..

바로 또 프로젝트에 들어가서 ㅎㅎㅎ 올리는게 늦어졌네요...

그럼 빠르게~~ 지금부터 카테고리 기능 코멘트 시작하겠습니다!

 

혹시.. 아직 SMM 프로젝트가 무엇인지! 잘 모르시는 분들을 위해서 ㅎㅎ 간단히 소개합니다~

영상에서 나온 것처럼, SMM 프로젝트에서는,

대표적으로, 유튜브 크롤링, 카테고리 기능, 추천 기능, 인기차트 기능 등을 구현했습니다.

저는 그 중에서도 카테고리 기능을 중점으로 프로젝트에 참여했습니다! 

영상에서 힙합이랑 락 눌러도 아무것도 안 뜨는 것은.. 아무도 힙합과 락을 추천곡으로 업로드해주지 않았다는고..ㅠ

데이터가 없어서 그래용 ㅠㅠ

 

Big idea(핵심 아이디어): 카테고리별로 정보를 데이터베이스에서 가져와서 보여주자!

 

<app.py>

데이터를 저장하고, 불러오는 것에서는 큰 문제가 없었어요.

#카테고리별로 정보 내보내기(app.py)
@app.route("/music", methods=["GET"])
def music_get():
    all_musics = list(db.music.find({},{'_id':False}))
    indi_musics = list(db.music.find({'sort':'인디'},{'_id':False}))
    balad_musics = list(db.music.find({'sort':'발라드'},{'_id':False}))
    dance_musics = list(db.music.find({'sort':'댄스'},{'_id':False}))
    hip_musics = list(db.music.find({'sort':'힙합'},{'_id':False}))
    pop_musics = list(db.music.find({'sort':'팝송'},{'_id':False}))
    rock_musics = list(db.music.find({'sort':'락'},{'_id':False}))

    return jsonify({'result': all_musics,
                    'result2':indi_musics,
                    'result3':balad_musics,
                    'result4':dance_musics,
                    'result5':hip_musics,
                    'result6':pop_musics,
                    'result7':rock_musics})

문제는...

 

<index.html>

웹 브라우저에 보여주고싶은 정보만(카테고리별로 정보를) 어떻게 보여줄 수 있을까.. 

아는 게 없어서 구글링을 이것저것 해보는데.. 제가 원하는 정보를 찾기까지 시간이 좀 걸렸던 것 같아요. 

그래도 구글링을 열심히 하면서 원하는 정보이든 아니든 자바스크립트와 fetch 사용법에 대해서 많이 알게 되었어요!

근데 사실.. 나중에 많은 시도 끝에 방법을 알아내었을 때, 생각보다 간단해서 너무 놀랐답니다..ㅎㅎ

그 순간은 마치!! 수능 때 30번 문제를 푼 짜릿함 같았을까요??

뭐 덕분에.. 두 번 다시 까먹지 않을 것 같아요 ㅋㅋ

 

처음에는 카테고리별로 함수를 만들고, 똑같은 코드를 함수명만 바꿔서 만들었어요.

하나씩 수작업으로..ㅋㅋ 그랬더니 코드가 엄청 길었었죠ㅠㅠ 아래와 같은 코드가 6개..ㄷㄷㄷ

 function rap() {
    fetch('/music').then((res) => res.json()).then((data) => {

      let rows2 = data['result2']
      $('#cards-box').empty()

      rows2.forEach((a) => {
        let url = a['youtube_url']
        let music = a['music'] //곡이름
        let artist = a['artist']
        let sort = a['sort'] //장르
        let star = a['star']
        let comment = a['comment']
        let like = a['like']
        let _id = a['_id']['$oid']

        let star_repeat = '⭐'.repeat(star)

        let index_html = `<div class="col">
                        <div class="card h-100">
                          <iframe width=auto height=auto src="//www.youtube.com/embed/${url}"
                          title="YouTube video player" frameborder="0" allow="accelerometer; autoplay;
                          clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
                          <div class="card-body">
                              <h5 class="card-title"><b>${music}</b></h5>
                            <p class="artist-card">${artist}</p>
                            <p class="genre">${sort}</p>
                            <p>${star_repeat}</p>
                            <p>${comment}</p>
                          </div>
                          <div>
                            <p class="like">${like}</p><img class="like-button" name="like_img" id="${_id}" src="../static/img/thumbs-up.png">
                          </div>
                        </div>
                      </div>`

        $('#cards-box').append(index_html)
      })
    })
  }

 

어떻게 하면 가독성을 높일 수 있을까.. 고민 끝에..! class Sort를 알게 되면서 문제해결!

이 긴~ 코드가 어떻게 바꼈느냐!

  class Sort {
    constructor(sort_name) {
      this.sort_name = sort_name;
    }
    run() {
      fetch('/music').then((res) => res.json()).then((data) => {
        let rows2 = data[this.sort_name];

        $('#cards-box').empty()
        rows2.forEach((a) => {
          let url = a['youtube_url'];
          let music = a['music'];
          let artist = a['artist'];
          let sort = a['sort'];
          let star = a['star'];
          let comment = a['comment'];
          let like = a['like'];

          let star_repeat = '⭐'.repeat(star);

          let temp_html = `<div class="col">
                            <div class="card h-100">
                              <iframe width=auto height=auto src="//www.youtube.com/embed/${url}"
                              title="YouTube video player" frameborder="0" allow="accelerometer; autoplay;
                              clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
                              <div class="card-body">
                                  <h5 class="card-title"><b>${music}</b></h5>
                                <p class="artist">${artist}</p>
                                <p class="genre">${sort}</p>
                                <p>${star_repeat}</p>
                                <p>${comment}</p>
                              </div>
                              <div>
                                <p class="like">${like}</p><a onclick="like()"><img class="like-button" src="../static/img/thumbs-up.png"></a>
                              </div>
                            </div>
                          </div>`
          $('#cards-box').append(temp_html)
        })
      })
    }
  }

  var recommend = new Sort('result')
  var rap = new Sort('result2')
  var balad = new Sort('result3')
  var dance = new Sort('result4')
  var hiphop = new Sort('result5')
  var pop = new Sort('result6')
  var club = new Sort('result7')

  /* Categorizing end */

 

이제, 카테고리 클릭 기능까지 만들면 끝!

      <!-- nav html -->
      <div class="nav">
        <!-- categorizing -->
        <div class="sidebar">
          <div class="sidebar_title">
            <h2 style="font-size: 26px; color:red">CATEGORY</h2>
          </div>
          <div class="sidebar_content">
            <div style="font-size: 24px; color:#e6e6e6"><a onclick="recommend.run()">추천 곡</div>
            <div style="font-size: 24px; color:#e6e6e6"><a onclick="rap.run()">랩</a></div>
            <div style="font-size: 24px; color:#e6e6e6"><a onclick="balad.run()">발라드</a></div>
            <div style="font-size: 24px; color:#e6e6e6"><a onclick="dance.run()">댄스</a></div>
            <div style="font-size: 24px; color:#e6e6e6"><a onclick="hiphop.run()">힙합</a></div>
            <div style="font-size: 24px; color:#e6e6e6"><a onclick="pop.run()">팝송</a></div>
            <div style="font-size: 24px; color:#e6e6e6"><a onclick="club.run()">클럽</a></div>
          </div>
        </div>

        <!-- categorizing end -->

이렇게 카테고리 기능을 마무리 지었습니다!

 

카테고리 기능 말고도,

백엔드 작업을 전반적으로 함께 진행하면서,

크롤링이나 유튜브 링크 관리(임베드) 등등 새로운 기능들에 대해서 많이 알게 되었고,

이미 알고 있는 기능들은 적용해보면서 더 확실하게 정리할 수 있었습니다! 

 

프로젝트를 통해 서로의 강점을 공유하고 약점은 보완할 수 있다는 점이 팀 프로젝트의 최고의 장점인 것 같습니다!

 

집단지성의 힘인가봐요!ㅎㅎ

 

- 프로젝트 후기-

• onclick 함수, fetch에 대해 두루뭉실 알고 있었는데, 이제 어떻게 쓰는 건지, 기능을 잘 알겠다!
• class Sort ! 코드 정리할 때 쓰기 아주 좋은 함수!
• 카테고라이징에 대해서도 완벽 이해!
• 크롤링은 많이 이해하지 못해서.. 앞으로 더 공부해야겠다!
• 유튜브 임베드, 인기차트 순위 등등 다양한 기능을 공부할 수 있어서 뜻깊은 시간이었다!
• 맨땅에 헤딩을 하더라도 끝까지 포기하지 않으면 할 수 있다!
• 혼자보다는 둘이, 둘 보다는 팀이! 팀으로 함께할 때, 강점은 극대화되고 약점은 보완된다는 것을 느꼈다!
• 프로젝트 재밌당 :)