Today I Learned

• 오늘 한 일 & 느낀 점

🍀 LINEplus 홈페이지를 Markup해보는 시간을 가졌다.

홈페이지를 선형화하고, semantic하게 요소를 정하고 class 이름을 짓는 것만 해도 머리가 아팠다.

data를 다루는 function들은 그 관계를 정의하고 흐름을 파악하기가 쉬운데, Markup은 당장 이런 요소를 쓰면 되겠다고 생각을 해도 아직은 머릿속에 바로 그려지지가 않는다.

🍀 3월에 일주일간 진행했던 프로젝트 발표 시간을 가졌다.

다들 열심이 만들어서 동기부여가 됐다.

🍀 오전에 flex에 대해서 공부했다.

과제를 하느라 배운 걸 다 정리하지 못해서 내일 아침에 마저 정리할 예정이다.

🐾 My linepluscorp markup page 🐾

Today I Learned

• 오늘 한 일

• CSS의 기초 문법, 상속과 겹침 그리고 우선순위에 대해 배웠다.

  1. 상속(Inheritance)
     : 부모에게 적용한 style이 자식에게 적용되는 것

     영역에 관한 속성이 아닌 꾸미기 속성 등이 상속된다.

  2. 겹침(Cascading)
     : 하나의 element에 여러 style이 겹쳐질 수 있다.

     우선순위가 같을 경우 가장 밑의 style이 적용된다.

  3. 우선순위

     각각 selector마다 가진 우선순위가 다름

• 정적블로그 특강 : jekyll을 이용해 블로그 만들기

  나는 지금 hexo를 이용해서 블로깅을 하고 있는데 jekyll에 대해서도 배웠다.

• 느낀 점

• 의미있는 태그. Semantic Markup이 중요함을 점점 더 느낀다.

• Web Accessibility를 고려하면 간단한 화면 배치도 간단하지 않다. Markup은 공부할수록 깊이있는 언어같다. 객체지향언어에서 class를 의미있고 효율적으로 짜는 데에도 관심이 많았기 때문에 이 부분을 잘 살려서 코딩을 하고 싶다.

• hexo를 계속 이용하기로 했다. 익숙하기도 하고, 나중에 내가 테마를 조금씩 수정하거나 만들고 싶다.

Today I Learned

• 오늘 배운 것

오늘부터 4주간 HTML/CSS를 새로 배운다. 첫 수업이었는데 많은 것을 새롭게 알았다.

• 웹 접근성과 웹 표준이 무엇이며 얼마나 중요한지, 개발자에 자세에 대해서 배웠다.

• HTML5의 역사와 특징에 대해 다시 한 번 배웠다.

• Web page 제작을 위한 단계를 배웠다.

  1. 선형화(layout) 단계 : design이 아닌 논리적 구조를 linearize
  2. Semantic Element : <div>만 사용하는 것이 아니라 <header>, <footer>, <article> 등 사용
  3. Naming : element naming and grouping

• 편리한 Emmet Cheatsheet를 알았다. 진짜 편하다!

• CSS Box Model : content-box(defualt)와 border-box의 차이점을 알았다.

• flex를 이용해서 layout을 잡는 것과, 호환되지 않을 때를 대비하여 float를 이용하는 방법을 여러 case를 통해서 배웠다.

• Margin collapsing, clear: both 등 float CSS trick들을 배웠다.

• 느낀 점

지난 한달 간 나에게 가장 어려운 건 javascript보다는 HTML/CSS로 layout을 잡는 것이었는데, 내 생각대로 요소들이 배치되지 않았기 때문이다.

수업에서 CSS의 여러 속성들과 기능을 배우면서 왜 그렇게 되지 않았는지 알게 되었다. flex와 float는 확실히 공부하고 넘어가야겠다.

Today I Learned

• 토요일에 특강을 들었다.

실제로 현업에서 개발을 어떻게 하는지,

개발 방법에는 Waterfall보다 Agile를 많이 쓰는 추세라는 것을 알았다.

Today I Learned

• 오늘 한 일

jQeury 플러그인을 통해 Diary 화면의 배경에 ripples 효과를 줬다. 50px정도 여백에 효과가 적용되지 않는 문제가 있어 body background에 효과를 주는 것으로 해결했다.

알고리즘 스터디에서 Longest Common Prefix 문제를 다시 한 번 훑어보았다.

프로젝트 페이지의 폰트와 버튼 hover event 등을 추가하고 마무리했다.

• 느낀 점

프로젝트를 하며 겪었던 자잘한 문제들과 해결방법을 정리해두어야겠다.

첫 팀 프로젝트는 생각보다 재미있었다. 해결하지 못할 문제는 없다는 것을 다시 한 번 알았다.

✨ My Health Diary ✨

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를 접할 때마다 정리하고 활용할 수 있도록 해야겠다.