2020-10-14

2020-10-14 고등 개발자의 하루 회고

오늘 하루도 다사다난하게 보낸거 같다. 아무래도 정규 수업 이외에 자신이 하고 싶은걸 배우는건 방과후 시간에만 가능하기 때문에, 오늘도 바쁘게 강의를 듣고 이해를 한거 같다.

오늘은 instargarm clone codeing 강의중 javascript 기초 문법 / 데이터 타입에 대해 공부하였고
이외에도 click-event, (add, remove, toggle), scroll-event에 대해 배우었다.

우선 click-event에 대해 설명을 하면 javascript를 활용해서 해당 구역을 클릭하면 이벤트를 발생 시켜 내는 구조이다. 어찌보면 간단한 기능일수도 있지만 이 기능과 (add, remove, toggle)를 활용해서 간단하게 하트를 클릭하면 하트가 빨간색으로 뜨고, 다시 클릭하면 빈 하트가 되는 간단하면서 필요한 기능을 구현할수 있게 되었다.

하지만 해결해야할 문제가 한개 있다 querySelector를 활용하게 되면 최상단에 있는 구문만 선택하게 되는데, 문제는 최상단에 있는 한개만 아까의 기능(하트 클릭시 이벤트 발생)이 발생하게 된다. [다른 객체에서는 적용불가]

그래서 이부분에 대해 고민을 해보왔지만, 그리 좋은 대안은 생각하지 못했다.
querySelectorAll를 써보기도 했지만 원하는 답은 나오지 않았다.

시간이 된다면 나중에 고쳐볼 문제이기도 하다.

그런다음 scroll-event를 활용해서 일정 scroll 기준치가 넘으면 상단 네비게이션 바에 flex 속성값을 주어서 고정시키면서 따라 다니게끔 만들었다.

또한 움직이기만 하면 심심해(?) 보여서 여러가지를 손보게 되었다. transition: all 값과 height값을 일정부분 조정해서 위에 일정부분 scroll이 되면 아래로 내려가게끔 만들었다.

오늘 얻은 성과는 javascript에 대해 기초적 부분을 다시 익히고, 이걸 바로 instargram clone codeing에 적용한점이 좋았다!

You forgot to set the qrcode for Alipay. Please set it in _config.yml.
You forgot to set the qrcode for Wechat. Please set it in _config.yml.
You forgot to set the business and currency_code for Paypal. Please set it in _config.yml.
You forgot to set the url Patreon. Please set it in _config.yml.
Your browser is out-of-date!

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

×