Today, I Learned

• const { matches } = window.matchMedia('(max-width: 48rem)');
  이 코드를 통해서 만약 웹으로 접속하면, 즉, max-width설정을 통해, 48rem 이하인 디바이스에서 접속하면(max-width은 그만큼의 px를 넘지 않을 때를 가정한 것), matches에 true가 리턴되고, 만약 데스크톱과 같은, 48rem 이상의 디바이스에서 접속하면, matches에 false가 리턴되어서, 리액트 내에서 모바일, 데스크톱에 따른 다른 onClick 이벤트 등을 설계할 때 유용하다.(실제 사용 예시)

    useEffect(() => {
      const { matches } = window.matchMedia('(max-width: 48rem)');
      if (matches && text.copyOfTask.length >= 25) {
        let condense = text.copyOfTask.substring(0, 25);
        condense += '...';
        setText({ ...text, copyOfTask: condense });
        setMatches(true);
      } else if (!matches && text.copyOfTask.length >= 50) {
        let condense = text.copyOfTask.substring(0, 50);
        condense += '...';
        setText({ ...text, copyOfTask: condense });
      }
    }, []);

• input tag에서 처음으로 focus on했을 때, 즉, 커서를 처음으로 가져다 댔을 때의 설정을 해줄 때는 onFocus를 써주면 되고, 마지막으로 커서에서 벗어났을 때의 설정을 해줄 때는 onBlur 를 써주면 된다. 이번 경우에는 입력창에 커서를 둬서 수정을 시작(onFocus)=> 그리고 수정을 끝내면(onBlur) 서버로 그 수정 사항이 적용된 컨텐츠를 post하도록 설계하는데에 썼다.

          onFocus={(e) => {
            // 처음 포커싱이되면 input의 value에 실제 서버에서 받아온 자료인 text.task를 바인딩함. 이것을 수정하면 그 내용이 text.copyOfTask로 연동되는 구조
            e.target.value = text.task;
          }}
          // 5) input에서 포커스 아웃할 때 실행된느 함수로 - 수정이 끝난 시점(서버에 요청을 보내는 시점)
          onBlur={(e) => {
            const newTask = e.target.value;
            // 미리 target.value를 변수로 받아두고
            let condense = newTask;
            if (!match && newTask.length >= 60) {
              // 만약 수정후에 60자 이상이면 text.copyOfTask에는 ... 추가해서 저장
              condense = condense.substring(0, 60);
              condense += '...';
            } else if (match && newTask.length >= 25) {
              // 만약 수정후에 60자 이상이면 text.copyOfTask에는 ... 추가해서 저장
              condense = condense.substring(0, 25);
              condense += '...';
            }
            // text.task도 게속 갱신시켜야하므로(만약 새로고침 버튼을 누르면 서버에서 받아온 새 정보가 들어오므로 상관x)
            // task와 copyOfTask모두 setText로 갱신시켜줌(이 때, copyOfTask는 글자수 고려후 ...추가해서)
            setText({ task: newTask, copyOfTask: condense });
            // 마지막으로 서버로 실제로 내용 수정 요청을 보냄(이 때, setText와 axios사이에는 비동기 처리, 즉, Promise로 이어줄 필요는 없음)
            // axios.post('서버로 task 내용 수정 요청 with newTask');
          }}

• input 작성시에 문법 오류가 있는 곳에 자동으로 빨간줄이 그어지는 효과 없애는 법
  spellCheck="false"
• react hooks에서 componentDidMount와 같은 기능을 만들 때, 두번째 인자로 배열을 준다

    useEffect(() => {
    // 이런식으로
    }, []);

Planning to Study

• 모바일에서 보면 레이아웃이 찌그러져(?)보인다.. 개발자 도구로 모바일 크기 설정해놓고 보면 아무 문제 없는데 실제 모바일로보면 문제가 생긴다. 처음 겪어보는 일이라 공부해보고 수정해봐야겠다..