[Mini Project] 프론트엔드 과제테스트로 만난 Note-App 구현 과정 정리 (2)

[Mini Project] Note-App

👩🏻‍💻 Github Repository https://github.com/sw2377/note-app

 

 

작업 기간 : 2024. 01. 09 ~ 2024. 01. 16

프론트엔드 채용 과제로 수행한 Note-App 구현 과정 (구현 중 에러사항 & 고민한 부분)을 정리한 글입니다.

 

🔗 시리즈 이어보기

Note-App 구현 과정 정리 (1)

현재글 : Note-App 구현 과정 정리 (2)

Note-App 구현 과정 정리 (3)

 

📖 목차

1. lexical text editor 사용하기
2. 헷갈렸던 부분 1, props type 정의 방법
3. 헷갈렸던 부분 2, JSX를 반환하지 않는 React component의 return null
4. 생각보다 어려웠던 자동저장 기능

 

1. lexical text editor 사용하기

요구사항에 사용하라고 언급되어 있었던 lexical text editor를 사용하는 것이 생각보다 어려웠다.

🔗 공식 홈페이지 : https://lexical.dev/

외부 자료도 별로 없고, 공식 홈페이지는 친절하지 않다는 느낌을 받았는데 아마 처음 사용해봐서 더욱 그런 느낌이 들었던 것 같다. 사실 이렇게 공식문서만 보고 사용하는게 거의 처음이라 익숙하지 않아 어렵게 느껴졌다. 여튼 lexical 사용법을 익히고, 원하는 기능을 구현하기 위해 시간을 정말 많이 보냈다.

 

첫 세팅은 공식문서의 🔗 React에서 세팅하는 방법을 참고해서 작성했고, 기본적인 사용법은 의도한대로 작동이 잘 되었다.

import {useState, useEffect} from 'react';

import {LexicalComposer} from '@lexical/react/LexicalComposer';
import {PlainTextPlugin} from '@lexical/react/LexicalPlainTextPlugin';
import {ContentEditable} from '@lexical/react/LexicalContentEditable';
import {HistoryPlugin} from '@lexical/react/LexicalHistoryPlugin';
import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';

const theme = {
  // Theme styling goes here
  paragraph: 'editor-paragraph',
}

const OnChangePlugin = ({ onChange }) => {
  const [editor] = useLexicalComposerContext();
  useEffect(() => {
    return editor.registerUpdateListener(({editorState}) => {
      onChange(editorState);
    });
  }, [editor, onChange]);
}

const Editor = () => {
  const [editorState, setEditorState] = useState(""); // 현재 에디터의 글이 저장

  function onChange(editorState) {
    const editorStateJSON = editorState.toJSON();
    setEditorState(JSON.stringify(editorStateJSON));
  }

  function onError(error) {
    console.log(error)
  }

  const initialConfig = {
    namespace: 'MyEditor',
    theme,
    onError,
  };
  
  return (
    <div className="editorWrapper">
      <LexicalComposer initialConfig={initialConfig}>
        <PlainTextPlugin
          contentEditable={<ContentEditable className='contentEditable' />}
          placeholder={<div className='placeholder'>Enter some text...</div>}
          ErrorBoundary={LexicalErrorBoundary}
        />
        <HistoryPlugin />
        <OnChangePlugin onChange={onChange} />
    </LexicalComposer>
    </div>
  )
}

export default Editor

 

처음에는 lexical Editor의 기본적인 사용법이 헷갈렸었는데, 계속 보다보니 어떤 방식인지 이해가 좀 되는듯했다.

커스텀 플러그인을 만들면 LexicalComposer 내에서 사용할 수 있고, 해당 플러그인 내에서 editor를 가져올 수 있다.

 

export function MyLexicalPlugin() {
  const [editor] = useLexicalComposerContext();
  console.log("editor: ", editor)
}

<LexicalComposer initialConfig={initialConfig}>
  // ...
  <MyLexicalPlugin>
</LexicalComposer>

 

1-1) lexical editor에서 initial state 가져오기

// Before
const initialEditorState = note.content

const initialConfig = {
  namespace: "MyEditor",
  theme,
  onError,
  editorState: initialEditorState
};

// ⬇︎ 변경 //

// After
// InitPlugin : note에 첫 진입시 초기값 세팅
export const InitPlugin = ({ note }) => {
  const [editor] = useLexicalComposerContext();

  useEffect(() => {
    const editorState = editor.parseEditorState(note.content);
    editor.setEditorState(editorState);
  }, [note, editor]);

  return null;
};

 

처음에는 initialConfig에 initialEditorState를 넣으면 초기값으로 들어온다고 해서 넣었었는데, 이렇게 하니 선택한 Note가 바뀌어도 에디터의 초기값이 변경되지 않는 문제가 발생했다. 🔗 https://lexical.dev/docs/concepts/editor-state 이 문서를 참고하면,

“Note that Lexical uses initialConfig.editorState only once (when it's being initialized) and passing different value later won't be reflected in editor. See "Update state" below for proper ways of updating editor state.”

“Lexical은 initialConfig.editorState를 한 번만 사용합니다(초기화될 때만 사용) 그 이후에는 다른 값 전달이 편집기에 반영되지 않습니다. 적절한 방법은 나중에 "상태 업데이트" 섹션에서 설명한 대로 편집기 상태를 업데이트하는 것입니다.”

 

이러한 부분이 있는데, 이 때문에 초기에 한번 사용된 초기값이 Note를 바꾸어도 새로운 노트의 값으로 들어오지 않는것 같았다. (페이지를 새로고침하면 선택한 노트의 내용이 들어왔다.)

그래서 initialEditorState 대신 InitPlugin을 만들어서 note에 첫 진입시 기존에 가지고 있던 note.content로 초기값을 세팅해주도록 하였더니 제대로 동작이 되었다.

 

1-2) lexical editor에서 Node 가져오기 (제목과 내용 구분)

1. DOM에서 가져오기

// DOM에서 가져오기 1
const CustomStylePlugin = () => {
  const [editor] = useLexicalComposerContext();

  editor.getEditorState().read(() => {
   editor.getRootElement()?.getElementsByTagName("span")[0].classList.add("editor-title");
   editor.getRootElement()?.getElementsByTagName("span")[1]?.classList.add("editor-desc");
  })
}

 

텍스트 에디터에 글을 입력하면 p태그 안의 span 태그로 들어간다. 그래서 처음에는 이렇게 editor에서 span 태그를 찾아 첫번째 span 요소는 제목으로, 두번째 span 요소는 내용으로 className을 지정하는 방식을 떠올렸었다. 내용을 구분한 이유는 NoteList에 내용이 들어가야 하기 때문이다.

 

 

// DOM에서 가져오기 2
const theme = {
  paragraph: 'editor-paragraph',
}

const paragraphElement = document.querySelector(".editor-paragraph");
const title = paragraphElement?.childNodes[0]?.textContent;

 

또는 이런 식으로 처음에 theme에서 설정한 p 태그의 className을 가지고 오는 방법도 있었다.

 

2. textNode를 가져오기 → 최종적으로 사용한 방법

하지만 결국 마지막으로 내가 사용한 방법은, editorState에서 textNode를 찾는 방법이었다. Lexical Editor는 Node로 이루어져 있기 때문에 Node를 찾는 방식으로 하니 좀 더 간편하게 첫 번째와 두 번째 textNode를 찾을 수 있었다.

// Editor.tsx
// editorState의 제목은 첫번째 textNode
const textNodes = Array.from(editorState._nodeMap.values()).find(
  node => node.__type === "text",
);
const titleNode = textNodes?.__text ?? null;
setTitleNode(titleNode);

// NoteList.tsx
// parsedEditorState의 내용은 index 1dml textNode
const textNode: string = parsedEditorState.root?.children[0].children.filter(
  (node: any) => node.type === "text",
)[1]?.text;

 

실제 사용은 titleNode는 Editor 컴포넌트에서, contentNode는 NoteList 컴포넌트에서 각각 따로 사용하였다.

 

📌 Array Method, filter와 find의 차이

위 textNode를 가져오기와 이어지는 내용인데, 제목을 가져올 때는 Array 메소드 중 find를, 내용을 가져올 때는 filter를 사용했다. 평소 배열의 요소를 찾을 때 find보다 filter를 더 자주 사용했었는데, find로도 배열의 요소를 찾을 수 있다.

// filter
// 배열의 요소 중에서 주어진 함수의 반환값이 true인 요소들로 이루어진 새로운 배열을 반환한다.
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evenNumbers = numbers.filter((number) => number % 2 === 0);
console.log(evenNumbers); // [2, 4, 6, 8, 10]

// find
// 검사를 위해 전달받은 함수를 만족하는 배열 요소의 첫번째 값을 반환한다. 
// 만족하는 값이 없으면 undefined를 반환한다.
const numbers = [1, 3, 5, 7, 2, 9, 11];
const firstEvenNumber = numbers.find((number) => number % 2 === 0);
console.log(firstEvenNumber); // 2

• filter는 배열의 요소에 제공된 함수를 적용하여, 함수가 true를 반환하는 경우 새 배열의 요소를 포함하며, 새로운 배열을 반환한다. 특정 조건을 충족하는 여러 요소를 검색해야 하는 경우 일반적으로 filter가 더 적합하다.
• find는 일치하는 첫 번째 요소를 찾을 때까지 배열을 반복한 다음 해당 요소를 반환한다. 일치 항목이 발견되면 반복을 중지하므로 단일 요소를 검색할 때 잠재적으로 더 효율적이다.

Big O 표기법의 관점에서 'filter'와 'find'는 모두 O(n)의 시간 복잡도를 갖는다고 한다. (n은 배열의 길이) 그러나 상수 요소와 실제 성능은 사용 사례에 따라 달라질 수 있다.

 

lexical 에디터를 사용하며 시간을 정말 많이 보냈다. 익숙하지 않고, 자료가 별로 없는 (있어도 전부 영어로 되어 있는) 새로운 도구를 사용하는게 어려웠지만 그래도 이번 기회를 통해 공식문서를 읽고, 사용법을 익히고, 타입 정의 파일을 찾아보며 어떠한 방식으로 코드를 읽고 사용법을 파악해서 실제로 나의 프로젝트에 적용하는지 조금이나마 알게되었고, 자신감이 생겼다. 다음번에 또 다른 라이브러리를 사용하게 된다면 프로젝트에 도입하는데 지금보다는 덜 헤맬 것 같다는 생각이 들었다.

 

---

 

레이아웃을 잡고 기능만 빠르게 구현하려 빠르게 만든 React + JavaScript 조합의 코드를 본래 초기에 만들었던 프로젝트로 옮기는 작업은 제출 이틀을 남기고 하기 시작했다. 레이아웃과 에디터를 포함한 대부분의 기능 구현이 임시 프로젝트에서는 완료된 상태였기 때문에 마음이 조금 편해졌다. 

코드를 옮기며 TypeScript로 포팅도 하고, styled components를 사용해 스타일링도 하였다. 기존에 구현에만 초점을 두어 엉망으로 작성했던 코드도 정리하고, 폴더 구조도 다시 짰다. 다시 짠 폴더구조가 적합한지는 사실 잘 모르겠지만.

Git에 commit도 자주 하면서 만들려고 했는데, 중간에 다른 파일에서 임시로 레이아웃을 짜며 커밋 로그가 꼬여버려서 약간 의미없게 되었다. 그래도 다시 프로젝트를 옮겨오면서는 커밋 로그를 잘 남기려고 해보았다. 물론 상상과는 다르게 중구남방이 되어버리긴 했지만.

 

---

2. 헷갈렸던 부분 1, props type 정의 방법

import { NoteType } from "../../type/notebookTypes";
import NoteEditor from "./Editor";

// const Note = ({ note }: NoteType) => { // ❌ 이렇게 작성하는 것이 아니라
const Note = ({ note }: { note: NoteType }) => { // ⭕️ 이런 식으로 작성을 해줘야 한다.
  return (
    <div className="note-item">
      <NoteEditor note={note} />
    </div>
  );
};

export default Note;

 

이건 사소하게 헷갈렸던 부분이다. 항상 props의 type을 위로 따로 빼서 정의하다 보니 문법이 헷갈려 잘못 작성했었다.

 

3. 헷갈렸던 부분 2, JSX를 반환하지 않는 React component의 return null

 

JavaScript로 작업시에는 아무런 에러가 없었는데, TypeScript로 작업을 하니 return 값이 없으니 에러가 났다. customPlugin으로 만든 OnChangePlugin과 InitPlugin은 JSX를 리턴하지 않기 때문에 return null으로 JSX를 반환하지 않음을 명시적으로 기입했다.

 

4. 생각보다 어려웠던 자동저장 기능

자동저장을 구현하라는 라는 요구사항이 있었는데, 이 부분을 작업하는데 생각보다 어려웠다. 로직을 생각하는 것보다 코드로 어떻게, 어떤 순서로 표현을 해야하는지 고민하는데 더 많은 시간이 걸렸던 것 같다.

save를 위한 함수는 이미 zustand store에 저장되어 있었고, 프로젝트를 하며 임시로 만들어둔 버튼을 클릭함으로써 저장기능을 사용했었기 때문에 함수에는 문제가 없었고, 단지 일정한 시간마다 함수를 호출하기만 하면 되었다. 생각했던 로직은 아래와 같았다.

 

1. 컴포넌트가 렌더링된다.

2. 상태 isModified는 초기값 false를 가진다.

3. editor에 사용자가 입력을 하면 isModified는 false가 된다. → 즉, 계속 입력하는 상태라면 isModified는 계속해서 false 상태이다.

4. editor에 사용자의 입력이 멈추고 3초 후 isModified는 true가 된다.

5. isModified가 true가 되면 auto save를 한다.

6. 컴포넌트가 리렌더링된다.

7. editorState가 변경될때마다 ②~⑥이 반복된다.

 

const Editor = ({ note }: { note: NoteType }) => {
  const { saveNote } = useStore();

  const [editorState, setEditorState] = useState(""); // JSON 형태로 저장된 editorState(현재 에디터의 글)
  const [isModified, setIsModified] = useState(false);

  // 1. editor에 사용자가 입력을 하면 isModified는 false
  const onChange = (editorState: EditorState) => {
	setIsModified(false);

	const editorStateJSON = editorState.toJSON();
	setEditorState(JSON.stringify(editorStateJSON));
	// ...
  };

  const onSave = () => {
    if (note.id && titleNode && editorState) {
      saveNote(note.id, titleNode, editorState);
    }
  };

  // 2. editor에 사용자의 입력이 멈추고 3초 후 isModified를 true로 설정
  useEffect(() => {
    const timeoutId = setTimeout(() => {
      setIsModified(true);
    }, 3000);

    return () => clearTimeout(timeoutId);
  }, [editorState]);

  // 3. isModified가 true가 되면 auto save
  useEffect(() => {
    if (isModified && titleNode !== "" && editorState !== "") {
      onSave();
    }
  }, [isModified]);

  return (
    <EditorWrapper className="note-item">
      {...}
    </EditorWrapper>
  );
};

 

이걸 구현하는데 거의 3시간은 걸린 것 같다.

onChange가 될때마다 자동저장을 위한 타이머가 생성되어야 하는데, 이를 위해 useEffect에 어떤걸 의존성 배열로 넣어야 하는지도 헷갈렸고, 그냥 전반적으로 어떻게 해야할지 어려웠던 것 같다.

결국 “change 되는 중에는 계속 isModified는 false여야 하고, change가 멈춘 후 3초 후에 isModified는 true가 된다.” 이걸 시작으로 로직을 생각해보기 시작했던 것 같다. 정말 돌고돌아 이것저것 시도해보고 구현된 기능이다.

 

⭐️

 

⬇️ 글이 길어져서 나누어 작성하였습니다. 다음 글 입니다. ⬇️

[Mini Project] 프론트엔드 과제테스트로 만난 Note-App 구현 과정 정리 (3)