mr 전 확인 체크리스트

해피데빙·2023년 3월 22일
0
✅ overflow, line-clamp, no-wrap 등 캠퍼스픽, 에타 비교하면서 어떤 경우에 사용하는지 확인하기
✅ v-html 확인하기 

렌더링

  • 처음 페이지에 들어왔을 때 잘 돌아가는지 확인하기 위해 렌더링 속도 늦춰서 확인
    ex. network throttle, api 속도 늦추기
  • 확인 X시 생길 수 있는 문제
    1) /lecture 페이지에서 "point:0"으로 default 값을 두면 첫 렌더링 때 먼저 나와버림
    - 모두 한꺼번에 나올 수 있도록 해야 하기 때문에 null로 설정하고 v-if: point !== null로 처리
    2) !isFetched일 때 loading 태그 나오도록
    • fetch할 때마다 this.isFetched=false로 만들어야 loading 태그가 무조건 뜬다
    • fetch를 끝낸 다음에 this.isFetched=true로 만들어야 fetch 확인 가능

공통 값

  • 부모 태그에서 설정 가능한 공통 값 : 모든 자식 태그가 공통으로 쓰는 값
    ex. font-size, span 등 태그 이름
    단, 자식 중 하나라도 다르면 다른 하나에 override할 값을 넣는 것이 아니라 각각 따로 설정하는 것이 좋다

규칙

  1. 사이즈는 small: 11px, medium: 24px
  2. padding, margin: 8의 배수 (+ 가끔 세밀하게 하기 위해 4px)
  3. input,a 태그는 브라우저(사파리만??)에서 직접 스타일을 입히기 때문에 body에서 공통으로 주고 있는 값이 잘 안 먹힌다. 그러므로 직접 input, a태그에 스타일을 줘서 override를 해야 한다
  4. height는 웬만하면 쓰지 말기. line-height에 px로 값을 설정해줘야 나중에 안드로이드, ios, 브라우저 등에서 기본 폰트 사이즈를 확대/축소했을 때 요소가 유기적으로 height를 변경할 수 있다
  5. 버튼 이미지는 주로 div 안에 img 태그, text 태그를 넣어서 만드는 게 아니라 &::before 또는
  6. text가 여러 줄일 때 word-break: break-word;
    (영어는 정해진 요소의 너비를 넘어가버리기 때문에 이 속성을 사용하는 것이 좋음)
    이외: overflow, line-clamp, no-wrap 등 캠퍼스픽, 에타 비교하면서 어떤 경우에 사용하는지 확인하기
  7. bold가 아니라 strong 태그 사용하기

이외 피드백

  • input type="submit"
    - form에 submit.prevent를 써서 제출 후 뒤로가기 하는 것을 막아주기
    -"제출"이라는 글자가 나오지 않도록 font-size:0을 써주기 (value=''식으로 하지 말고!)

  • h1, h2 : 강의실 페이지 같은 경우 강의실은 section의 제목이므로 h1이 아니라 h2 사용

  • span,p : span에 block을 주지 말고 p

profile
노션 : https://garrulous-gander-3f2.notion.site/c488d337791c4c4cb6d93cb9fcc26f17

0개의 댓글