[Pre-Project] 문제 해결 모음

1. 로그인 화면 구현 다 했는데, 인풋에 글자를 입력하면 깜박거렸다.

구글링 해보니까 FOUC 즉, 화면 깜박임 현상으로
외부의 CSS가 불러오기 전에 잠시 스타일이 적용되지 않은 웹 페이지가 나타나는 현상 이라고 했다. (출처: https://string.tistory.com/103)
해결책을 읽어보니 @import의 사용을 자제해야 한다 라고 되어 있었다.

• 해결방법 : Lazy, Suspense로 소셜 로그인컴포넌트를 필요할때 마다 불러와 사용되도 록 했었는데, 글자를 입력할때마나 불려와지는것 아닐까? 하고 상단에 임포트하고 lazy, suspense 를 지우니 문제가 해결되었다

2. 'data' is missing in props validation 이라는 에러가다른 컴포넌트에 props전달하는데 떳다.

• 해결방법 : eslintrc.json에 아래 조건 추가 하여 해결했다.

   "rules": {
      "react/prop-types": "off"
    }

3. git pull하는데, 'Please commit your changes or stash them before you merge.'라는 에러 메세지가 떳다.

커밋하는데도 해결이 안되었다.

• 해결방법 : 블로그를 참고하여 stash, stash pop으로 해결했다.
  https://blog.hodory.dev/2020/02/18/error-Your-local-changes-would-be-overwritten-by-merge/

4. 질문 리스트에서 질문 제목이 길면 원하는 만큼 크기가 유지 되지 않았다.

• 해결방법 : 아래의 코드를 css에적용

   overflow: hidden;  		// 을 사용해 영역을 감출 것
    text-overflow: ellipsis;  	// 로 ... 을 만들기 
    white-space: nowrap; 		// 아래줄로 내려가는 것을 막기위해

5. 각각의 질문의 상세페이지로 이동하기 위해 라우터를 사용했다. path설정이 잘 안되었는지, 파라미터값이 undefined가 나왔다.

• 해결방법 : 여러 블로그를 참고해 보니, useParams는 url의 파라미터값을 읽어들어 path에 전달한다고 한다. useParams를 변수에 담아주고 링크에 질문 id를 전달하고, 라우터path에 파라미터 값을 받도록 해줬다.

   const { id } = useParams();
    <Link to={`/questions/${questionId}`}>
    ...
    <Route path="/questions/:id" element={<Post/>}/>

• 참고 블로그 : https://explain-programming.tistory.com/6

6. 간혹 git mergie를 진행하려고 하면 'Please enter a commit message to explain why this merge is necessary,'라는 메세지가 나온다. 메세지를 입력하고 enter를 눌러도 반응이 없었다.

• 해결방법 :

     1. i를 누른다 (commit message를 입력하기 위해)
      2. merge에 대한 message를 입력한다.
      3. esc를 누른다.
      4. :wq를 입력한다.
      5. enter를 누른다

  참고 : https://stackoverflow.com/questions/19085807/please-enter-a-commit-message-to-explain-why-this-merge-is-necessary-especially