[Mission5/박민우] Project_Notion_VanillaJs 과제 #35

MinwooP · 2023-07-06T14:46:48Z

📌 과제 설명

notion-clone.mp4

VanillaJS만을 이용해 노션 페이지를 클로닝했습니다.
선언형 프로그래밍 방식과 historyAPI를 이용해 함수형 컴포넌트와 SPA를 직접 구현했습니다.

🗒️컴포넌트 구조

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

기본 기능 구현

왼쪽 SideBar에서 document list를 보여줍니다.
최상단 + 버튼을 누르면 root document를 추가합니다.
document의 + 버튼을 누르면 하위 document를 추가합니다.
document의 x 버튼을 누르면 해당 document가 삭제됩니다.
document의 title을 클릭하면 해당 document의 title과 content가 오른쪽에 표시됩니다.
document의 title과 content 수정 시, 자동으로 저장됩니다.
history API를 이용해 SPA를 구현했습니다.

추가 기능 구현

페이지의 Notion 아이콘과 타이틀을 클릭하면, 메인 페이지로 이동합니다.
펼치기 버튼을 누르면, 문서를 펼치고 닫을 수 있고 이는 새로고침 시에도 유지됩니다.

✅ 피드백 반영사항

✅ PR 포인트 & 궁금한 점

eslint-config-prettier로 설정

- App.js, main.js 구현 - SideBar, EditPage 컴포넌트 생성 - 기본 css 설정 - util 함수 정의

- 더미데이터로 테스트

- 조회 후 좌측 SideBar에 렌더링

- spreadButton 클릭 시, 하위 document 펼치기 - title 클릭 시, 현재 선택된 document 변경 - + 버튼 클릭 시, 현재 document 내 하위 document 추가 - - 버튼 클릭 시, 현재 document 삭제

- 각 document 클릭, 생성, 삭제 시 url 변경 - url 변경 시, app의 selectedDocumentId 변경 후 route() 함수 호출을 통해 리렌더링 - 새로고침 시에도 버벅거림 없이 동작하도록, app의 initialState를 null이 아닌 현재 url의 pathname에 따라 설정

- 특정 document 삭제 시, document가 spreadList에 있다면 삭제 - 하위 document 생성 시, 현재 parent의 childDocumenList가 닫혀 있다면, 펼치기 - 메인 페이지에서는 editPage의 title이나 content 수정 못하도록 방지 - sideBar header의 icon, title 클릭 시, 메인 페이지로 이동 - 각 버튼 hover시, 색상 변경 - document의 title이 길어질 때, 버튼 크기 줄어드는 현상 해결

off-programmers

리뷰 완료입니다. 고생하셨습니다~

off-programmers · 2023-07-09T02:50:30Z

index.html

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />


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

넵 ! meta 태그를 이용한 검색 엔진 최적화를 위해 노력하겠습니다 ㅎㅎㅎ

off-programmers · 2023-07-09T02:52:25Z

package.json

@@ -0,0 +1,5 @@
+{


Live 서버로 앱을 실행해봤을때 처음 실행하면 api 404에러가 노출되는것 같은데요!
혹시 앱을 띄우는 별도 방법이 있다면 여기에 해당 라이브러리와 스크립트를 명시해주세요

package.json 파일의 scripts 항목에 다양한 명령어를 설정해두고 콘솔에서 실행할 수 있다는 사실을 처음 알았네요,,! 또 하나 배웁니다 ㅎㅎㅎ

off-programmers · 2023-07-09T02:54:14Z

src/App.js

+    initialState: [],
+    onAddRootDocument: async () => {
+      const createdRootDocument = await createDocumentAPI();
+      history.pushState(null, null, `/${createdRootDocument.id}`);


요런 pushState같은 api도 추상화 해서 사용하면 훨씬 반복 코드를 줄이고 직관적이게 읽히게 사용할 수 있겠네요

pushState, replaceState 같은 간단한 api라도 그 동작을 더 명확하게 나타내는 방향으로 추상화한다면 더 직관적이고 가독성이 좋아질 것 같습니다 ! 반영했습니다 👍🏻

off-programmers · 2023-07-09T02:55:31Z

src/Components/DocumentList.js

+      if (className === "spreadButton") {
+        toggleSpreadIcon(e.target);
+        toggleDisplay(documentItem.querySelector(".childDocumentList"));
+        toggleToSpreadDoucmentList(id.toString());
+      } else if (className === "addChildDocumentButton") {
+        onAddChildDocument(id);
+      } else if (className === "deleteDocumentButton") {


요런 문자열들은 상수화 시켜서 사용하시죠~

넵 반영했습니다 👍🏻

바...반영하셨나요?

off-programmers · 2023-07-09T02:56:07Z

src/Components/EditPage.js

+    if (this.state.selectedDocumentId) {
+      setTempDocumentToStorage(this.state.selectedDocumentId, {
+        title: e.target.value,
+        content: contentElement.value,
+        tempSaveDate: new Date(),
+      });
+
+      if (timerForTitle != null) {
+        clearTimeout(timerForTitle);
+      }
+      timerForTitle = setTimeout(async () => {
+        await modifyDocumentAPI(
+          this.state.selectedDocumentId,
+          e.target.value,
+          contentElement.value
+        );
+        removeTempDocumentFromStorage(this.state.selectedDocumentId);
+        updateSideBar();
+      }, 2000);


여기서 사용하려는 기법의 형태가 디바운스라고 부르는 유틸 함수일텐데요
자주 사용하는 함수이니 별도의 함수로 분리해서 하고자 하는 함수를 넘기는 형태로 사용해보세요
이렇게 구현을 하다보면 디바운스나 쓰로틀을 여러 파일에서 사용하고 싶을 때 매번 구현을 해야할거에요

2000같은 값들도 매직넘버이니 명확하게 상수 이름을 지어주시구요!
추가로 쓰로틀과의 차이점은 뭐가 있는지도 공부해보시면 좋을것 같습니다.

역시 이 부분은 다 똑같네요 ㅎㅎ

다같이 쓰로틀 공부합시다ㅎㅎ

디바운스 함수 유틸화 및 매직넘버 상수화 했습니다 ! 추가로 쓰로틀도 공부해봐야겠습니다 🥺

off-programmers · 2023-07-09T03:12:46Z

src/utils/dom.js

+    spreadDocumentList &&
+    spreadDocumentList.includes(document.id.toString())


요기도 유틸성 함수로 분리할 수 있겠네여

정말 중복은 나름 잘 분리했다고 해도 잘 안보이네요

자주 쓰이는 로직은 유틸성 함수로 만들어봐야겠습니다 👍🏻😊

off-programmers · 2023-07-09T03:13:19Z

src/utils/dom.js

+  return newElement;
+};
+
+export const createDocumentElement = (document, spreadDocumentList) => {


이 함수에서 엄청 많은 일을 하고 있는데 쪼개서 사용하는 형태로 진행해보시져

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

src/utils/strings.js

@@ -0,0 +1,8 @@
+export const MAIN_PAGE_TITLE = "노션 메인 페이지입니다  🥳";


오 전역적으로 활용되는 String 리터럴이나 그걸 만드는 함수를 이렇게 export 해서 쓰시는군요..! 대박입니다

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

src/utils/dom.js

+
+export const removeFromSpreadDoucmentList = (documentId) => {
+  const spreadDocumentList = getSpreadDocumentFromStorage();
+  if (spreadDocumentList && spreadDocumentList.includes(documentId)) {


요런 형태의 코드들이 많은데 nullish 병합 연산자 한번 검색해서 사용할 수 있는 케이스들을 살펴보시는건 어떤가여

off-programmers · 2023-07-09T03:16:03Z

src/utils/dom.js

+  if (spreadDocumentList && spreadDocumentList.includes(documentId)) {
+    const newList = spreadDocumentList.filter(
+      (spreadId) => spreadId !== documentId
+    );
+    setSpreadDocumentToStorage(newList);
+  } else {
+    if (spreadDocumentList) {
+      setSpreadDocumentToStorage([...spreadDocumentList, documentId]);
+    } else {
+      setSpreadDocumentToStorage([documentId]);


리스트를 만들어주고 마지막에 할당을 다같이 하는 방향으로 가면 코드가 깔끔해질수도 있을것 같아여

doggopawer

민우님 코드 잘 보고 갑니다. 이벤트 버블링 캡처링, CSS 상수화 등 배울게 많은 코드인것 같아요

doggopawer · 2023-07-10T07:07:39Z

.eslintrc.js

+  overrides: [
+    {
+      env: {
+        node: true,
+      },
+      files: [".eslintrc.{js,cjs}"],
+      parserOptions: {
+        sourceType: "script",


번들링이나 린트, 프리티어 설정 다음 과제 때는 제대로 파서 적용 해야겠습니다.
아! 이번주 저의 스터디 주제로 쓰면 되겠네요 ㅎㅎ

doggopawer · 2023-07-10T07:10:00Z

src/Components/DocumentList.js

+      if (className === "spreadButton") {
+        toggleSpreadIcon(e.target);
+        toggleDisplay(documentItem.querySelector(".childDocumentList"));
+        toggleToSpreadDoucmentList(id.toString());
+      } else if (className === "addChildDocumentButton") {
+        onAddChildDocument(id);
+      } else if (className === "deleteDocumentButton") {
+        onDeleteDocument(id);
+      } else {
+        onChangeSelectedDocumentId(id);


이벤트 버블링 캡쳐링 스터디 때 그 부분이군요~ 이거는 근데 진짜 도움이 많이 될것같아요 감사합니다.

doggopawer · 2023-07-10T07:10:35Z

src/Components/EditPage.js

+    if (this.state.selectedDocumentId) {
+      setTempDocumentToStorage(this.state.selectedDocumentId, {
+        title: e.target.value,
+        content: contentElement.value,
+        tempSaveDate: new Date(),
+      });
+
+      if (timerForTitle != null) {
+        clearTimeout(timerForTitle);
+      }
+      timerForTitle = setTimeout(async () => {
+        await modifyDocumentAPI(
+          this.state.selectedDocumentId,
+          e.target.value,
+          contentElement.value
+        );
+        removeTempDocumentFromStorage(this.state.selectedDocumentId);
+        updateSideBar();
+      }, 2000);


역시 이 부분은 다 똑같네요 ㅎㅎ

doggopawer · 2023-07-10T07:11:26Z

src/Components/EditPage.js

+        tempSaveDate: new Date(),
+      });
+
+      if (timerForContent != null) {


doggopawer · 2023-07-10T07:13:06Z

src/Components/EditPage.js

+        null
+      );
+
+      if (tempDocument && tempDocument.tempSaveDate > updatedAt) {


맞는 포인트인지는 잘 모르겠지만 저는 다음부터는 조건절은 웬만하면 다 상수화 시키려고 합니다. ㅎㅎ

src/utils/debounce.js

doggopawer · 2023-07-10T07:15:25Z

src/utils/dom.js

+    spreadDocumentList &&
+    spreadDocumentList.includes(document.id.toString())


정말 중복은 나름 잘 분리했다고 해도 잘 안보이네요

doggopawer · 2023-07-10T07:16:11Z

style.css

+:root {
+  --color-white: #ffffff;
+  --color-light-white: #fafafa;
+  --color-little-white: #cccccc;
+  --color-dark-white: #bdbdbd;
+  --color-dark-grey: #4d4d4d;
+  --color-grey: #616161;
+  --color-light-grey: #7c7979;
+  --color-black: #000000;
+  --color-green: #4fd374;
+  --color-red: #f97e7e;
+  --color-blue: #7e99f9;
+
+  --font-large: 48px;
+  --font-medium: 38px;
+  --font-regular: 24px;
+  --font-small: 18px;
+  --font-micro: 14px;
+
+  --weight-bold: 700;
+  --weight-semi-bold: 600;
+  --weight-regular: 500;
+
+  --size-border-radius: 4px;
+  --animation-duration: 250ms;
+}


CSS 이거 하자하자 해놓고 귀찮아서 시도 조차 안했는데 막상 이렇게 해놓으면 깔끔하고 좋네요

…evcourse/FEDC4-5_Project_Notion_VanillaJS into 4/#5_MinwooP_working

1g2g

민우님 과제 하느라 고생 많으셨습니다!
코드 정말 잘 짜셨습니다. 유틸성 함수를 잘 활용하시고, ellipsis 처리나 글씨체 같은 디테일들을 챙기시는 점에서 자극을 많이 받았습니다.
다음 과제도 열심히 달립시다😊

1g2g · 2023-07-11T04:59:48Z

src/App.js

+        history.pushState(null, null, `/`);
+      }
+
+      removeFromSpreadDoucmentList(documentId);


Doucment 오타 있습니당👀💡

오 원지님 예리하시네요..! 하지만 민우님은 결국
고치지 않으셨다고 합니다...

1g2g · 2023-07-11T05:01:15Z

src/Components/DocumentList.js

+  const documentListElement = createDomElementWithId(
+    "div",
+    "sideBar_documentList"
+  );


dom을 생성할 때 유틸성 함수를 사용하셨군요. 저도 잘 활용해야겠습니다👍

1g2g · 2023-07-11T05:24:18Z

src/Components/DocumentList.js

+      if (className === "spreadButton") {
+        toggleSpreadIcon(e.target);
+        toggleDisplay(documentItem.querySelector(".childDocumentList"));
+        toggleToSpreadDoucmentList(id.toString());


toggleToSpreadDoucmentList 함수 내에서 형변환을 하는 게 어떨까요? 아래 onAddChildDocument 함수에서는 id 값이 그대로 들어가는데 toggleToSpreadDoucmentList 함수에서는 id.toString()으로 넘기니까 왜 타입이 달라지는지 궁금해지네요✨

앗 그렇네요 서버에서 받은 document의 id값은 Number type인데, localStorage에 이를 저장하면 String으로 바뀌어서 타입을 다르게 해줬습니다. 원지님 말대로 toggleToSpreadDoucmentList 함수 내에서 형변환을 하는 게 더 좋을 것 같네요. 감사합니다 ㅎㅎㅎ

1g2g · 2023-07-11T05:25:29Z

src/Components/EditPage.js

+    if (this.state.selectedDocumentId) {
+      setTempDocumentToStorage(this.state.selectedDocumentId, {
+        title: e.target.value,
+        content: contentElement.value,
+        tempSaveDate: new Date(),
+      });
+
+      if (timerForTitle != null) {
+        clearTimeout(timerForTitle);
+      }
+      timerForTitle = setTimeout(async () => {
+        await modifyDocumentAPI(
+          this.state.selectedDocumentId,
+          e.target.value,
+          contentElement.value
+        );
+        removeTempDocumentFromStorage(this.state.selectedDocumentId);
+        updateSideBar();
+      }, 2000);


다같이 쓰로틀 공부합시다ㅎㅎ

sscoderati

민우님 완성도 높은 코드 잘 보았습니다! 나중에 배포까지 해주시면 또 놀러올게요!

sscoderati · 2023-08-03T05:35:40Z

src/App.js

+        history.pushState(null, null, `/`);
+      }
+
+      removeFromSpreadDoucmentList(documentId);


오 원지님 예리하시네요..! 하지만 민우님은 결국
고치지 않으셨다고 합니다...

sscoderati · 2023-08-03T05:43:11Z

src/App.js

+      await deleteDocumentAPI(documentId);
+      this.route();


Suggested change

await deleteDocumentAPI(documentId);

this.route();

deleteDocumentAPI(documentId).then(() => {

this.route();

});

이건 어떨까요?

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

src/Components/DocumentList.js

+      if (className === "spreadButton") {
+        toggleSpreadIcon(e.target);
+        toggleDisplay(documentItem.querySelector(".childDocumentList"));
+        toggleToSpreadDoucmentList(id.toString());
+      } else if (className === "addChildDocumentButton") {
+        onAddChildDocument(id);
+      } else if (className === "deleteDocumentButton") {


바...반영하셨나요?

sscoderati · 2023-08-03T05:57:36Z

src/utils/strings.js

@@ -0,0 +1,8 @@
+export const MAIN_PAGE_TITLE = "노션 메인 페이지입니다  🥳";


오 전역적으로 활용되는 String 리터럴이나 그걸 만드는 함수를 이렇게 export 해서 쓰시는군요..! 대박입니다

MinwooP added 14 commits June 30, 2023 15:39

Setting: ESLint 설정

44d7a0f

eslint-config-prettier로 설정

Feature: 기본 컴포넌트 생성 및 기본 css 설정

21c4329

- App.js, main.js 구현 - SideBar, EditPage 컴포넌트 생성 - 기본 css 설정 - util 함수 정의

Feature: 화면 좌측 SideBar에 documents 렌더링하기

e9717d2

- 더미데이터로 테스트

Feat: 전체 Document 조회 API 연결

ce340ef

- 조회 후 좌측 SideBar에 렌더링

Feature: document item 내 각 버튼 클릭 시 기능 구현

cacde87

- spreadButton 클릭 시, 하위 document 펼치기 - title 클릭 시, 현재 선택된 document 변경 - + 버튼 클릭 시, 현재 document 내 하위 document 추가 - - 버튼 클릭 시, 현재 document 삭제

Feature: Root document 추가 기능, 선택된 document EditPage에 뿌려주기 기능 구현

005bf45

Feature: localStorage 접근 함수 유틸화

ec14f45

Feature: document 관련 API 함수 유틸화

e080f75

Feature: 디바운스를 이용한 텍스트 자동저장 기능 구현

1ce1d8a

Feature: local Storage를 이용해 document 펼치기 상태 유지 기능 구현

5799164

Design: CSS 스타일링

6598a4c

Feature: 주석 제거 및 문자열 util화 및 함수명 변경

fabedf3

MinwooP added 오프팀 과제 리뷰 요청 labels Jul 6, 2023

MinwooP requested a review from off-programmers July 6, 2023 14:46

MinwooP self-assigned this Jul 6, 2023

Fix: node_modules 폴더 git 추적에서 제외

9c8489d

MinwooP added 🔥 매운맛 피드백 요청 labels Jul 6, 2023

Remove: eslint 관련 폴더 삭제

50bbf0b

off-programmers approved these changes Jul 9, 2023

View reviewed changes

doggopawer reviewed Jul 10, 2023

View reviewed changes

MinwooP added 2 commits July 10, 2023 17:20

Fix: node_modules 폴더 추적에서 제외

0c7848c

Merge branch '4/#5_MinwooP_working' of https://github.com/prgrms-fe-d…

c80aea6

…evcourse/FEDC4-5_Project_Notion_VanillaJS into 4/#5_MinwooP_working

1g2g reviewed Jul 11, 2023

View reviewed changes

sscoderati reviewed Aug 3, 2023

View reviewed changes

		spreadDocumentList &&
		spreadDocumentList.includes(document.id.toString())

		@@ -0,0 +1,8 @@
		export const MAIN_PAGE_TITLE = "노션 메인 페이지입니다 🥳";

[Mission5/박민우] Project_Notion_VanillaJs 과제 #35

Are you sure you want to change the base?

[Mission5/박민우] Project_Notion_VanillaJs 과제 #35

Conversation

MinwooP 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

MinwooP Jul 13, 2023 • 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

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

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

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

1g2g 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

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

MinwooP commented Jul 6, 2023 •

edited

Loading

MinwooP Jul 13, 2023 •

edited

Loading

1g2g left a comment •

edited

Loading