2020.11.30(월) 개발 일지

09:00 ~ 12:00

1. 노마드코더 코코아톡 클론코딩 
1. z-index: 각 html element에 대해 레이어를 정의할 수 있다. 0이 default. 숫자가 올라갈수록 상위 레이어를 나타낸다. position absolute, fixed된 element에 대해 사용가능하다. (채팅창 구현에서 status bar와 header bar가 position: fixed이며 이때 background-color를 줌으로써 스크롤될때 올라오는 다른 element와 겹쳐보이지 않도록 했다. 다만 z-index를 주지 않으면 status-bar가 header-bar에게 가려지므로 z-index에 대해 우선순위를 status-bar에게 줘야한다.)
2. display:flex를 특히 많이 쓰는거 같다. justify-content: flex-start, flex-end, align-items: flex-start, flex-end, center. flex-direction: column, row-reverse(자식 element들 순서 바뀜) .특히 자식들의 높이가 만약 하나는 부모와 같고 하나는 그렇지 않을 때 align-items: flex-end를 사용하면 부모의 높이와 같은 자식은 가만히 있지만 그렇지 않은 자식은 밑으로 붙는걸 보고 신기했다. (채팅창 구현 중에 메시지 Element에서 말풍선과 시간을 구성할 때 사용함)
3. 레이아웃 짜줄 때 width: 25%, 33%, 50%, 100% 를 활용하면 의도대로 element들을 위치시킬 수 있다.
4. class modifier를 적용하면 편하게 추가된 element에 대해 다른 옵션을 주는 것이 편해지는거 같다. class = “row”, class=“row own” 이렇게 두 row class가 있으면 row 에 대한 css 설정이 양쪽 다 적용될 것이다. own에 대해 추가로 css 설정을 해주면 row에서 설정해줬던것에 추가해줄수도 있고 변경해줄수도 있으니까 말이다. (채팅창 구현 중에 상대방, 나 메시지 element를 이런식으로 구현함)
5. width를 가지려면 부모 element도 width가 존재해야한다.(부모의 부모가 WIdth가 있다고해서 그걸 사용하는건 불가능하다.)
6. .class_name_1 .class_name_2: 앞쪽 클래스에 속하는 모든 뒤쪽 클래스에 대해 적용됨(hierachy 관계없이)
7. .class_name_1 > .class_name_2: 앞쪽 클래스의 바로 밑에 속하는 뒤쪽 클래스에 대해 적용됨(hierachy 1)
   
   1. 예를들어 채팅창에서 메시지 입력 부분의 버튼에 들어간 화살표와 이모티콘은 둘다 i tag이다. 둘다 같은 class에 속하긴 하지만 차이가 있다면 버튼 아이콘은 button tag가 한 번 더 감싸고 있다는 점이다. 그래서 만약 이모티콘에 해당하는 i만 조작하려면 6번의 경우가 아닌 7번의 경우를 사용해야한다.

이제 곧.. 100%..

채팅창 클론

13:00 ~ 16:00

1. 노마드코더 코코아톡 클론코딩 끝!!! 드디어 100% 강의를 완강했다. 딱 오늘부터 챌린지 시작이라 급하게 진도를 빼느라 무리했지만 그렇다고해서 이해 없이 넘어가진 않았다. 그래서 진행이 더뎠는데 그걸 시간으로 찍어눌렀다 ㅎㅎ 아래는 앞으로도 헷갈릴거 같은 부분을 정리해놨다.
1. animation, element의 관계: 특정 element가 어떤 동작을 할 지 animation에 정의한다. 동작 대상인 Element css 코드에 animation attribute에 만든 animation name을 넣는다. 옵션값으로 infinite, forward등이 있다. animation-delay는 animation 시작전 멈춰있는 시간이다.
2. :hover, :focus(state selector)를 selector 뒤에 붙이면 해당 element는 명시한 액션을 만날때만 css코드가 적용된다. 이 점을 응용하면 animatinon 과 state selector는 조합되서 사용될 수 있다.  
3. will-change는 animation이 존재하는 Element의 Css 코드에 넣음으로써 브라우저에게 해당 ELement가 animation이 있을거라고 미리 명시하는 것이다. 
4. transition의 존재여부는 특정 element가 css로 인해 변할때 그 중간과정을 부드럽게 바꿔준다. 예를 들어 h1의 color가 White였다가 red가 될 때 transition이 없다면 그냥 순식간에 바뀌겠지만 transition으로 1초의 지연시간을 주면 서서히 색이 바뀌게 되는 것이다.
5. media query로 스크린 크기를 제한 둘 수있다. 예를 들어 @media screen and (max-width: 645px) {}가 있다고 가정하자. 중괄호 안의 css는 화면너비가 645Px를 넘지 않는 디바이스, 브라우저 창에서만 동작된다.

힘들었다.. 이제 오늘부터 코코아톡 챌린지 시작할 차례

 

최종 시연 영상

17:00 ~ 20:00

1. 코코아톡 클론코딩 챌린지 1일차 
1. 1일차 퀴즈 풀이완료, score: 13/14
2. 바닐라JS 챌린지 8일차
   1. 구현해야할 기능 목록을 README.md에 체크박스로 적어 놓음 => 확실히 commit도 편하고 구현해야할 기능이 쪼개져 있어서 복잡하지 않게 느껴진다.
   2. README.md에 적어놓은 기능들 차례대로 기능구현 중
3. 앞으로 해야할 것들: 챌린지 과제 마저 하기, 노마드코더 '리액트JS 영화 웹 만들기' 코스 수강, 블랙커피 레벨1 미션

코코아 클론 챌린지 1일차 퀴즈 및 깃허브 private 계정에 commit 완료

바닐라JS 챌린지 1일차 퀴즈 및 깃허브 private 계정에 commit 완료

22:30 ~ 01:30

1. 스터디의 미션, 교육사이트에서의 코스 수강 등 일주일을 바쁘게 달렸다. 그런데 '오늘 몇시간만 더 하면 끝이다' 이런 생각으로 버티고 해내면 다음 단계가 기다리고 있었다. 즉 개발 공부에 진짜 끝은 없는 것 같다. 단지 매일 매일 도태되지 않도록 최선을 다해 살아가야 할 뿐이다. 이 사실을 알아도 매일 열심히 살아야하는 내 지금 상황에 무슨 변화가 있겠나. 그러나 한 편으론 너무 지치고 힘들 때조차 무리를 해서라도 성취를 내야겠다는 생각은 지양할 필요가 있는 거 같다. 개발이라는 해위를 단기적인 시간투자로 끝내고 말것이 아니라면 속도보다 방향, 꾸준함이 더 중요하니 말이다. 스스로 페이스 조절도 해가면서 하자! 화이팅!
2. 블랙커피 레벨1 미션하기
   1. 마지막 시간엔 집중이 안됐다. 추운데 자전거 타고와서 그런가...
   2. 그래서 시간을 마냥 낭비할 수는 없으니 ES6에 대한 강의 영상이라도 보기로 했다(사실 3시간 중에 2시간은 멍 때렸다.)
      1. ES6강의를 보기로 결심한 이유는 블랙커피 스터디다. 이 스터디는 4주 동안 매주 미션을 제출해야하며 내일이 첫 미션 제출 마감일인데 내 코드엔 진척이 없기 때문이다. 막막해서 다른 사람이 제출한 코드를 봤는데 문법 이해가 안됐다. 알고보니 ES6문법이다. 내가 문법을 배워도 당장은 수월하게 작성하지 못하겠지만 적어도 읽고 이해할 필요는 있을거 같았다.
      2. 인프런의 윤지수 강사님(코드스쿼드 소속!)의 기초 ES6 강좌를 선택했다. 오늘은 간단히 spread operator, filter, includes, Array.from, module(export, import)에 대해 공부하며 ES6 문법에 대해 조금은 친숙해진 느낌이다. 내일은 arrow function, destructing array 등을 추가로 수강해야겠다.

인프런 강의의 목차 화면

 

---

오늘의 VScode editor 사용 시간