190327-TIL
TIL
4 minutes read (About 603 words)

190327-TIL

Today I Learned

  • 오늘 한 일

    프로젝트

    1. clickSaveButton() -> saveHealth() : 운동 영상의 상세 페이지에서 운동 기록 저장 버튼을 클릭시 해당 운동의 이름이 localStorage에 저장된다.

    2. showDiary() : 운동 기록을 저장한 후 반영된 페이지로 이동한다.

    3. clickMyHealthButton() -> showMyHealthPop() : 나의 운동 버튼 클릭시 사용자 정의 운동을 입력하고 저장할 수 있는 페이지를 팝업으로 띄운다.

    4. clickSaveButton() -> showSavedPage() : 팝업 창에서 운동 이름, youtube 주소, 운동 부위와 종류를 입력하면 기록이 localStorage에 저장된다.

    외에도 알고리즘 스터디를 했다. 나는 5개 정도 문제를 미리 풀어놔서 복습하는 개념으로, 다른 사람들의 풀이에서 많은 걸 배우고 있다.

  • 배운 것

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
    $('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 보여주기!!

How to embed YouTube video in Bootstrap modal

Answer: Insert YouTube Code inside Modal Body

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

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

  • 느낀 점

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

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

# TIL
190328-TIL
190326-TIL
Follow

Links

Tag Cloud

ADT Abstraction Access Modifier Ajax Algorithm Angluar Angular Array Babel C C# Call by Object Reference Call by Reference Call by Value Class Computational Thinking DOM Data Type Dependency Injection Destructuring ECMA ES6 Encapsulation Event Expression FDS12 First-class object Fisrt-class Function Function HTML, CSS Hackaton Higher Order Function Hoisting Inheritance Math Modlue Node.js Number OOP Object Observable Operater Pipe Polymorphisim Programming Promise Prototype Python Quick sort REST API React Reactive Programming Recursion RegExp Routing SPA Scope Service Single Page Application Statement String Subsequence Substring TIL TypeScript Unity Variable Web Browser Webpack Wrapper global variable immutable javaScript local variavble mutable npm object pass by reference pass by value primitive this window 실행 컨텍스트 일급 객체 자바스크립트

Categories

Recent

Archives

Tags

ADT 1
Abstraction 2
Access Modifier 1
Ajax 1
Algorithm 18
Angluar 1
Angular 10
Array 1
Babel 1
C 1
C# 1
Call by Object Reference 1
Call by Reference 1
Call by Value 1
Class 2
Computational Thinking 1
DOM 1
Data Type 1
Dependency Injection 1
Destructuring 1
ECMA 1
ES6 1
Encapsulation 2
Event 1
Expression 1
FDS12 2
First-class object 1
Fisrt-class Function 1
Function 1
HTML, CSS 5
Hackaton 2
Higher Order Function 1
Hoisting 1
Inheritance 1
Math 1
Modlue 1
Node.js 2
Number 1
OOP 3
Object 1
Observable 1
Operater 1
Pipe 1
Polymorphisim 1
Programming 1
Promise 1
Prototype 1
Python 5
Quick sort 1
REST API 1
React 1
Reactive Programming 1
Recursion 1
RegExp 1
Routing 2
SPA 1
Scope 1
Service 1
Single Page Application 1
Statement 1
String 1
Subsequence 1
Substring 1
TIL 85
TypeScript 2
Unity 1
Variable 1
Web Browser 1
Webpack 1
Wrapper 1
global variable 1
immutable 1
javaScript 2
local variavble 1
mutable 1
npm 1
object 1
pass by reference 1
pass by value 1
primitive 1
this 1
window 1
실행 컨텍스트 1
일급 객체 1
자바스크립트 39

Categories

Recent

Archives

Tags

ADT 1
Abstraction 2
Access Modifier 1
Ajax 1
Algorithm 18
Angluar 1
Angular 10
Array 1
Babel 1
C 1
C# 1
Call by Object Reference 1
Call by Reference 1
Call by Value 1
Class 2
Computational Thinking 1
DOM 1
Data Type 1
Dependency Injection 1
Destructuring 1
ECMA 1
ES6 1
Encapsulation 2
Event 1
Expression 1
FDS12 2
First-class object 1
Fisrt-class Function 1
Function 1
HTML, CSS 5
Hackaton 2
Higher Order Function 1
Hoisting 1
Inheritance 1
Math 1
Modlue 1
Node.js 2
Number 1
OOP 3
Object 1
Observable 1
Operater 1
Pipe 1
Polymorphisim 1
Programming 1
Promise 1
Prototype 1
Python 5
Quick sort 1
REST API 1
React 1
Reactive Programming 1
Recursion 1
RegExp 1
Routing 2
SPA 1
Scope 1
Service 1
Single Page Application 1
Statement 1
String 1
Subsequence 1
Substring 1
TIL 85
TypeScript 2
Unity 1
Variable 1
Web Browser 1
Webpack 1
Wrapper 1
global variable 1
immutable 1
javaScript 2
local variavble 1
mutable 1
npm 1
object 1
pass by reference 1
pass by value 1
primitive 1
this 1
window 1
실행 컨텍스트 1
일급 객체 1
자바스크립트 39
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×