[Mission4/변건오] - Project_Notion_VanillaJS by guno517 · Pull Request #7 · prgrms-fe-devcourse/FEDC3-4_Project_Notion_VanillaJS

guno517 · 2022-11-16T14:17:35Z

📌 과제 설명

👩‍💻 요구 사항과 구현 내용

글 단위를 Document라고 합니다. Document는 Document 여러개를 포함할 수 있습니다.
화면 좌측에 Root Documents를 불러오는 API를 통해 루트 Documents를 렌더링합니다.
Root Document를 클릭하면 오른쪽 편집기 영역에 해당 Document의 Content를 렌더링합니다.
해당 Root Document에 하위 Document가 있는 경우, 해당 Document 아래에 트리 형태로 렌더링 합니다.
Document Tree에서 각 Document 우측에는 + 버튼이 있습니다. 해당 버튼을 클릭하면, 클릭한 Document의 하위 Document로 새 Document를 생성하고 편집화면으로 넘깁니다.
편집기에는 기본적으로 저장 버튼이 없습니다. Document Save API를 이용해 지속적으로 서버에 저장되도록 합니다.
History API를 이용해 SPA 형태로 만듭니다.
루트 URL 접속 시엔 별다른 편집기 선택이 안 된 상태입니다.
/documents/{documentId} 로 접속시, 해당 Document 의 content를 불러와 편집기에 로딩합니다.
기본적으로 편집기는 textarea 기반으로 단순한 텍스트 편집기로 시작하되, 여력이 되면 div와 contentEditable을 조합해서 좀 더 Rich한 에디터를 만들어봅니다.
편집기 최하단에는 현재 편집 중인 Document의 하위 Document 링크를 렌더링하도록 추가합니다.
편집기 내에서 다른 Document name을 적은 경우, 자동으로 해당 Document의 편집 페이지로 이동하는 링크를 거는 기능을 추가합니다.
그외 개선하거나 구현했으면 좋겠다는 부분이 있으면 적극적으로 구현해봅니다!

✅ 피드백 반영사항

✅ PR 포인트 & 궁금한 점

개발을 하면서 생각지도 못한 오류들이 발생하는데, 어떤 오류가 발생할지 미리 알아차리는 법이 있을까요?
현재 sidebar에서 list의 열림, 닫힘 상태를 LocalStorage에서 관리하고 있는데, 더 좋은 방법이 있을까요?
- ex) li 태그안에 isToggle같은 커스텀 상태를 만들어서 가져오고 변화를 줄 수 있는 방법이 있나요?
이번 과제를 bottom - up 방식으로 하다보니 최상단 App에서 상태관리를 하지 못하여서 top-down 방식으로 다시 노션클로닝을 하려하는데 top-down을 하면서 어떤 것을 기준으로 컴포넌트를 나누는게 좋을까요?
현업에서는 에러 처리를 어떻게 하나요? ex) 과제를 하면서 if문을 너무 많이 쓴 것 같은데 현업에서도 if문을 쓰나요? 아니면 다른 조건문으로 에러 처리를 하나요?
Document List들을 sidebar에서 보여줄 때, document의 자식이 있을 때, 재귀함수를 써서 보여주는 방식을 사용했는데 다른 방법이 더 있을까요?

kmww

안녕하세요 건오님!
첫번째 개인 프로젝트 고생 많으셨습니다.
요구 사항을 최대한 깔끔하게 구현하신것 같습니다😆
프로젝트 기간동안 건오님과 의견을 주고받은 덕분에
어려운 문제를 빠르게 해결할 수 있었습니다!

src/components/EditPage.js

index.css

src/App.js

src/components/NewDocBtn.js

ksh-jsx

건오님, 프로젝트 하시느라 고생많으셨습니다. 항상 디코방에서 활발히 소통해 주셔서 감사합니다 ㅎㅎ. 천천히 읽어보도록 하겠습니다!

ksh-jsx · 2022-11-20T02:47:27Z

src/components/Editor.js

+  $editor.innerHTML = `
+    <input type="text" name="title" style="width:600px" value="${this.state.title}" />
+    <textarea name="content" style="width:600px;height:400px;border:1px solid black; padding:8px;">${this.state.content}</textarea>
+    `;
+
+  this.render = () => {
+    $editor.querySelector("[name=title]").value = this.state.title;
+    $editor.querySelector("[name=title]").placeholder = "제목을 입력해주세요";
+    $editor.querySelector("[name=content]").value = this.state.content;
+    $editor.querySelector("[name=content]").placeholder = "내용을 입력해주세요";
+  };


이건 뭔가 신선한 방법이네요👍. setState후에 render가 도는 경우는 같은 역할 하는 것이 중복으로 선언되게 되는데, 이부분을 고쳐보면 더 좋지 않을까 생각합니다

src/App.js

jaekwanAHN

건오님 프로젝트 진행 하시느라 고생하셨습니다.
리뷰 진행하면서 저도 많이 배우고 갑니다!

src/App.js

src/components/ChildDocument.js

src/components/Editor.js

src/storage.js

src/components/DocList.js

src/components/EditPage.js

mxx-kor

안녕하세요 건오님! 벌써 팀이 바뀐다니 아쉽습니다..
이번 과제에서 고민을 많이 하신 것이 드러나는 것 같습니다. 리뷰하며 저도 많이 배워갑니다.
과제하시느라 수고 많으셨습니다~

src/storage.js

src/components/Sidebar.js

pers0n4

개발을 하면서 생각지도 못한 오류들이 발생하는데, 어떤 오류가 발생할지 미리 알아차리는 법이 있을까요?

이 부분은 테스팅의 영역에 더 가까운 부분으로 볼 수 있을 것 같은데요. 블랙 박스 기법, 화이트 박스 테스트 기법 등 다양한 방식과 기술이 있긴 하지만, 경험론적인 부분도 한 몫하는 편입니다. (소프트웨어 테스팅 이론에도 나오는 이야기에요.) 🤔

현재 sidebar에서 list의 열림, 닫힘 상태를 LocalStorage에서 관리하고 있는데, 더 좋은 방법이 있을까요?
ex) li 태그안에 isToggle같은 커스텀 상태를 만들어서 가져오고 변화를 줄 수 있는 방법이 있나요?

토글 값을 저장하고 있어야 한다면 localStorage도 마냥 나쁜 전략은 아닌 것 같습니다. 말씀하신 li 태그에 커스텀 상태를 만드는 접근법이 data 속성을 사용하는 방법입니다.

이번 과제를 bottom - up 방식으로 하다보니 최상단 App에서 상태관리를 하지 못하여서 top-down 방식으로 다시 노션클로닝을 하려하는데 top-down을 하면서 어떤 것을 기준으로 컴포넌트를 나누는게 좋을까요?

top down의 경우 추상화가 중요합니다. 먼저 큰 영역을 기준으로 분리를 해보세요. (헤더, 푸터, 사이드바, 메인, ...) 그 다음 헤더에는 버튼과 아이콘 등이 들어가야 하고, 메인을 구현할 때도 버튼과 아이콘이 들어가야 한다면 각 영역에 중복되는 요소들이 등장하게 되는데 이 경우 중복되는 요소를 컴포넌트로 뽑아내는 방식으로 잔행하면 됩니다.

현업에서는 에러 처리를 어떻게 하나요? ex) 과제를 하면서 if문을 너무 많이 쓴 것 같은데 현업에서도 if문을 쓰나요? 아니면 다른 조건문으로 에러 처리를 하나요?

조건문이라고 해도 if 아니면 switch죠. 조건문 자체가 많이 등장하는 것은 문제가 아닙니다. 문제라는 생각이 든다면(짧은 구간 내 너무 많은 조건문이 등장한다면) 조건 식을 재검증해본다거나, 함수로 분리하는 방식으로 줄여야 합니다.
예외 처리를 조건에 부합하지 않는 경우 Error(Exception)을 발생시키고 try..catch로 처리를 하거나, 반환형을 {data: ..., result: "fail"} 같은 형태로 규격화해서 처리하기도 하고 다양한 방식으로 처리할 수 있습니다.

Document List들을 sidebar에서 보여줄 때, document의 자식이 있을 때, 재귀함수를 써서 보여주는 방식을 사용했는데 다른 방법이 더 있을까요?

재귀함수면 단순히 반복문으로 대체할 수 있을테고, API에서 제공하는 데이터 형태에 따라 이벤트가 발생했을 때 해당하는 데이터를 찾아서 즉석으로 엘리먼트를 만들어주는 방식도 가능할 것 같습니다.

pers0n4 · 2022-11-23T12:41:38Z

index.css

+#close .toggleBtn {
+  transform: rotate(0deg)
+}
+
+#open .toggleBtn {
+  transform: rotate(90deg);
+}


id selector를 스타일에 활용하는 건 최대한 지양하는 편이 좋습니다. (재활용 불가)

그리고 id를 네이밍할 때는 가능하면 2개 이상의 단어를 조합해서 엘리먼트의 정체가 무엇인지 명확히 표현해주는 편이 좋을 것 같습니다. (e.g. modal-open, toggle-close, ...)

src/App.js

pers0n4 · 2022-11-23T13:42:46Z

src/components/EditPage.js

+
+export default function EditPage({ $target, initialState, getTitleChange }) {
+  const $editPage = document.createElement("div");
+  $editPage.className = "Edit-page";


여기도 클래스 네이밍 컨벤션이 혼자 다르네요.

pers0n4 · 2022-11-23T13:43:18Z

src/components/EditPage.js

+
+  this.state = initialState;
+
+  let postLocalSaveKey = `temp-post-${this.state.documents.id}`;


바뀌지 않는 변수라면 const로 선언해도 되지 않을까요?

pers0n4 · 2022-11-23T13:50:09Z

src/components/Sidebar.js

+
+  const $HomeButton = document.createElement("button");
+  $HomeButton.className = "home-button";
+  $HomeButton.innerHTML = "Notion 홈으로";


HTML을 입력하는 게 아니라면 textContent를 사용하셔도 됩니다.

pers0n4 · 2022-11-23T13:50:58Z

src/components/Sidebar.js

+      const documents = {
+        title: `제목 없음`,
+        parent: id,
+      };
+      const childDoc = await request(`/`, {
+        method: "POST",
+        body: JSON.stringify(documents),


단일 문서니까 documents보다는 document가 맞지 않을까요? 👀

documents로 데이터를 주고받다 보니 documents로 데이터를 넘겨야겠다고 생각했나봅니다..ㅎㅎ😅

pers0n4 · 2022-11-23T13:52:38Z

src/components/NewDocBtn.js

+export default function NewPostBtn({ $target, addPost }) {
+  const $newButton = document.createElement("div");
+  $newButton.className = "notion-newpage-button";
+  $newButton.role = "button";
+
+  $target.appendChild($newButton);
+
+  this.render = () => {
+    $newButton.innerHTML = `
+      <div class="notion-focusable" role="button">
+        <div class="new-wrapper">
+          <div class="new-plus-button">+</div>
+          <div>새 페이지</div>
+        </div>
+      </div>


NewPostButton도 좋지만, parameter를 통해서 text와 icon 등을 입력 받는다면 버튼 컴포넌트의 재사용성을 더 높일 수 있을 것 같습니다. (지금 당장 사용 범위를 확대할만한 부분이 없다면 일단은 이대로도 괜찮을 것 같아요.)

커피챗이랑 면담에서 말씀해주신 버튼에 대한 재사용성을 다시 복기하겠습니다

pers0n4 · 2022-11-23T13:59:26Z

src/components/Sidebar.js

@@ -0,0 +1,85 @@
+import PostList from "./DocList.js";


Nit: 특별한 일이 없다면(이름 충돌 문제 등) default import을 하는 경우엔 파일 이름이랑 동일하게 맞춰주시면 좋을 것 같습니다.

파일명을 알맞게 바꾸는데 import 부분을 신경 못 썼네요ㅠㅠ

guno517 added 24 commits November 9, 2022 00:07

Feat: Dummy Data 화면에 표시

9137d3a

Fix: Toggle undefined 오류 수정

31ce3c5

Fix: 하위 페이지 없음 표시

335fcb9

Fix: 자식 notion 추가시 화면에 바로 나오게 수정

5d469bd

Fix: 영역별 기능 분리

7c7bb5a

Feat: style 적용

b0c5baa

Feat: list 클릭 시 해당 editor로 이동

c3e550e

Feat: 초기 세팅

dbe0cd2

Feat: 제목 수정시 sidebar에 변경 사항 반영

a51a174

Feat: route 설정

493d6ad

Feat: sidebar css 적용

916b078

Refactor: 새 페이지 버튼 class 추가

77e4116

Refactor: class, id 네이밍 변경

2ad86e7

Feat: 하위 Document 링크 렌더링

eaa6dc8

Feat: editor css 적용

c31330c

Fix: editor 입력시 focus out 되는 현상 수정

71b4995

Feat: 하위 document 링크로 이동

95bbce3

Feat: API 설정

806ab5c

Refactor: placeholder 추가

0918aaa

Refactor: 코드 리펙토링

c19475a

Refactor: name change

e5996f0

Refactor: 안 쓰이는 코드 및 주석 삭제

187dcc1

Feat: list hover 시 배경색 변경

51b5628

Refactor: 파일명 변경

8f9af2c

guno517 added 과제 리뷰 요청 동영팀 피드백 요청 💧 순한맛 🔥 매운맛 labels Nov 16, 2022

guno517 requested a review from pers0n4 November 16, 2022 14:17

guno517 self-assigned this Nov 16, 2022

Fix: list child style 변경

b07372f

kmww reviewed Nov 19, 2022

View reviewed changes

src/components/EditPage.js Outdated Show resolved Hide resolved

index.css Show resolved Hide resolved

src/App.js Outdated Show resolved Hide resolved

src/components/NewDocBtn.js Show resolved Hide resolved

ksh-jsx reviewed Nov 20, 2022

View reviewed changes

jaekwanAHN reviewed Nov 20, 2022

View reviewed changes

mxx-kor reviewed Nov 20, 2022

View reviewed changes

src/storage.js Outdated Show resolved Hide resolved

src/components/Sidebar.js Outdated Show resolved Hide resolved

guno517 added 6 commits November 24, 2022 00:26

Refactor: 사용하지 않는 컴포넌트 삭제

448febb

Refactor: topBar 삭제

7004553

Refactor: title cursor pointer 추가

3439a7d

Fix: button role 중복 제거

b6df7bc

Refactor: 불필요한 코드 줄이기

10c48ca

Refactor: 불필요한 코드, 중복되는 코드 삭제

1f27fee

pers0n4 reviewed Nov 23, 2022

View reviewed changes

guno517 added 2 commits November 24, 2022 01:19

FIx: 불필요한 id select 함수 삭제

920aa1d

Refactor: 네이밍 컨벤션 및 파일명과 import 동일

cad66bc


		this.state = initialState;

		let postLocalSaveKey = `temp-post-${this.state.documents.id}`;

Conversation

guno517 commented Nov 16, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📌 과제 설명

👩‍💻 요구 사항과 구현 내용

✅ 피드백 반영사항

✅ PR 포인트 & 궁금한 점

Uh oh!

kmww left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ksh-jsx left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

jaekwanAHN left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mxx-kor left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

pers0n4 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

guno517 commented Nov 16, 2022 •

edited

Loading