Today, I Learned

• height를 무조건 100%으로 하지말자. 그것 때문에 오늘 많은 고생의 시간이 있었다.
• 모바일에서 input 창을 누르면 확대되는 자동 기능을 없애려면 => link
• jsx 내에서 모바일 반응형인 상황에서의 처리를 해줄 때는

    const handleCommentFolder = () => {
      const mediaQuery = window.matchMedia('(max-width: 65rem)');
      if (!mediaQuery.matches) {
        setWebCommentFolder(!webCommentFolder);
        setCommentToggle(false);
      } else {
        setCommentToggle(true);
        setWebCommentFolder(false);
      }
    };

  이런식으로 window.mactchMedia를 사용해서 해주면 된다. (참고 링크)
• carousel 완성 : 원리 자체는 간단하다. 하나의 container div를 만들어놓고, 가로, 세로 고정값으로 설정해둔 다음에, 그 안에 slideContainer div를 만들고, 그 안에 이미지를 넣는다(몇개든 원하는 만큼). 이 때, slideContainer는 flex로 row 방향으로 설정해놓고, 새로 버튼을 만들어서 prev를 누르면 slideRef.current.style.transform = `translateX(-${currentSlide}00vw)`;
  이런식으로 설정을 해줘서 slideContainer를 움직인다. 프레임을 뚫어 놓고 그 뒤에 긴 필름을 옮겨가면서 보여준다고 생각하면 될 것 같다(참조 링크 : link).
• 여태까지 주로 %를 이용해서 크기를 조절해왔는데, vh,vw를 쓰면 더 편하다는 것을 알았다. viewport를 기준으로 작동하는 표준이라 브라우저마다 혹은 모니터크기마다 적절한 값으로 반응하게 할 수 있다. 참조 링크 : link

Planning to Study

1) 크롭하는데 시간이 너무 오래걸림 (렉걸림) => 사진 크기가 너무 커서그런가?
2) 댓글 달기 부분 세기 밑으로는 input 글씨 안보이게
3) 왜 안드로이드는 클릭하면 드래그 표시가 되지??
4) 댓글 펼치기 누르면 웹에서는 아예 채팅처럼 댓글 창으로 바뀌는 식으로 만들기
4) -1 : 모바일은 그냥 펼치기 냅둬서 펼쳐지도록 만들기
5) addNewForm : 모바일에서 어긋나서 나옴
6) Mypage stretch 해서 나오는게 날듯! + 글자 크기 조정
7) 스크롤 바 커스텀 할 수 있나??

Comment