front 개발하면서 가장 많이 하는 노가다를 정리해보자

1. 컨텐츠

  1) 내부 컨텐츠 정렬

    - 컨텐츠 중앙정렬하기

    - 컨텐츠 양끝으로 정렬하기

    - 컨텐츠 별 너비 1/n씩 가져가기

    - 컨텐츠 행 또는 열로 배치하기

    ※ flex display가 제일 편하다.

       · 빈 레이아웃으로 맞추는 것 비추

  2) 컨텐츠 크기 및 간격 조정

    - margin 넣기

    - padding, border가 크기에 영향주는 것 고려

    - 크기 너비 적용하기

  3) 컨텐츠 내용이 넘어가는 것에 대한 예외처리

    - 'text'인 경우 ellipsis

    - '카드'인 경우 overflow hidden 처리

    - 스크롤바 처리

      · 스크롤바는 너비를 차지하므로 overlay처리 혹은 숨기기

      · 스크롤바에 따라서 다음내용 가져오는 서비스 호출해서 append하기

    - 펼쳐보기, 접기

    - flex:1, frex:2 등으로 늘어나는 비율, 혹는 축소비율을 1:2 비율로 설정하기

  4) 테이블

    - 페이징 처리

  5) 토글 버튼

 

2. 이벤트 바인딩

  1)클릭 이벤트

    - 업무에 따라 이벤트 변경

      · ex) 텍스트 수정중인 화면에서 뒤로가기를 눌렀을때 나가기 팝업이 뜬다.

        → event on/off를 한다

        → overlay appendChild한 후 remove 한다 (이벤트 버블링 주의)

  2)더블클릭 이벤트

    - 모바일 웹을 만드는 경우 dblclick이 적용되지 않는것 주의 (나의 경우는 hammer lib로 해결)

 

  ※ 주의사항

    · 이벤트 버블링, 캡처링 주의  - event.stopPropagation()

 

3. 팝업 띄우기

  1) 공통 팝업

    · Commpopup.open(renderInfo);

  2) 토스트 팝업

    · toastPopup.open(message)

 

4. 데이터 처리

  1)mobx

  2)전역 객체