일정 조율. 하루 전에 무조건 다 체크 해두기
JS로 유저 객체 식별 가능
이미지를 박스로 감싸고, 감싼 박스에서 height="auto" 줘야지 사파리에서 제대로 렌더링이 된다는 점
함수는 무조건 useCallback으로 감싸서 성능상 이슈 해결,
단순히 for 문을 반복시켜서 해결해야 하는 문제들은 배열로 생성할 수 있지만, 이 부분은 useMemo를 해야 성능상 이슈가 해결이 될 수 있던 것들
progress bar 생성 방식. 가장 react spring 으로 처리하는데, 일단 가장 바깥에 box 가 있고, 왼쪽에서 오른쪽으로 움직이는 icon 의 모습을 담고 있는 에니메이션 하나 박스가 커지는 에니메이션 하나 총 2개의 작동으로 프로그레스 바가 작동한다는 것
box sizing border box 잊기 쉬운 문제
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
background-color: rgba(0, 0, 0, 0.4);
overflow: scroll;
z-index: 3;
scrollbar-width: none;
--ms-overflow-style: none;
::-webkit-scrollbar {
display: none;
}
이런 식으로 modal 을 제작함.
반응형 때문에 px 대신 1rem 쓰기... 같은 사소한 습관들
커밋 분리하기 기능별 커밋으로 디테일 달아주기 같은 잊기 좋은 습관들이 효율을 가른다는 점들
seo를 위해서 h1, h2 opacity 0 으로 타이틀 달아주는 것
setInterval 을 통해서 time을 변경하는 부부분이 잇었는데, 저건 왜 setTimeout이 아니라 interval일까?
일단 자기 점검표
pr 보내기 전에 점검 할 내용
1. 이미지 확인
2. ui 배치
3. gtm
4. 글자 크기 및 폰트
5. dev link 확인
6. 공유문구, 사이트명
7. 랜딩 링크 확인(스폰서, 결과?)
한 번쯤 고민해봐야 할 문제들
textAlign=center, justifyContent center, position, grid 같은 css의 부족
...props로 추가로 받아오는 것들
gtm이 어디에 달려있는지 확인
바꿔야 하는 부분
1. initial button
2. sponsor logo 2개
3. 결과페이지 버튼들
바꾸지 않아도 되는 부분
1. intro button
2. questionPage 부분
3. 모달 페이지 결과로 돌아가기
gtm 이 달리는 기준은 뭘까?
1. 페이지 넘어가는 부분마다
2. 버튼 클릭시마다
예외는 로딩 페이지 정도?
isbridge 같은 걸로 만들려면 조금 detailquery, gtm, 다 신경 써야돼서 생각보다 귀찮을 수 있음. ...props 적극 사용 검토
