1. 구현하기

진행 상황

• CKEditor 추가
• 로그인, 회원가입, 질문등록 폼 submit 버튼 구현
• 로그인 폼 : 값이 비어있으면 로그인 버튼 비활성화 & 포커스 이동
• 회원가입 폼 : 알맞은 형식이 아니라면 회원가입 버튼 비활성화 & 포커스 이동
• 질문등록 폼 : 값이 비어있거나 요구 글자수 이하일 시 버튼 비활성화 & 포커스 이동

진행 예정

• 로그인 기능 : api 받아서 axios 수정, 로그인 유지
• 회원가입 기능 : api 받아서 axios 수정
• 질문등록 기능 : api 받아서 axios 수정, 질문목록에 업데이트

---

2. TIL

CKEditor5 입력 값 사용하기

CKEditor5 입력 값으로 조건 걸기

질문 등록 조건으로 텍스트 에디터에 20자 이상 쓰면 submit이 안되게끔 조건을 걸려고 했다. 하지만 CKEditor5로 입력한 값을 console로 찍어보니 p태그로 감싸진 채 값이 출력되었다. 그래서인지 length도 출력도 p태그를 포함한 채로 나왔다..

시도한 방법

구글링을 해보니 html-react-parser를 사용하면 브라우저에는 p 태그가 적용된 채로 보여지고, 값은 텍스트만 나온다고 하여 사용해봤지만 이번엔 객체 형식으로 반환되었다.
그래서 그 객체의 props의 children에 접근하여 내가 입력한 텍스트 값에 length 메서드를 써봤지만 입력한 값이 없을 때는 콘솔창에서 에러가 뜨는 것이 확인되었다.

• html-react-parser 설치 : npm install html-react-parser --save
• html-react-parser ipmort : import Parser from 'html-react-parser';

  const contentLength = Parser(content.content).length;
  if (contentLength < 20) {
    return;
  	}
  }

  const contentLength = Parser(content.content).props.children.length;
  if (contentLength < 20) {
    return;
  	}
  }

해결 방법

입력한 값이 없을 떄와 입력한 값이 20자 이하일 때의 조건을 다르게 접근하여 걸어야 겠다고 생각이 들어서 값이 없을 때 값이 있을 때를 4가지 방법으로 콘솔창에 찍어 보았다.
왼쪽은 값이 없을 때의 반환 값, 오른쪽은 값이 있을 때의 반환 값이다.

이걸 조합하여 값이 없을 때는 Parser.(content.content)로 접근하고, 값이 있을 때는 Parser.(content.content).props.children으로 접근하였더니 내가 원하던 대로 잘 작동하는 조건식이 완성되었다.

  const blankContent = Parser(content.content).length;
  if (blankContent === 0) {
    return;
  }
  if (blankContent !== 0) {
    const contentLength = Parser(content.content).props.children.length;
    if (contentLength < 20) {
      return;
    }
  }