editor에서 계속 단어를 끊지 않고 타이핑할 때 줄바꿈이 되지 않고 상자가 늘어나는 문제 발견

그리고 에디터에 대한 CSS 작업을 해야 할 때는 reset.css에서 처리해주어야 했다. 각각이 class를 가지는 요소들로 세분화가 되어 있어서. 근데 왜 editor 뷰 컴포넌트 안에서는 class를 불러 오면 안 됐고 reset.css에서는 됐던 거지?

• 이론으로는 vue 컴포넌트 안에서는 nuxt이기 때문에 server side. 그래서 아직 에디터의 class가 나오지 않아 접근할 수 없다. 하지만 reset.css에서는 접근할 수 있다?

.ck-editor__editable {
  height: 30rem;
  width: 100%;
  word-wrap: break-word;
  word-break: break-word;
}

위처럼 처리했는데도 한 4글자 정도는 계속 늘어난다. 그에 맞춰서 텍스트 상자의 width도 늘어남.

.ck {
  width: 55rem;
}

→ 에디터의 너비가 제대로 정해지지 않아서 생긴 문제. 기존 에디터 툴바보다 큰 정도로만 너비를 유지시켜 해결

자식 에디터 컴포넌트에서 부모 컴포넌트로 데이터를 보내는 방식

<aside> 💡 부모 컴포넌트의 변경점에 따라 자식 컴포넌트의 데이터를 부모 컴포넌트로 가지고 와야 하는 상황일 때는 자식은 stateless로 관리하고, 부모의 state를 props로 내리고 자식에서 변경된 데이터를 emit하는 방식으로 사용한다.

</aside>

발행이나 임시저장 버튼을 누르면 제목, 내용, 태그, 썸네일까지 데이터를 모아서 서버에 보내주는 로직이고, 지금 에디터 내용 부분이 컴포넌트화 되어서 자식 컴포넌트로 되어 있는 상황.

이 때 내용 데이터도 자식 컴포넌트에서 v-model로 바인딩되어 있는데, 부모 컴포넌트에서 버튼을 눌렀을 때 자식에서 부모로 데이터를 보내줄 수 있는 마땅한 방법이 떠오르지 않았음.

생각했던 방식들과 이들을 선택하지 않았던 이유는 다음과 같다.

• 부모에서 props로 내려서 watch나 computed로 계속 감시하는 방법
  • 계속 데이터를 감시하는 게 퍼포먼스 상에 문제가 되지 않을까 염려
  • 자식에서 props를 바꿔줄 수 없다. 만약 객체로 prop이 왔다면 데이터를 바꿔줄 수는 있겠지만 그래도 바꿔주지 않는 것이 좋다.
• 부모에서 버튼을 눌렀을 때 자식에서 $emit을 통해 부모로 데이터를 보내는 방법
  • 부모에서 어떤 방법으로 자식에게 버튼이 눌렸다는 것을 보내줄 수 있을지 확신이 없음
  • 만약 버튼이 자식에게 있으면 좋은 방법이지만, 그렇지 않다면 사용할 수 없는 방식이다.
• vuex를 사용해 전역으로 내용 데이터를 관리하는 방법
  • 해당 데이터를 굳이 vuex를 사용하는 것이 괜찮은 방법인지 확신이 없음

결론(feat. 지섭님)