2021년 5월 2일 React State & Props 예습(이벤트 핸들링을 통한 정보 전달 + ubuntu npm run test / npm run start (React) 오류 해결)

내일부터 들어가는 React State & Props를 대비하여 미리 sprint를 진행해보았다. 

 

그 중 핵심이라고 생각하는 이벤트 핸들링 부분을 적겠다. 

 

일단 언급할 부분부분의 코드는 아래와 같다.  

 

  const Tweets = () => {
  const [name, setName] = useState('');
  const [sentence, setSentence] = useState('');
  
  const handleButtonClick = () => {
    const tweet = {};
    
    tweet.id = data.length + 1;
    tweet.username = name;
    tweet.content = sentence;
    
  };
  
    const handleChangeUser = (event) => {
    setName(event.target.value);
    // console.log(event.target.value)
  };
  
  const handleChangeMsg = (event) => {
    setSentence(event.target.value);
    // console.log(event.target.value)
  };
  
  
  ------------------------------------input, textarea---------------------------------------
                <div className="tweetForm__input">
                <input
                  type="text"
                  defaultValue="parkhacker"
                  placeholder="your username here.."
                  className="tweetForm__input--username"
                  value={name}
                  onChange={handleChangeUser}
                ></input>
                <textarea 
                  className="tweetForm__input--message"
                  value={sentence} 
                  onChange={handleChangeMsg}>
                </textarea>
              </div>
  
  
  
---------------------------------------button----------------------------------------------  
              <div className="tweetForm__submit">
              <div className="tweetForm__submitIcon"></div>
              {/* TODO : 작성한 트윗을 전송할 수 있는 button 엘리먼트를 작성하세요. */}
              <button className="tweetForm__submitButton"
                      onClick={handleButtonClick}>Tweet</button>
              </div>

input tag과 textarea tag에 사용자에의해 입력된 텍스트를 useState 훅의 set함수로 set해주고 이를 

 

tweet 이라는 빈객체에 넣어 우리가 가진 dummy data의 양식에 맞춘다. 

 

그리고 이 정보가 들어간 tweet을 dummy data에 unshift로 넣어준다.

 

(가장 먼저 올라와야한다고 해서 unshift로 넣었으나, 테스트 케이스는 통과하지 못했다.

 

이부분에 대해서는 내일 해결하여 기록할 것이다.)

 

---------------------------------------------------------------------------------------------------

 

Anyway 한창 sprint를 진행하고 있을때쯤 갑자기 우분투가 멈추었다. ㅠ 미친...

 

결국 재설치를 하였고 apt, git, npx, nvm, node, npm 필요해 보이는 것은 전부 터미널로 다운하였으나, 

 

진행하던 sprint파일을 다시 클론하여 npm run test와 npm run start 했을때 오류가 계속났었다. 

 

원인은 본인이 npm을 LTS 최신버전으로 설치를 했어도 컴퓨터를 부팅하고 터미널에 들어갈때마다

 

npm이 system이라는 구버전 npm을 자동으로 설정되어있기 때문이었다. 

 

그리하여 'nvm list' 와 'nvm use 버전정보' 단축기를 통해 해당 오류를 해결할 수 있었다.

 

사진은 아래와 같다. 

 

 

페어가 같은 문제를 겪고 있는 것 같았는데 ㅎㅎ 해결해 줄 수 있을 것 같다.