이번 프로젝트에서 알게 된 것들 - 1

YuJin Lee·2021년 2월 1일
TIL
0

TIL

목록 보기
1/3
  • Xd 로 작업된 디자인은 폰트의 line-height 값이 폰트 영역의 높이값과 일치하지 않음.

—> 제플린에 폰트의 라인헤이트 값과 동일하게 스타일을 주어도 디자인과 동일하게 맞출수 없음.
—> 해결 방안: 폰트 사이즈별 line-height, letter-spacing 가이드를 요청하여 해당폰트를 믹스인으로 적용하여 사용하였음.
(같은 폰트 사이즈는 모두 line-height를 동일하게 적용하는 것으로 디자인과 사전 협의.)

  • 아이패드는 아이패드가 아닐 수도 있다

아이패드 iOS 13 버전에서 userAgent가 MAC PC(MacIntel)로 넘어온다.
https://littleshark.tistory.com/56
—> 아이패드가 아닐경우 케이스에서 아이패드 일경우를 별도로 체크 해줘야함.

  • userAgent PC 체크하기

아직은 새로나온 m1도 userAgent가 MacIntel로 찍힙니다..
아래와 같이 추가 처리필요해요
https://stackoverflow.com/a/65412357

  • 모바일 또는 태블릿 기기에서 가로모드 체크하기

window.orientation로 체크하는 기능은 권장하지 않습니다. 일부 브라우저는 해당 기능을 여전히 지원하지만 웹 표준에서 이미 제거 되었거나 삭제되는 중으로 호환성 목적으로 만 유지 될 수 있습니다.
https://developer.mozilla.org/en-US/docs/Web/API/Window/orientation

또한 window.screen.width로 체크시 에뮬레이터에선 잘되지만 실제 iOS 기기에서는 window.screen.width를 가로든 세로든 똑같이 인식하여 window.matchMedia로 체크하였습니다.

_.debounce( () => {
	 if (window.matchMedia(‘(orientation: portrait)‘).matches) {
		세로일때
	} else if (window.matchMedia(‘(orientation:landscape)’).matches) {
		가로일때
	}
}, isIos ? 150 : 300

iOS 디바이스와 안드로이드의 가로/세로모드 전환 타이밍이 달라
_.debounce로 각각 다른 타이밍을 주어 체크했어요

  • lodash, debounce, throttle 이해하기

debounce, throttle
https://webclub.tistory.com/607

  • 아이폰( 노치가 있는 디바이스일 경우 ) “크롬” 브라우저에서 가로모드로 본 후 다시 세로로 돌렸을 때 여백이 생김.

크롬 브라우저 또는 아이폰 최신기종 과 크롬 브라우저 사이의 호환성 문제로 보입니다. (추정..)
크롬 홈도 아래와 같은 현상이 발생합니다. 이미지는 구글 문서 참조
(해당내용 아시는분 또는 자료있으신분 공유 부탁드립니다.)
(네이버도 해당 현상발생함.)

  • 사파리 다크모드에서만 파비콘에 흰색 배경이 나와요.

—> 사파리 다크모드 탭 과 파비콘 사이의 대비가 충분하지 않을경우, 사파리가 파비콘에 하얀색 배경을 넣음. (오류가 아닙니다.) https://stackoverflow.com/questions/59233531/safari-favicon-incorrectly-rendering-with-white-background

파비콘 적용시 유용한 사이트
https://realfavicongenerator.net/#.X_1xZWT7R0

파비콘의 모든것, iOS/안드로이드/윈도우 각각 환경에 맞춰 옵션선택도 가능하고 즐겨찾기 아이콘이나 윈도우 시작메뉴, 터치바에 나오는 아이콘등도 설정할수있는 html 소스를 만들어주고 그에 맞는 ico 파일로 변환해주는 사이트.

(단어단위로 떨어지지만, 단어가 길고 영역을 벗어날 경우엔 줄바꿈되게 하자)
https://wit.nts-corp.com/2017/07/25/4675

  • iOS 브라우저 뒤로가기 캐싱 BFCache(Back-Forward Cache)

브라우저 뒤로가기 또는 앞으로가기 하였을경우, 이전 상태가 복원되는 경우
window.onpageshow~ 로 캐싱되었을 경우를 체크하여 초기값으로 리셋 해야하는 경우가 생겼습니다.
ex) 모달 창이 열린상태로 브라우저 뒤/앞으로 가기 클릭시 그대로 모달창이 열려있음.
https://changbaebang.github.io/2019-09-12-bfcache/

	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	https://estar.tistory.com/100

  • Textarea 에서 placeholder 가 잘리는 현상이 iOS 에서만 발생

아래 placeholder-shown 속성을 넣어주면 잘리지 않고 보인다.

	textarea:placeholder-shown {
   		 overflow: visible;
	}

input:placeholder-shown/ input:placeholder 이해하기
https://css-tricks.com/almanac/selectors/p/placeholder/

  • 클립패스css 만들어주는 사이트
    https://bennettfeely.com/clippy/

  • IOS 디바이스에서 이미지를 캔버스로 그려 로드 할 때 이미지가 안나오는 현상 발생.
    이미지를 캔버스로 그려 로드 할 때 캐싱 된 이미지가 있을경우, 이미지 로드를 안하는 경우가 발생했습니다. (이미지 안나옴)
    image load 이벤트는 태우는데, 이미지데이터는 안주는 경우..
    —> 이미지에 _.uniqueId 사용하여 id를 붙여주어 해당 과정을 해결.정확한 원인은 파악하지 못했습니다. 이부분도 iOS 브라우저 캐싱 문제가 아닐까 추정합니다..
    lodash: https://lodash.com/docs/4.17.15

읽어보기

깔아두면 유용한 구글 확장 프로그램

  • 반응형이 아니면, 다국어 언어파일은 디바이스타입별로 따로 만드는걸 고려하자.

  • CANVAS의 Composition API는 MDN의 정보와 다르게, 실제 적용가능한건 매우 한정적이다. (쓸만한건 거의 안된다고 보면됨)

  • 애니메이션의 타이밍조절을 위해, 스크립트로 트리거를 만들고 실제 애니메이션 수치는 개별엘리먼트단위로 CSS에서 처리하는게 추후 수정에 효율적이다.

  • 반응형이 아닌 경우, 사이트 타입별로 공통 모듈이 존재할 수 있는데, 설계 검토를 끝낸 후 차이가 없다면 git submobule 혹은, npm 패키지로 만들어 공통 관리하는 방법이 수정 및 개선 작업에 있어서 나을것 같다.

  • gulp Task안에 webpack task를 포함하지 말고, 영역을 아예 분리하여, webpack과 gulp를 별도 프로세스로 가동하는게 더 효율적이다. browerSync를 그 앞단에 공통진입점으로만 사용하는걸 고려해볼만 하다.

  • 어드민에서 설정한 Count Down같은 기능이 있을 경우, 목표시간만을 서버에서 내려 받으면 로컬시간과의 미세한 갭이 점점더 쌓여 나중엔 큰 차이를 만든다. 서버기준의 잔여시간을(서버의 현재시간 - 서버의 목표시간 ) 내려 받아, 로컬에서 로컬의 현재시간에 내려받은 잔여시간을 더해 로컬의 목표시간을 설정하는게 좋다. 여기서 RAF을 사용하여 렌더링할 때, 성능최적화한다고 timestamp에서 1초마다 거르지말고, 그냥 16ms마다 매번 찍어야 오차없는 타이머를 구현할 수 있다.

  • 개발에서 프론트화면을 개발하는 방법이 다양하지만, JS로 DOM을 구성하는 경우 퍼블에서 작성한 initialize 함수보다 늦게 실행될 수 있으니, initialize함수를 분기하여 개발페이지에서는 개발에서 DOM조작 후 명시적으로 호출할 수 있도록 메소드를 제공하는게 낫다. 어떻게 될지 모르니 처음부터 Dom ready콜백함수를 별도 Method로 분리해두자

  • CANVAS의 Pixcel manipulation 비용은 매우 크다. 16ms마다 바뀌는 큰 사이즈(1920x2)의 이미지데이터에는 진지하게 필요여부를 고민할 필요가 있다.

  • 메인페이지에 비디오를 떡칠하는건 멍청한 짓 같다.

  • netlify, gitlab, slack의 알림 조합은 괜찮았다.

profile
YuJin Lee
배운 것을 기록하는 곳 💻🙂
다음 포스트

이번 프로젝트에서 알게 된 것들 - 2

0개의 댓글