February 10, 2022

🗣 자유 토론

• 메신저가 여러가지인데 어떤 메신저 디자인을 기반으로 만들까요?
  • 제일 친숙한 카카오톡?

🌐 참고 링크

1. styled-components 반응형 및 스타일 리셋 설정하기
2. React에서 Font Awesome 사용하기

🤯 이슈 해결

• https://stackoverflow.com/questions/62259351/react-redux-error-default-parameters-should-be-last-default-param-last : 두시간 삽질,, eslint & redux 충돌

• Uncaught TypeError: Cannot read properties of undefined (reading 'name') : useSelector 에러

  const name = useSelector((state) => state.logInReducer.user.name);
  // combineReducers를 사용하면,
  // state.{사용하는 리듀서}.{state 내부접근} 순으로 해야한다.
  // 그런데 state.{state 내부접근} 이렇게 접근해서 오류가 있었다.
  

• npm run start시 iframe 강제생성 오류: package.json에 다음 코드를 추가

  "resolutions": {
      "react-error-overlay": "6.0.9"
    },
  "devDependencies": {
      "react-error-overlay": "6.0.9"
    },
  "scripts": {
      "preinstall": "npx npm-force-resolutions"
    }
  

• onSubmit 새로고침 되는 현상

  • button 말고 form에 onSubmit 속성 달아줘야 refresh 현상 없어짐

  <form onSubmit={onSubmit}>
  

• 입력창에서 shift + enter 하면 개행, enter는 전송

  <MessageInput
    type="text"
    placeholder="Enter message"
    name="message"
    onChange={onChange}
    onKeyDown={handleKeyPress} 
     // onKeyUp -> onKeyDown 이슈 해결! 
  />
  
  const handleKeyPress = (e) => {
    // shift + ender 하면 return, 개행 적용
    if (e.key === 'Enter' && e.shiftKey) {
      return;
    }
  
    // 그냥 enter 입력하면 
    if (e.keyCode === 13) {
      e.preventDefault();
  
      // 메시지 입력을 하지 않았을때 enter누르면 반환
  		if (text.length === 0) return;
  
      onSubmit(e);
    }
  };
  

1. 로그인 cancel시 null 뜨는 현상

   

   useEffect(() => {
     let userInput;
     while (true) {
       userInput = prompt('사용자 이름을 입력해주세요.');
   
   		// 입력받은 값이 있으면 while문 탈출
       if (userInput !== null && userInput.length > 0) break;
     }
     dispatch(logIn(userInput));
     alert(`반갑습니다 ${userInput}님 😀`);
   }, []);
   

🏗 전체적인 개발 순서

0. 프로젝트 세팅