🌱 [project #1] 첫 프로젝트에서 겪은 에러들

현재 2주 프로젝트를 진행 중이다.
프론트를 맡아 리액트와 리액트훅스를 사용하고 있으며, 블로깅 해야될 것들이 너무 많았다. 진짜 다 까먹기 전에 대충이라도 적어봐야겠다.

• input 속성값 type, required 등이 작동하지 않는다면 부모 태그가 form인지 먼저 확인해 보자.

• img url 데이터를 서버로 보내는데 이게 절대 작동을 안 하는 것이다. 알고보니 서버측 data type 을 long text로 설정해 줘야 됐던것. 왜냐하면 보통 varchar 255는 255자가 최대이기 때문. base64로 인코딩되서 나오는 값을 보면 어마어마하게 길다. 콘솔창 압살각.. 이렇게 에러 하나 시원하게 해결했다.

• 페이지 이동할 때 <a href="#"></a> 안에 넣으니까 잘됐다. href로 바로 이동하니까 새로고침이 계속되어 문제 발생의 원인이 되었었다.

<a href="#">
  <button className="nav-post nav-btn" onClick={this.moveToNewpost} > New post </button>
</a>

• input type="file" 스타일링 하는 법. label을 사용하고, input은 opacity : 0 으로 안보이게 숨겼다. label을 클릭하면 input이 열리는 특성을 이용하여 한 스타일링. 엄청 유용하게 잘 쓸 것 같다. 잊지말고 label for="file" input id="file" 각각 for과 id 안에 같은 이름을 적어줘야 작동한다.

• class 컴포넌트에서 왜 this.props.history가 작동하지 않는지 찾아보니 withRouter 을 불러오고 import { withRouter } from 'react-router-dom'; 내보낼 때 이렇게 작성해 줘야됐던 것이다. export default withRouter(); history 가 작동하지 않는다면 확인해 볼 것.

• 배경화면으로 영상을 넣는 작업에서 이미지 넣는 것 처럼 import로 받아오지 않으면 작동하지 않는다.
  autoPlay 자동재생 muted 소리없음 loop 무한재생

import introVideo from '비디오 경로';

<video  id="video" autoPlay muted loop>
  <source src={introVideo} className="introvideo" type="video/mp4" />
</video>

• form 태크의 특성에 대해서 좀 더 공부해야 할 것 같다. form을 썼을 때 새로고침되는 문제가 있었다.

• 로그인, 로그아웃, 회원가입 코드를 짜는데 꽤나 애를 먹었다.. 되게 쉬운 줄 알았었는데..ㅠㅜ 토큰인증방식을 썼는데, localStorage에 저장되서 새로고침해도 상태가 유지되도록 로직을 짰다. 그런데 로컬에는 그대로 있는데 새로고침하면 로그인 상태가 풀려버리는 것 같다. 프로젝트 끝나도 리팩토링할게 엄청 많을 것 같다 ㅋㅋㅋ

• input에 autoFocus 넣어주면 굳이 입력란을 클릭하지 않아도 옮겨가는 유용한 속성!

• textarea에서 (placeholder 말고) 직접 입력한 값을 초기화 하고싶어서 상태변경으로 관리해 보려했다. 그런데 초기화를 적용해도 화면에서 적용이 안 되는 것이다..! 당황 당황
  다른 것들은 잘 적용되는걸 보니 input, textarea 태그는 value 값이 있는 태그라 문제가 발생한다고 생각했다. 그래서 textarea 에 value를 content 로 지정해 주니 말끔하게 문제 해-결!

// 상태는 이렇게 관리하고
const [content, setContent] = useState('')

// 초기화 함수를 만들어 버튼 클릭 이벤트 발생시 함수 실행될 수 있도록 해주고 
function handleReset() {
  setContent('')
}

// 함수 컴포넌트 return 부분에서 value처리 
<textarea value={content}

• 그 외에 모달창, 이미지 업로드, 이미지 미리보기