1. Node Sass version 5.0.0 is incompatible with ^4.0.0.

   • node-sass를 최신버전으로 설치하면 5.0.0버전이 설치되는데 이대로 실행하면 위와 같은 오류가 발생한다. 버전 호환이 왜 안되는지는 모르겠지만 최신버전을 지우고 예전버전을 다운받는다.

   • 해결방법

     1. yarn remove node-sass

     2. yarn add [email protected]

2. img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text

• 리액트에서 이미지 태그를 사용할 경우에는 alt를 꼭 설정해줘야 한다.

<img className="social-image" src={NaverLogo} alt="NaverLogo" />

3. rgba를 사용하여 색을 지정했더니 div내의 텍스트에는 투명도가 적용되지않음

• rgba로 알파값을 지정해주면 원래 해당 컬러에만 적용된다.

  ⇒ div내의 텍스트는 투명해지지 않고 div배경 컬러만 투명해짐.

• 해결방법

  ⇒ rgba대신 opacity를 사용한다. opacity를 사용하게 되면 해당 객체 내에 있는 모든 요소들이 함게 투명해진다.

  ⇒ 하지만!! 객체 내 요소들이 투명해지는걸 원치 않는다면 그냥 rgb나 hex로 색 지정해야됨

4. objects are not valid as a react child

• state변수와 함수를 file, setFile로 지정하니 해당 오류 발생

• 해결방법

  변수와 함수명을 uploadFile, setUploadFile로 바꿈

• 의문점

  이때는 오류가 발생했었는데 변수명 다시 file로 바꿔보니까 지금은 또 잘 동작함..알 수 없다.

5. 키워드 입력창에서 제일 최근에 생성된 #이 지워지지 않는 문제 발생

• #을 자동으로 입력하기 위해서 value의 마지막 원소값이 ' '일 경우 value에 #를 붙임

  ⇒ 이렇게 할 경우 당연히 #를 지웠을 경우에도 마지막 원소가 ' '이기 때문에 #이 계속 뒤에 붙는다.

  // useInputs.js
  else if (name === 'keywords' && value[length - 1] === ' ') {
  		dispatch({ type: 'CHANGE', name, value: value + '#' });
  }
  

• 해결 방법

  value의 마지막 원소값으로 확인하지 말고 ' '가 입력됐을 경우에 #을 붙일 수 있도록 한다.

  1. onkeyPress 사용

  ⇒ 키의 입력값을 확인할 때 주로 사용하는 속성이다. 입력창에 키가 눌렸을때만 이벤트가 발생된다.

  handleKeyPress = (e) => {
      if (e.key === "Enter") {
        ...
      }
    };
  
  <input
  		...
      onKeyPress={this.handleKeyPress}
  />
  

  2. onChange 사용

  ⇒ 일반적으로는 키의 입력값을 확인할때 해당 속성을 사용하지 않는다.

  하지만 엔터가 입력됐을때 자동으로 #를 입력하는 것이 목적이었기 때문에 useInputs.js에 구현된 onChange함수에서 키값을 확인해야 했다.

  onChange의 이벤트값을 로그에 출력해봤을때 e.nativeEvent.data에 입력값이 들어가는걸 보고 해당 속성으로 입력값을 확인하면 된다고 생각했다.

  // useInputs.js
  else if (name === 'keywords' && e.nativeEvent.data === ' ') {
  	dispatch({ type: 'CHANGE', name, value: value + '#' });
  }
  

6. 주제 입력창에 새로 입력해도 입력값이 반영되지 않는 문제 발생

• subjects대신 ct_subjects를 맵핑해서 그런거였음

7. react-dom.development.js:13231 Uncaught Error: Objects are not valid as a React child (found: object with keys {tag_id, tag_name}). If you meant to render a collection of children, use an array instead.

• keywords배열의 형태를 변경하고 나서 Contents에 반영하지 않아서 생긴 문제

8. 제목이 20자를 넘을시 alert창이 연속으로 여러번 뜸

• 영어로 입력하면 한번만 뜨는데 한글로 치면 여러번 뜬다 이유는 모름

• 오류이유: 20자를 넘으면 title을 변경하지 않기 때문에 useInputs의 onChange에서 value를 확인했을때 21자까지만 나와야 됨, 근데 실제로 확인해보면 그렇지 않음, 계속 입력되고 있음

  ⇒ 한글은 1글자를 입력한다해도 자음, 모음이 여러개 들어가기 때문에 함수가 여러번 호출됨

  '야야'라고 입력할 경우 '양'을 입력한 후에 'ㅑ'를 입력할때 함수가 세번 호출됨

  • 예시화면

  

• 오류화면

• 시도한 방법

  1. setTimeout을 사용해서 시간차를 두게 한다.

     ⇒ 처음에만 안뜨고 한번 뜨고나면 연속적으로 계속 뜬다

  2. value의 length가 아닌 byte로 입력을 제한시킨다.

     ⇒ length로 할때랑 똑같이 여러번 호출됨.

9. Access to XMLHttpRequest at 'http://52.78.77.73:8080/user/signup' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

• CORS에러에 대한 자세한 내용은 모르는거 정리 페이지에 있음
• 오류 상황: 로그인 POST를 요청하는데 해당 오류 발생
• fetchData함수를 실행할 때 catch절이 실행되어 error변수에 에러가 등록되긴 함. 하지만 로그인 페이지로 넘어간 후에 catch절이 실행되기 때문에 에러처리가 되지 않음.
• 오류이유: 서버쪽에서 처리를 안해준거였음

10. index.js:1 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

• Signup.js에서 임시로 회원가입 api 호출 결과를 확인하기 위해 로그문을 작성했었음. 페이지가 언마운트된 뒤에는 state를 확인할 수 없음.
• 해결방법: 함수가 아닌 곳에 api호출 state를 사용하지 말자

11. 로그인, 회원가입 API 연동 문제

• 로그인, 회원가입처럼 API호출 후 받는 반환값을 이용해 적당한 처리가 이뤄져야 하는 경우에는 비동기로 호출하면 안됨 (이게 최선의 방법인지는 모르겠음)

// signup.js
const handleSignup = () => {
		const signupDt = new Date().toISOString();
		axios
			.post('<http://52.78.77.73:8080/user/signup>', {
				email: email,
				name: nickname,
				pwd: password,
				signId: id,
				signupDt: signupDt,
			})
			.then((response) => {
				if (response.data === -1) {
					alert(Words.DUPLICATE_ID);
				} else {
					alert(Words.SUCCESS_SIGNUP);
					history.push('/login');
				}
			})
			.catch((error) => {
				console.log(error);
			});
};

• 오류이유: MemberAPI에 api요청 함수들을 작성해놓고 이 함수들을 useAsync 매개변수로 넘겨서 호출하는 방법으로 코드 작성함, 그런데 이렇게 하면 종종 api요청이 끝나지 않았는데도 데이터를 반환하고 끝나는 경우가 생김, 그래서 data에 원하는 값이 안 담김.
• 해결방법: parameter 변수를 같이 넘긴다. ⇒ 밑에서 자세하게 설명

12. get category api 요청 시 api를 무한대로 호출하고 계속 null값을 받아옴

• 오류 이유: useAsync의 useEffect에서 deps를 []안에 넣어놔서 그런거였음, deps는 원래 배열 형태로 들어오기 때문에 배열을 또 안씌워도 된다..바보야..!!

  // useAsync.js
  useEffect(() => {
  	if (skip) return;
  	fetchData();	
  }, deps);
  

• 커스텀 Hook으로 작성해서 발생하는 문제, 다른 방식으로 부르면 데이터 잘받아옴

  useEffect(() => {
  	axios
  		.get('<http://52.78.77.73:8080/category>')
  		.then((response) => {
  			console.log(response.data);
  		})
  		.catch((error) => {
  			alert('에러 발생');
  		});
  });
  

• 해결방법: 카테고리 목록을 저장하는 context api를 생성하고 CategoryList 컴포넌트에서 최초 렌더링될 시에 카테고리 목록의 길이가 1일 경우에만 api를 호출하도록 한다.

  // CategoryContext.js
  const initialState = {
  	categoryList: [{ id: 0, title: '전체' }],
  	currentCategoryId: 0,
  };
  
  function categoryReducer(state, action) {
  	switch (action.type) {
  		case 'SET_CATEGORY_LIST':
  			return {
  				...state,
  				// concat은 배열과 배열을 합쳐주는 함수
  				categoryList: state.categoryList.concat(action.value),
  			};
  		case 'SET_CURRENT_CATEGORY':
  			return {
  				...state,
  				currentCategoryId: action.value,
  			};
  		default:
  			throw new Error(`Unhandled action type: ${action.type}`);
  	}
  }
  

  // CategoryList.js
  useEffect(() => {
  	async function getCategoryList() {
  		const response = await axios.get('<http://52.78.77.73:8080/category>');
  		categoryDispatch({ type: 'SET_CATEGORY_LIST', value: response.data });
  	}
  	if (categoryList.length === 1) {
  		getCategoryList();
  	}
  }, [categoryList, categoryDispatch]);
  

13. 게시글 생성 페이지 렌더링될때 카테고리 api 호출하는데 값을 두번 받아와서 카테고리 값이 중복됨

• AddPost가 렌더링되기전에 CategoryList도 한번 렌더링되서 그런거였음
• 해결방법: AddPost에서는 카테고리 api를 호출하지 않는다.

14. Contents.js에서 tagList.map()을 실행하는데 오류 발생