[Mission5/홍창기] Project_Notion_VanillaJs 과제 #42

sscoderati · 2023-07-06T14:56:07Z

📌 과제 설명

Notion을 클론!! 해보는 프로젝트지만, 마감 직전에 살펴보니 조금 발전된 형태의 TodoList 같습니다...
배포는 했지만, 발견되거나 발견되지 않은 에러가 많은 듯 하네요..
https://sscoderati-notion-clone.netlify.app/

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

기본 요구 사항별 구현 상황

추가 구현 사항

실제 Notion처럼 Title을 에디터에서 편집하면 좌측 문서 목록의 편집 중인 문서의 Title이 같이 편집됩니다.
단일 Document 항목 좌측의 펼치기(>) 버튼을 클릭해서 1단계 depth의 하위 Document를 보이게 하거나, 감출 수 있습니다.
- 단, 하위 Document를 추가한 직후에 해당 기능을 사용하려고 하면, 동작하지 않습니다...
존재하지 않는 문서 Id로 접근하려고 하면 404 not found 대신 지정한 화면이 라우팅 됩니다.
- (ex: https://sscoderati-notion-clone.netlify.app/documents/12345)

✅ 피드백 반영사항

prettier formatting 적용
역할이 잘 드러나지 않는 함수 재명명
Component 클래스 상속 시 render() 메소드 호출 강제화
debounce 유틸함수 처리

✅ PR 포인트 & 궁금한 점

각 컴포넌트의 render 부에서 너무 많은 것들을 담당하고 있어서 외부 함수로 분리하고 싶은데, 상태 처리나 비동기 함수의 호출 관계가 복잡해져서 끝내 분리하지 못했습니다. 혹시 관련하여 참고하면서 공부할 만한 글이 있을까요..?

off-programmers

리스트를 넘어가는 경우도 있네요~

하위 레이어가 접히게 버튼을 눌러도 반응하지 않는 경우가 있네요~

리뷰 완료입니다~

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

.eslintrc.js

+        "browser": true,
+        "es2021": true
+    },
+    "extends": "eslint:recommended",


prettier 규칙도 같이 적용되게 해보시죠~

9ab6c73 적용 완료했습니다!

off-programmers · 2023-07-09T03:21:40Z

index.html

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


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

viewport의 개념과 content 속성에 들어갈 수 있는 width=device-width, initial-scale, minimum-scale, maximum-scale에 대해 알게 되어 적용하였습니다! 88855af 다음 과제부터는 기본적으로 적용해보겠습니다!

off-programmers · 2023-07-09T03:33:36Z

src/routes/PostChanger.js

@@ -0,0 +1,12 @@
+import { PostRouter } from "./PostRouter";
+
+export const PostChanger = (appEl) => {


메서드 이름에서 뭔가 어떤 역할이다라는게 딱 떠오르지는 않는것 같은데..이름을 바꿔주면 좋을것 같아요

9ab6c73 editorViewSwitcher로 이름 수정하였습니다!

off-programmers · 2023-07-09T03:33:52Z

src/routes/PostRouter.js

@@ -0,0 +1,12 @@
+import Editor from "../components/Editor";
+
+export const PostRouter = (appEl, introEl) => {


요기도 컴포넌트라기보다는 함수의 역할을 하고 있는것 같은데 함수 명명으로 넣는건 어떤가여?

9ab6c73 editorViewRouter로 명명하였습니다!

off-programmers · 2023-07-09T03:34:39Z

src/core/Component.js

+    this.render();
+  }
+  render() {
+    // 자식 클래스에서 Override


저번 리뷰때 남긴것처럼 자식 클래스에서 해당 메서드를 강제하고 싶으면 throw를 해주는게 좋아보여요

33a4387 적용해보았습니다!

off-programmers · 2023-07-09T03:38:25Z

src/components/DocumentItem.js

+      const res = request("", {
+        method: "POST",
+        body: JSON.stringify({
+          title: "제목 없음",
+          parent: `${this.state.id}`,
+        }),
+      });


요청을 보낼때 메서드나 직렬화를 컴퍼넌트 내에서 하지말고 별도 서비스를 만들어서 사용하는게 좋아보여요

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

src/api/DocumentAPI.js

@@ -0,0 +1,20 @@
+const API_END_POINT = "https://kdt-frontend.programmers.co.kr/documents";


전반적으로 폴더 명을 대문자로 지은것 같은데 컴포넌트 명이 아닌 파일들은 소문자로 짓는게 일반적인 규칙으로 적합할거같아요

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

src/components/Document.js

+      for (const key in docu) {
+        const { id, title, documents } = docu[key];
+        const parentDocu = new DocumentItem();
+        parentDocu.setState({ id, title, isFolded: true });
+        container.appendChild(parentDocu.el);
+        if (container.getAttribute("class") !== "container") {
+          parentDocu.el.setAttribute("style", "display: none");
+          parentDocu.el.setAttribute("class", "child");
+        }
+        if (documents.length !== 0) {
+          renderDocuments(parentDocu.el, documents);
+        }


for -in, for of 대신 map, forEach, reduce등의 메서드를 사용해보려고 노력해보세요

저도 노력해야겠습니다.

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

src/components/Document.js

+        if (container.getAttribute("class") !== "container") {
+          parentDocu.el.setAttribute("style", "display: none");
+          parentDocu.el.setAttribute("class", "child");


반복적으로 DOM API 를 사용한다면 element의 존재 여부도 확인이 되면 좋으니 utils/dom.js 경로에 classList contains를 확인하는 유틸이나 attribute를 지정하는 메서드를 선언해서 사용하시면 훨씬 코드도 간략해지고 반복적으로 쓰기도 좋을겁니다

off-programmers · 2023-07-09T03:42:06Z

src/components/Document.js

+    this.el.setAttribute("id", "document-app");
+    this.el.setAttribute("style", "background-color: rgb(251,251,250)");


스타일 지정은 클래스로 작성하시죠~

적용하기 어려운 구조인 것 같아서 css로 접근해보았습니다.. 6676c27 혹시 이런 구조에서 클래스로 스타일 적용을 하려면 어떻게 하는게 좋을까요?

doggopawer

창기님 코드 잘보고 오늘도 많이 배우고 갑니다!

doggopawer · 2023-07-10T06:41:08Z

src/app.js

+    window.addEventListener("404-not-found", () => {
+      // TODO: 404 페이지 렌더링
+      console.log("404 Not Found");
+    });


404 렌더링... 결국 하셨군요!!

앗 아직 하지는 않았는데... 구현하면 알려드리겠습니다! 지금은 없는 글을 불러오려고 하면 콘솔에 찍는 단계까지만 구현했어요😂

@doggopawer e894536 구현하였습니다!
(테스트 링크 : https://sscoderati-notion-clone.netlify.app/documents/12345)

doggopawer · 2023-07-10T06:42:42Z

src/components/Document.js

+      for (const key in docu) {
+        const { id, title, documents } = docu[key];
+        const parentDocu = new DocumentItem();
+        parentDocu.setState({ id, title, isFolded: true });
+        container.appendChild(parentDocu.el);
+        if (container.getAttribute("class") !== "container") {
+          parentDocu.el.setAttribute("style", "display: none");
+          parentDocu.el.setAttribute("class", "child");
+        }
+        if (documents.length !== 0) {
+          renderDocuments(parentDocu.el, documents);
+        }


저도 노력해야겠습니다.

doggopawer · 2023-07-10T06:45:19Z

src/components/Editor.js

+      const inputCategory = target.getAttribute("class");
+      if (timer !== null) {
+        clearTimeout(timer);
+      }
+      timer = setTimeout(() => {
+        const currentWriting = {
+          [inputCategory]: target.value,
+          updatedAt: new Date(),
+        };
+        setItem(this.state.id, currentWriting);
+        savePostOnServer(this.state.id, currentWriting);
+      }, 1000);


저도 동일한 부분에서 많이 부족한것 같습니다.

MinwooP

클래스형 컴포넌트로 구현된 코드를 보는 게 생각보다 어려워서 사실 어떻게 리뷰를 남겨야할까 고민이 많이 됐지만, 404 처리, 제목 수정 시 좌측 documentList에 바로 반영되는 기능, 반복되는 함수 유틸화 등 과제에 많은 공을 들이신 게 느껴지는 코드였습니다 ! 앞으로 다른 과제들이 나올 수록 창기님께 더 여쭤볼 게 많을 것 같네요 ㅎㅎㅎ 과제 너무 고생 많으셨고 앞으로도 화이팅합시다 💪🏻🤗

MinwooP · 2023-07-12T15:25:01Z

src/api/documentAPI.js

+    const { status } = res;
+    if (status === HTTP_STATUS_RESPONSE_OK) {
+      return res.json();
+    } else if (status === HTTP_STATUS_RESPONSE_NOT_FOUND) {


status 값에 따라서 분기처리,,, 꼼꼼하시네요 👍🏻

MinwooP · 2023-07-12T16:24:02Z

src/utils/debounce.js

@@ -0,0 +1,7 @@
+let timer = null;


저는 디바운스 유틸화 시키니까 동작을 잘 안하던데 ㅠ 창기님 코드 참고해봐야겠습니다 !

1g2g

창기님 과제 하시느라 고생 많으셨습니다✨
매사 열심히 하시고 또 잘 하셔서 저에게 많은 자극이 되는 것 같아요!
코드 보고 많이 배워갑니다~~👍

1g2g · 2023-07-16T13:25:33Z

src/core/Component.js

클래스형을 이용해 다른 컴포넌트들에서 'Component'를 상속받아 중복된 코드들을 처리할 수 있다는 점이 좋은 것 같습니다. 창기님께서 이번 과제는 함수형으로 구현한다고 하셨는데 어떻게 처리하셨을지 기대가 됩니다😊

1g2g · 2023-07-16T13:25:49Z

src/routes/NotFound.js

이런 부분에서 서비스 완성도가 높아지는 것 같습니다!👍

sscoderati added 23 commits June 28, 2023 14:01

Chore: 프로젝트 초기 설정

8b01036

Feat: App 컴포넌트 내 Document & Editor 컴포넌트 구성

04d982c

Refactor: Component.js에서 Store 클래스 분리

2be0640

Feat: API request

83f380f

Chore: Component export default 설정에 따른 변경

666cd5f

Feat: 간단한 에디터 뷰 추가

8124ac5

Feat: API Request 기반 Document 추가 및 삭제

bc1ceda

Feat: Root 문서에 하위 문서 생성, 삭제 및 전체 문서 목록 렌더링

3687fb3

Feat: 하위 문서 펼쳐서 보기 기능 추가

469b188

Comment: 주석 삭제

138e517

Refactor: Store 삭제

ddf8857

Refactor: Component 클래스 setState로 받은 상태가 기존의 상태를 포함하도록 변경

bdef348

Feat: 글의 정보를 담는 Post 클래스 추가

720c70f

Feat: Post 정보를 서버에서 불러오고(실패 시 로컬에서) 편집하면 로컬과 서버에 정보를 저장하는 Editor

8d8bff7

Feat: 각 문서 항목에 대해 라우팅 처리

1b9d677

Style: 추가된 요소에 대해 기초 Style 저장

fbf5f5b

Chore: gitignore 수정

73db6d1

!HOTFIX: 요구사항에 맞춰 url 수정

0ee4da9

Chore: package.json 원격 저장소 반영

c4572c7

Refactor: 펼치기 버튼 이벤트 핸들러 리팩토링

7b7eb79

!HOTFIX: LocalStorage에 해당 글에 대한 정보가 없으면 글 정보를 렌더링하지 못하는 이슈 해결

247dc9b

Refactor: Post 컴포넌트 삭제

0c903da

Feat: 내용이 없는 Document를 불러오는 경우, title과 content를 빈 값으로 초기화

fe96e7c

sscoderati added 오프팀 💧 순한맛 피드백 요청 과제 리뷰 요청 labels Jul 6, 2023

sscoderati requested a review from off-programmers July 6, 2023 14:56

sscoderati self-assigned this Jul 6, 2023

Feat: Netlify _redirects 설정

1af1c5d

sscoderati added 4 commits July 7, 2023 15:27

Refactor: 불필요한 console.log() 삭제

05e30d4

!HOTFIX: 문서의 제목이 없는 채로 저장되면 문서 선택이 불가능한 이슈 해결

1dabf3f

Refactor: main.js에서 api 요청부 분리

42a2ba2

Style: 버튼 간격 조정

f998bc2

sscoderati force-pushed the main branch from 7af8b27 to f998bc2 Compare July 8, 2023 10:37

sscoderati added 4 commits July 9, 2023 10:37

Feat: popstate 이벤트에도 라우팅 처리

aeb033a

!HOTFIX: title이나 content의 내용이 사라지는 문제 일부 수정

71e37ce

Refactor: 라우팅 처리부 app.js에서 분리

191fe34

Refactor: 불필요한 console.log 제거

13eae0f

off-programmers approved these changes Jul 9, 2023

View reviewed changes

wukdddang mentioned this pull request Jul 10, 2023

[Mission5/임지선] Project_Notion_VanillaJs 과제 #50

Open

doggopawer reviewed Jul 10, 2023

View reviewed changes

sscoderati added 8 commits July 11, 2023 17:02

Refactor: prettier 적용 및 PostChanger, PostRouter 이름 변경

9ab6c73

Refactor: 컴포넌트 클래스에서 render() 메소드 오버라이딩을 강제화

33a4387

Refactor: debounce 유틸함수화 및 Editor 컴포넌트에 적용, debounce 주기 매직넘버화

f5c65f7

Refactor: "docu", "Docu"를 "document", "Document"로 수정

2d55047

Feat: 404 Not Found 라우팅

e894536

Refactor: DocumentAPI -> documentAPI 이름 변경

ca0360c

Refactor: meta 태그 viewport 적용과 scale 관련 값 적용

88855af

Refactor: document-app 배경색 css로 접근

6676c27

MinwooP reviewed Jul 12, 2023

View reviewed changes

1g2g reviewed Jul 16, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Mission5/홍창기] Project_Notion_VanillaJs 과제 #42

[Mission5/홍창기] Project_Notion_VanillaJs 과제 #42

sscoderati commented Jul 6, 2023 •

edited

Loading

off-programmers left a comment

off-programmers Jul 9, 2023

sscoderati Jul 11, 2023

off-programmers Jul 9, 2023

sscoderati Jul 12, 2023

off-programmers Jul 9, 2023

sscoderati Jul 11, 2023

off-programmers Jul 9, 2023

sscoderati Jul 11, 2023

off-programmers Jul 9, 2023

sscoderati Jul 11, 2023

off-programmers Jul 9, 2023

off-programmers Jul 9, 2023

off-programmers Jul 9, 2023

doggopawer Jul 10, 2023

off-programmers Jul 9, 2023

off-programmers Jul 9, 2023

sscoderati Jul 12, 2023

doggopawer left a comment

doggopawer Jul 10, 2023

sscoderati Jul 11, 2023

sscoderati Jul 12, 2023

doggopawer Jul 10, 2023

doggopawer Jul 10, 2023

MinwooP left a comment

MinwooP Jul 12, 2023

MinwooP Jul 12, 2023

1g2g left a comment

1g2g Jul 16, 2023

1g2g Jul 16, 2023

		@@ -0,0 +1,12 @@
		import { PostRouter } from "./PostRouter";

		export const PostChanger = (appEl) => {

		@@ -0,0 +1,12 @@
		import Editor from "../components/Editor";

		export const PostRouter = (appEl, introEl) => {

		@@ -0,0 +1,20 @@
		const API_END_POINT = "https://kdt-frontend.programmers.co.kr/documents";

		this.el.setAttribute("id", "document-app");
		this.el.setAttribute("style", "background-color: rgb(251,251,250)");

[Mission5/홍창기] Project_Notion_VanillaJs 과제 #42

Are you sure you want to change the base?

[Mission5/홍창기] Project_Notion_VanillaJs 과제 #42

Conversation

sscoderati 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

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

MinwooP left a 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sscoderati commented Jul 6, 2023 •

edited

Loading