Code/필기

프론트엔드 개발 취업 아카데미 [20,21차] 필기 / 슬라이드 UI 개발

홀로수키 2022. 2. 22. 18:22
<!-- 자바스크립트! 쉽지 않다! 힘내자 -->

 

이번 주부터 본격적으로 자바스크립트 UI 개발 수업이 시작되었다. 스타트는 이미지 슬라이드 UI!  아 진심으로 죽을 맛이다! 너무 어렵다! 하하하! 선생님께서 슬라이드 UI 코드가 정말 익숙해지도록 매일 아침마다 타이핑시킬 거라고 하셨다. 슬라이드 UI 개발 코드는 스텝을 밟을수록 점점 간결해지고 단순해지는 대신 더 많은 기능을 가지게 되었다. 선생님께서는 이 최종 코드를 얻기까지 아주 오랜 시간 시행착오를 겪었다고.. 우리는 날름 받아먹는 거니까 감사한 마음으로 머릿속에 처넣도록 해야겠다. 학원 사람들과 같이 팀 프로젝트를 진행하기로 했다. 다양한 의견을 주고받는 과정이 재미있었고, 벌써 작업물이 기대 되잖아!!! 재미있게 해보고 싶다. 

[프론트엔드개발 20, 21차 필기] 번뜩할 때마다 필기를 한 관계로 두서없음 주의.

 

JavaScript 

  • 이벤트 버블링과 이벤트 캡처링 (MDN 자바스크립트 이벤트 개발 참고!)
 

이벤트 입문 - Web 개발 학습하기 | MDN

이벤트(event)란 여러분이 프로그래밍하고 있는 시스템에서 일어나는 사건(action) 혹은 발생(occurrence)인데, 이는 여러분이 원한다면 그것들에 어떠한 방식으로 응답할 수 있도록 시스템이 말해주

developer.mozilla.org

  • UI이벤트에서 자주 사용되는 기능
    resize - window나 프레임의 크기를 바꿀 때마다 발생한다.
    scroll - 스크롤바가 있을 때 발생하는 이벤트.
    focus(이벤트 4개 있음) - 요소가 포커스를 받거나 잃을 때 발생한다.

    마우스, 휠 이벤트 - mouseenter, mouseleave, mouseover, mousewheel
    click이벤트는 자동으로 접근성이 지켜짐.
    마우스 이벤트 중 mouseenter, mouseleave 를 사용할 것.
    마우스 이벤트가 키보드로도 작동이 되는지 웹 접근성 사용면에서 반드시 확인할 것.
    (키보드, 모바일에서 적용이 되지 않는 경우가 있음)
    mouseWheel 이벤트는 파이어폭스에서 DOMMouseScroll이라는 이름을 사용한다. 대체 왜..?
    (크로스 브라우징 문제가 생길 수 있다.)

    키보드, 텍스트 이벤트 - keydown, keypress, keyup, input
    (텍스트가 박스에 삽입되기 직전에 발생. 데이터를 다룰 때 사용하기도 함)
    장치이벤트(모바일용) - 동선을 확인할 수 도 있음.
    deviceorientation - 핸드폰을 흔들었을 때 반응하는 기능 등.
    devicemotion - 가속도 감지. 헬스어플 등에 사용.
    터치, 제스처 이벤트 - 모바일에 최적화
    touchstart, touchmove, touchend 이거 3개라도 잘 알아두도록!

슬라이드 UI 개발

먼저 제이쿼리로 개발. 후에 바닐라 JS로 재개발 예정!

  • 슬라이드 UI개발.. 기본 중의 기본이다.
  • 먼저 글이나 그림으로 정리를 한 후 코드 작성하기.
    1. 동그라미(페이징)에 클릭이벤트 붙이기.
    2. 몇 번째 슬라이드가 나와야 할 까. (i번 찾기. this!)
    3. 일단 슬라이드 다 지워!
    4. i번 사진 보여줘!
    5. 페이징 동그라미에 스타일 클래스 on지우기
    6. i번 페이징에 스타일 클래스 on붙이기!

    ** 그 외 슬라이드를 만들 때 고려해 볼 문제들!
    - prev, next 버튼 기능
    - 일시정지, 재생 버튼 기능
    - 슬라이드의 개수가 늘어나면 어떡하지? (length사용. 아 length뒤에는 괄호 없다)
    - 현재가 몇 번째 슬라이드인지! (n번째. n-1)

  • 문제를 해결하려면 어떻게 해야 하는지, 먼저 설계하고 코드 짜는 습관 필요!
  • 중간중간 동작이 되는지 alert, console창으로 꼭 확인하기! (한 줄 작성하고 확인.. 반복)
  • 함수 안에 들어가 있는 지역변수명은 편하게 작성해도 된다.
  • JS안에서 CSS명령어를 작성할 때 무조건 객체 형태로!
  • 스크립트를 작성할 때는 머리, 가슴, 배로 나눈다고 생각하자. 
    머리에는 모든 변수를 정리, 가슴에는 이벤트와 액션을 정리, 배에는 모든 함수들 정리
  • 완벽하게 프로퍼티와 메소드로만 나눠져야 한다.
  • 코드를 덩어리로 인식해야 확장이 가능하다.
  • 코드를 작성하다 보면 함수보다 변수가 더 어려울 때가 있다.
  • 선생님께서 말씀하시길.. 안 보고 20번은 짜 봐야 한다고 하셨다.
  • 논리적인 코드와 디자인이 포함된 코드는 구분하여 작성하자. 
  • indicator도 자동으로 뿌려지도록 단순화
  • \n - JS에서 탭, 줄 바꿈 기능!
  • .animate() 앞에는 반드시 .stop(true)를 붙이도록!
  • 도출되는 답이 불(true, false)이면 변수명을 is로 시작하면 알기 쉽다!
  • 재귀적 용법
    clearTimeout, setTimeout - 계속 반복 작용하는 곳에는 interval보다 timeout을 사용하자.

저번에 기록하지 못한 CSS필기!

- 슬라이드 개발할 때 P태그로 감싸진 dummy가 필요하다.

- table 테이블!

caption은 반드시 기재하도록 한다. 접근성을 준수하기 위해서!

width값은 100%로 설정한다.

table-layout 속성! 매우 유용하니 기억하도록!

테이블 스타일을 템플릿화 시킬 때 공통 margin을 어디에 줘야 할지 깊이 생각해보기!

특히 테이블 밑에 위치한 텍스트를 고려해서.

테이블 밑에 오는 콘텐츠에만 속성 값을 주려면 아래와 같이 + 선택자 사용해서 스타일 작성!

div.spec-table table + ul.desc {}