190327-TIL

2019년에 Hexo 블로그에 쓴 글을 옮겨 왔습니다. 당시 이해를 그대로 두었습니다.

Today I Learned

오늘 한 일

프로젝트
1. clickSaveButton() -> saveHealth() : 운동 영상의 상세 페이지에서 운동 기록 저장 버튼을 클릭시 해당 운동의 이름이 localStorage에 저장된다.
2. showDiary() : 운동 기록을 저장한 후 반영된 페이지로 이동한다.
3. clickMyHealthButton() -> showMyHealthPop() : 나의 운동 버튼 클릭시 사용자 정의 운동을 입력하고 저장할 수 있는 페이지를 팝업으로 띄운다.
4. clickSaveButton() -> showSavedPage() : 팝업 창에서 운동 이름, youtube 주소, 운동 부위와 종류를 입력하면 기록이 localStorage에 저장된다.
외에도 알고리즘 스터디를 했다. 나는 5개 정도 문제를 미리 풀어놔서 복습하는 개념으로, 다른 사람들의 풀이에서 많은 걸 배우고 있다.
배운 것

! 어떤 element를 클릭하고 새로 뜬 창에서 어떤 버튼을 눌렀을 때 맨 처음 element 값 전달하고 싶을 때는 button의 attr에 data-key 같은 식으로 정보를 전달해준다.

    $('div.workout').click(function(){
      //showWorkoutDetail

      var key = this.id;
      var workout = workouts[key];
      var id = workout['YT_id'];
      $('#saveHealthButton').attr('data-key',key);
      $('#popModal').modal('show');
      $('#popTitle').text(workout['name']);
      console.log(id);
      player = new YT.Player('player', {
        height: '300',
        width: '450',
        videoId: id,
        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange
        }
      }); 
    });

    $('#saveHealthButton').click(function(){
      console.log($(this).attr('data-key'));
//잘 뜸!!
      saveWorkout();
    });

! 외부 API를 사용하는 것은 어렵다. 조금만 수정하려고 해도 내 마음처럼 되지 않는다. 경험을 늘려야겠다.

운동 영상 썸네일 클릭시 Modal을 띄워 해당 운동 영상을 보여주려고 했는데, iframe을 사용하지 않고 new YT_player로 player를 만드는 API를 사용했더니 맨 처음 생성된 player만 뜨는 문제가 있었다.

구글 검색으로 해결했다!

Modal show event마다 내가 원하는 youtube 보여주기!!

https://www.tutorialrepublic.com/faq/how-to-embed-youtube-video-inside-bootstrap-modal.php

! javaScript에서는 Array.length, String.length로 둘 다 뒤에 ()를 붙이지 않는다. java와 헷갈리지 말자.

느낀 점

프로젝트 기획 때 Use Case와 Communication을 잘 정리하고 나니 그 때 명세한 기능을 구현하기만 돼서 편하다. 순서대로 구현을 하니 딱히 커다란 문제가 생기지 않았다.

소프트웨어 공학 시간에도 그렇지만 다시 한 번 디자인이 중요하다고 느꼈다.

190327-TIL

Today I Learned

오늘 한 일

배운 것

How to embed YouTube video in Bootstrap modal

Answer: Insert YouTube Code inside Modal Body

느낀 점