[Mission5/정진경] Project_Notion_VanillaJs 과제 #52

jkea1 · 2023-07-06T15:12:32Z

📌 과제 설명

바닐라 JS만을 이용해 노션을 클로닝합니다.
기본적인 레이아웃은 노션과 같으며, 스타일링, 컬러값 등은 원하는대로 커스텀합니다.

글 단위를 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를 불러와 편집기에 로딩합니다.

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

화면 좌측에 Root Documents를 불러오는 API를 통해 루트 Documents를 렌더링합니다.
해당 Root Document에 하위 Document가 있는 경우, 해당 Document 아래에 트리 형태로 렌더링 합니다.
Document Tree에서 각 Document 우측에는 + 버튼이 있습니다. 해당 버튼을 클릭하면, 클릭한 Document의 하위 Document로 새 Document를 생성하고 편집화면으로 넘깁니다.
편집기에는 기본적으로 저장 버튼이 없습니다. Document Save API를 이용해 지속적으로 서버에 저장되도록 합니다.
History API를 이용해 SPA 형태로 만듭니다.
/documents/{documentId} 로 접속시, 해당 Document 의 content를 불러와 편집기에 로딩합니다.
편집기를 이용해 문서의 컨텐츠를 작성하고 서버에 저장되도록 합니다.
커스텀 하기

✅ 피드백 반영사항

✅ PR 포인트 & 궁금한 점

off-programmers

아직 덜 완성된것 같아서 작업이 완료되면 궁금한점 슬랙으로 직접 질문 남겨주세요! 화이팅입니다.

off-programmers · 2023-07-09T03:47:50Z

.eslintrc.json

@@ -0,0 +1,9 @@
+// .eslintrc.json


린트 규칙이 두개가 있는데 이유가 있나요?_?

off-programmers · 2023-07-09T03:48:08Z

index.html

+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">


meta 설정에 있어 어떤 값들이 들어갈 수 있는지 이참에 찾아보면 좋을것 같네요~

off-programmers · 2023-07-09T03:48:48Z

src/storage.js

+  }
+};
+
+// 넣을때는 JSON.stringify()로 직렬화해서 넣어야 한다.


요 파일에 있는 주석들은 제거되어도 좋을것 같아요~

off-programmers · 2023-07-09T03:49:17Z

src/router.js

+//url이 바꼈을때 감지하는 역할
+export const push = (nextUrl) => {
+  console.log('확인', nextUrl);
+  window.dispatchEvent(
+    new CustomEvent(ROUTE_CHANGE_EVENT_NAME, {
+      detail: {
+        // detail에 url을 저장한다.
+        nextUrl,


요기 console이랑 주석도 제거되어도 괜찮을것 같아요!

off-programmers · 2023-07-09T03:59:29Z

src/DocumentList.js

+        doc.documents &&
+        doc.documents
+          .map((childDoc) => {


nullish 병합 연산자 찾아보세요~

off-programmers · 2023-07-09T03:59:56Z

src/DocumentList.js

+      this.setState(updatedAllDocuments);
+    } else {
+      const { id } = clickedElement.dataset;
+      console.log(id);


요런 콘솔들은 제거해주세여~

off-programmers · 2023-07-09T04:00:20Z

src/DocumentList.js

+    if (clickedElement.className === 'addBtn' && clickedElement) {
+      const { id } = clickedElement.dataset;
+      await createNewDocument(id);
+      const undatedAllDocuments = await getAllDocuments();
+      this.setState(undatedAllDocuments);
+    } else if (clickedElement.className === 'deleteBtn') {
+      const { id } = clickedElement.dataset;
+      await deleteDocument(id);
+      const updatedAllDocuments = await getAllDocuments();
+      this.setState(updatedAllDocuments);
+    } else if (clickedElement.className === 'createNewRootDocBtn') {
+      await createNewDocument();


클래스 이름으로 분기를 태우는건 추후 변경에 너무 취약합니다
명확한 타입을 지정해주세여

doggopawer · 2023-07-10T07:29:30Z

진경 님 죄송합니다. 저번에 커밋 고치신줄 알았는데 아닌건가요?
코드리뷰를 달려고 FilesChanged에 들어갔는데 제 맥북이 못버티는것 같습니다 ㅠㅠ
깃헙은 트리 구조의 리스트를 어떻게 렌더링하는지 모르겠지만 깊이우선 탐색을 사용한다고 하면
O(E+V)의 위력은 엄청난것 같네요 😂

jkea1 · 2023-07-10T08:08:22Z

알려주셔서 해결했습니다! 감사합니다~ 이제 보기 편하실 겁니다! 2023년 7월 10일 (월) 오후 4:29, Kim Dong Hyun ***@***.***>님이 작성:

…

진경 님 죄송합니다. 저번에 커밋 고치신줄 알았는데 아닌건가요? 코드리뷰를 달려고 FilesChanged에 들어갔는데 제 맥북이 못버티는것 같습니다 ㅠㅠ 깃헙은 트리 구조의 리스트를 어떻게 렌더링하는지 모르겠지만 깊이우선 탐색을 사용한다고 하면 O(E+V)의 위력은 엄청난것 같네요 😂 — Reply to this email directly, view it on GitHub <#52 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AXWH263J37DIEANQCSSQG2TXPOVOLANCNFSM6AAAAAA2AST5DI> . You are receiving this because you were assigned.Message ID: <prgrms-fe-devcourse/FEDC4-5_Project_Notion_VanillaJS/pull/52/c1628393801@ github.com>

MinwooP

열심히 보고 리뷰를 써보긴 했으나 언제까지나 제 생각인 점 감안해주세요 ! 진경님 과제하시느라 엄청 고민하고 고생하신 거 제가 다 봤습니다 ㅠㅠ 정말 고생 많으셨어요 ㅠㅠㅠ 진경님도 느끼셨듯이 저도 이번 과제를 하면서 컴포넌트 구조와 각 컴포넌트에서 관리해줄 data들을 설계하고, 그 다음 구현에 들어가는 게 중요하다고 느꼈습니다 😢 나머지 기능들 구현하실 때에도 이런 부분 생각하시면서 하면 훨씬 수월할 것 같아요 !! 또 하시면서 헷갈리시거나 하는 거 있으시면 정말 언제든지 스터디룸 끌고 가셔도 됩니다 ㅎㅎㅎ 고생 너무 많으셨습니다 ~

MinwooP · 2023-07-10T15:56:10Z

src/router.js

+};
+
+export const updateDocumentTitle = (onUpdate) => {
+  window.addEventListener('title-update', () => {


ROUTE_CHANGE_EVENT_NAME 이벤트 name은 상수화해주셨는데, 여기서 'title-update'는 상수화가 안 되어있네요 😢 정신 없으셔서 미처 확인 못하신 것 같습니다 !

MinwooP · 2023-07-10T16:07:07Z

src/App.js

+  };
+
+  this.route();
+  initRouter(() => this.route());


url이 변경되야하는 상황일 때,

custom event 발생시키기

이벤트 리스너에서 이를 감지

pushState로 url 변경

App의 route() 함수에서 바뀐 url에 따라 컴포넌트 렌더링
=> 현재 이런 순서로 진행되는 것 같은데

custom event를 따로 발생시키지 않아도, 특정 컴포넌트에서 pushState()후에 App의 route() 함수만 실행시켜주시면

pushState()로 현재 url 변경

App의 route() 함수에서 바뀐 url에 따라 컴포넌트 렌더링
=> 이렇게 2단계로도 충분할 것 같습니다 ! 😊

MinwooP · 2023-07-10T16:40:46Z

src/DocumentsPage.js

+import DocumentEditComponent from './DocumentEditComponent.js';
+import { updateDocumentTitle } from './router.js';
+
+export default function DocumentsPage({ target }) {


DocumentsPage와 ListComponenet 모두 각각 우측, 좌측에 표시되는 각 component를 의미하는 것 같은데, 접미사 -Page와 -Component를 통일해주시면 가독성이 훨씬 좋을 것 같아요 ! 😊

MinwooP · 2023-07-10T16:41:49Z

src/api.js

+  }
+};
+
+export const createNewDocument = async (id = null) => {


유틸화 해놓으니 각 API 호출이 어떤 걸 의미하는 지 훨씬 명확한 것 같습니다 💡😗

doggopawer

진경님 ~ 코드 잘 보고 갑니다. 많은 도움은 드리지 못한것 같아 아쉽네요 ㅠㅠ

doggopawer · 2023-07-13T04:44:53Z

src/DocumentList.js

+      <div data-id="${doc.id}">${doc.title} ${doc.id}</div>
+      <button data-id="${doc.id}" class="deleteBtn">delete</button>
+      <button data-id="${doc.id}" class="addBtn">add</button>


비구조화 할당을 사용해 보는게 어떨까요?

doggopawer · 2023-07-13T04:49:03Z

src/DocumentList.js

+    const clickedElement = e.target;
+    if (clickedElement.className === 'addBtn' && clickedElement) {
+      const { id } = clickedElement.dataset;
+      await createNewDocument(id);
+      const undatedAllDocuments = await getAllDocuments();
+      this.setState(undatedAllDocuments);
+    } else if (clickedElement.className === 'deleteBtn') {
+      const { id } = clickedElement.dataset;
+      await deleteDocument(id);
+      const updatedAllDocuments = await getAllDocuments();
+      this.setState(updatedAllDocuments);
+    } else if (clickedElement.className === 'createNewRootDocBtn') {
+      await createNewDocument();


clickedElement가 있는지 먼저 확인해야하니까 차라리 clickedElement가 있는지 확인하는 조건절만 if로 가장 밖으로 빼는게 더 좋지 않을 까하는 생각입니다.

doggopawer · 2023-07-13T04:51:52Z

src/Editor.js

+    editor.querySelector('[name=title]').value = this.state.title;
+    editor.querySelector('[name=content]').value = this.state.content;


setState 바깥에서 변수로 빼주는게 가독성에 조금 더 좋지 않을까 생각해봅니다

sscoderati

진경님 노션 클론 과제 고생하셨습니다! 종종 코드 업데이트 해주세요! 놀러올게요!

sscoderati · 2023-08-03T04:46:53Z

settings.json

요거는 진경님의 개인 작업 환경과 관련된 설정 파일인 것 같아요!
이런 파일들은 보통 .gitignore에 등록하지 않을까 싶습니다..!

sscoderati · 2023-08-03T04:59:56Z

src/DocumentList.js

+    const clickedElement = e.target;
+    if (clickedElement.className === 'addBtn' && clickedElement) {
+      const { id } = clickedElement.dataset;
+      await createNewDocument(id);


createNewDocument는 async 함수여서 await을 사용하신 것 같은데, 결과값을 담아서 활용하고 계시지 않아서 await을 딱히 사용하지 않아도 될 것 같습니다!

sscoderati · 2023-08-03T05:06:45Z

src/DocumentList.js

+      this.setState(undatedAllDocuments);
+    } else if (clickedElement.className === 'deleteBtn') {
+      const { id } = clickedElement.dataset;
+      await deleteDocument(id);


위 createNewDocument와 비슷한 결의 함수인 것 같아서 원형을 살펴보고 왔는데요, 이 deleteDocument 함수 역시 따로 값을 반환하고 있지 않아서 await 키워드를 사용하지 않아도 될 것 같아요!

sscoderati · 2023-08-03T05:09:01Z

src/DocumentsPage.js

+  const fetchDocsList = async () => {
+    const docs = await request('/');
+  };
+


docs를 받아서 어디에 활용하고 있을까요?

sscoderati · 2023-08-03T05:12:07Z

src/DocumentsPage.js

+  this.render = async () => {
+    await fetchDocsList();
+    target.appendChild(page);
+  };


요 부분도 뭔가 이상합니다... 값을 반환하지 않는 fetchDocsList에 await 키워드가 적용되어있고, await을 사용하지 않는다면 굳이 async 함수일 필요가 없어보여요

sscoderati · 2023-08-03T05:18:25Z

src/ListComponent.js

+  updateDocumentTitle(async () => {
+    await fetchDocsList();
+  });


여기도 마찬가지로 await으로 받은 결과를 반환하거나 활용하고 있지 않아요!

sscoderati · 2023-08-03T05:19:38Z

src/ListComponent.js

+  this.render = async () => {
+    await fetchDocsList();
+    target.appendChild(page);
+  };


DocumentPage 컴포넌트에도 똑같은 함수가 있죠!

sscoderati · 2023-08-03T05:27:59Z

src/api.js

+export const deleteDocument = async (id) => {
+  await request(`/${id}`, {
+    method: 'DELETE',
+  });
+};
+
+export const putDocument = async (doc) => {
+  await request(`/${doc.id}`, {
+    method: 'PUT',
+    body: JSON.stringify({
+      title: doc.title,
+      content: doc.content,
+    }),
+  });
+};


request의 반환값을 활용하지 않는다면 await을 쓰지 않아도 되지 않을까요?

jkea1 added 4 commits July 2, 2023 21:07

Chore: eslint+prettier 설정

1b7ac08

editor 페이지 수정중

81b4a51

문서list 두번 렌더링 되는 문제 route단에서 해결

ba6d265

주석 정리

6a737af

jkea1 requested a review from off-programmers July 6, 2023 15:13

jkea1 self-assigned this Jul 6, 2023

jkea1 added 오프팀 🔥 매운맛 피드백 요청 과제 리뷰 요청 labels Jul 6, 2023

jkea1 changed the title ~~4/#5 jkea1 working~~ [Mission5/정진경] Project_Notion_VanillaJs 과제 Jul 6, 2023

jkea1 added 2 commits July 7, 2023 00:40

.gitignore 로 파일 정리

b9c911d

주석 정리

d09b997

off-programmers requested changes Jul 9, 2023

View reviewed changes

feat: 수정 기능 추가

f675c82

jkea1 force-pushed the 4/#5_jkea1_working branch from 50a52df to f675c82 Compare July 9, 2023 08:28

주석 정리

d8c2ff2

jkea1 added 6 commits July 10, 2023 16:40

node_modules 파일 정리

4d964c6

node_modules 파일 정리

e310c54

node_modules 파일 정리

cbf94b1

node_module 파일 지우기

2326874

node_module 정리

d9f86cc

gitignore 설정

7178f05

MinwooP reviewed Jul 10, 2023

View reviewed changes

doggopawer reviewed Jul 13, 2023

View reviewed changes

sscoderati reviewed Aug 3, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Mission5/정진경] Project_Notion_VanillaJs 과제 #52

[Mission5/정진경] Project_Notion_VanillaJs 과제 #52

jkea1 commented Jul 6, 2023 •

edited

Loading

off-programmers left a comment

off-programmers Jul 9, 2023

off-programmers Jul 9, 2023

off-programmers Jul 9, 2023

off-programmers Jul 9, 2023

off-programmers Jul 9, 2023

off-programmers Jul 9, 2023

off-programmers Jul 9, 2023

doggopawer commented Jul 10, 2023

jkea1 commented Jul 10, 2023 via email

MinwooP left a comment •

edited

Loading

MinwooP Jul 10, 2023

MinwooP Jul 10, 2023

MinwooP Jul 10, 2023

MinwooP Jul 10, 2023

doggopawer left a comment

doggopawer Jul 13, 2023

doggopawer Jul 13, 2023

doggopawer Jul 13, 2023

sscoderati left a comment

sscoderati Aug 3, 2023

sscoderati Aug 3, 2023

sscoderati Aug 3, 2023

sscoderati Aug 3, 2023

sscoderati Aug 3, 2023

sscoderati Aug 3, 2023

sscoderati Aug 3, 2023

sscoderati Aug 3, 2023

		editor.querySelector('[name=title]').value = this.state.title;
		editor.querySelector('[name=content]').value = this.state.content;

[Mission5/정진경] Project_Notion_VanillaJs 과제 #52

Are you sure you want to change the base?

[Mission5/정진경] Project_Notion_VanillaJs 과제 #52

Conversation

jkea1 commented Jul 6, 2023 • edited Loading

📌 과제 설명

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

✅ 피드백 반영사항

✅ PR 포인트 & 궁금한 점

off-programmers left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

doggopawer commented Jul 10, 2023

jkea1 commented Jul 10, 2023 via email

MinwooP left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

doggopawer left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sscoderati left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jkea1 commented Jul 6, 2023 •

edited

Loading

MinwooP left a comment •

edited

Loading