Today I Learned

• 오늘 배운 것

프로젝트의 모든 정보를 localStorage에 load하고 save하는 기능을 끝냈다. 점점 객체와 배열을 다루는 방법이 익숙해진다. 어렵던 select의 option value와 option:selected).text도 잘 알았다.

디자인을 수정하고 메인 페이지를 full video background로 설정했다.

알고리즘 스터디에서 Array.reduce와 eval method를 새로 알았다. 주말에 더 공부 해야겠다.

LeetCode 중 Medium 3. Longest Substring Without Repeating Characters 문제를 풀었다. 오랜만에 새로운 알고리즘 문제를 푸니 재미있었다.

LeetCode에 console.log를 찍어 stdout을 확인할 수 있다는 것을 처음 알았다. 앞으로 자주 사용해야겠다.

프로젝트가 마무리되며 볼만해진다. 공공 데이터 포탈에서 제공하는 미세먼지 API를 사용해 메인 페이지에 마스크 사용여부를 알려주고 싶었는데 낮에 신청한 직후에는 잘 안 됐다.

그런데 밤에 해보니까 결과가 나와서 내일 다시 시도해볼 예정이다.

Today I Learned

• 오늘 한 일

  프로젝트

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

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

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

  8. 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을 잘 정리하고 나니 그 때 명세한 기능을 구현하기만 돼서 편하다. 순서대로 구현을 하니 딱히 커다란 문제가 생기지 않았다.

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

Today I Learned

• 프로젝트 진행 중!

• 무식하면 몸이 고생한다를 뼈저리게 느끼고 있다. 백엔드가 없고 DB를 관리할 수가 없어서 리소스와 데이터를 수동으로 정리해 폴더에 넣는 작업을 했다.

• Dictionary가 익숙해질수록 편하게 쓰고 있다.

• 오늘 한 일

  1. 운동 부위, 종류에 따른 youtube 동영상 주소(고유주소ID, 썸네일, 이름) 모으고 각 selector로 사용할 id 부여 (upper_weight_1 등)

     Load할 때마다 workouts 먼저 그려놓고 숨겨놓음

     2. selectBodyPart() -> showHealthList() : Health Option select 조건에 따라 분류해놓은 운동 영상을 보이게 한다.

  2. selectHealthType() -> showHealthList() : Health Option select 조건에 따라 분류해놓은 운동 영상을 보이게 한다.

  3. clickHealth() -> showHealthDetail(id) : div에 배치된 운동 영상 클릭시 해당 영상의 상세 페이지를 팝업으로 띄운다.

• 배운 것

Dictionary key값이 string일 때는 Dict[‘key’] 잊지 말기!!!!

계속 ‘’ 를 잊어버린다.

var today = new Date().toISOString().slice(2, 10);

날짜를 19-03-26 형식으로 만들어준다!!!!

Today I Learned

• 웹 애플리케이션 프로젝트

  오늘부터 5일간 팀원들과 함께 프로젝트를 진행한다. 간단한 프론트 기초 지식만 배운 상태에서 완벽한 애플리케이션을 만들기에는 부족함이 있지만 오늘 기획단계를 끝냈다.
  백엔드가 없어 데이터를 localStorage에 저장하고 불러올 예정이다. 회원가입과 로그인 기능도 뺐다.

  디자인을 위해 전공 소프트웨어 공학 수업시간에 배운 Use Case Diagram, step-by-step Description, Communication Diagram을 작성해 기능들을 나눴다.

  우리는 식단, 운동을 제공하고 사용자가 날짜별로 건강관리를 기록할 수 있는 프로그램을 만들 예정이다.

  나는 운동 부위(상체, 복근, 하체, 전신)와 운동 종류(근력, 유산소, 스트레칭)에 따른 Youtube 운동 영상을 미리 수집해 분류한 후 사용자의 Option 선택에 따라 운동 영상을 제시하는 기능을 맡았다. 사용자는 또한 운동 기록을 저장하고 관리할 수 있다.

  오늘은 전체적인 프로그램 디자인과 html 레이아웃을 마쳤다. Youtube API를 잠깐 써봤는데 생각보다 어렵지 않을 것 같다.

Today I Learned

• 배운 것

  • LeetCode 14. Longest Common Prefix를 풀었다.

  : 쉬운 문제를 이틀에 걸쳐 풀었는데, javaScript에 String method 중 유용한 indexOf()라는 method가 있다는 것을 알았다. C++에서부터 나는 문자열을 다루는 데에 익숙하지 않다.

  • var의 scope와 javaScript의 Hoisting에 대해 배웠다.

  var, let, const

  : var는 function-scoped고, let이나 const는 block-scoped이다.

  : let은 재할당이 가능, 선언한 이후에 할당할 수 있는 반면 const는 선언과 동시에 값을 할당하여야 하고 그 값을 변경시킬 수 없다. (C처럼)

  Hoisting

  : hoisting은 끌어올린다는 뜻이다. 자바스크립트에서는 변수가 끌어올려진다. 이 때, 변수의 선언은 hoist되지만 할당부(값)는 hoist되지 않는다. 즉 함수의 선언은 hoist되지만 변수의 값으로 선언한 함수는 hoist되지 않는다.

그래서 for문에서 var i =0으로 선언한 후 함수 종료 후에 i를 부르면 정의되지 않았다고 뜬다. 그러나 var i가 아니라 그냥 i=0 로 선언하면 i가 hoisting되어 global variable이 된다.

• 느낀 점

  scope와 hoisting 등 javaScript를 공부하니 그동안 아무 것도 모르는 상태에서 이것저것 만들어 보면서, 이해되지 않던 오류들이 조금씩 이해되기 시작했다.

  어쩌다보니 LeetCode 알고리즘을 스터디로 함께 풀게 됐다. 어려명과 함께 공부하는 건 처음이지만 배울 점이 많을 거라고 생각한다.

  indexOf() 등 여러 javaScript String 관련 method를 접할 때마다 정리하고 활용할 수 있도록 해야겠다.

Today I Learned

• 오늘 한 일

  • Naver Maps API를 이용한 맛집 리뷰 어플리케이션

  : Naver가 제공하는 Naver Maps API를 이용해 웹에 지도를 띄우고, 다음 우편번호 서비스로 주소를 입력받아 해당 주소의 좌표에 마커를 찍는다.

  : 마커를 클릭했을 때 리뷰가 없다면 리뷰를 등록하고, 이미 리뷰가 등록됐다면 등록된 리뷰를 infoWindow로 보여준다.

  : 어려웠던 점! for문 내에서 marker객체와 infoWindow 객체를 각각 만들어 addEvent를 해주면 scope 문제로 마지막 이벤트 리스너만 살아남게 된다. 정확한 내용은 공부를 더 해야 알겠지만 우선 forEach문으로 해결했다.

  • 참고한 페이지에서는 let으로 선언(block-scoping)해도 된다고 한다.

  • 어제 배운 git fork & merge를 이용해 팀원들과 협업을 했다.

  • 패스트캠퍼스 수료생 선배들과 티타임을 가지며 개발자가 되기 위한 과정에 대해서 들었다. 꾸준히 열심히 하고 모르는 것을 넘어가지 않는 게 중요한 것 같다.

맛집 리뷰페이지 ▶ 🍩 Yummy 🍩