[Mission5/김지성] Project_Notion_VanillaJs 과제 #60
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
JunilHwang
requested changes
Jul 13, 2023
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Document</title> | ||
| <link rel="stylesheet" href="./src/styles/App.css"> | ||
| <script src="./src/main.js" type="module"></script> |
There was a problem hiding this comment.
이 script 태그가 head에 있는 것과 body에 있는 것
어떤 차이가 있을까요?
차이가 있다면 어떤 차이가,
차이가 없다면 왜 차이가 없는지?
Comment on lines
+3
to
+4
| const VITE_API_END_POINT = "https://kdt-frontend.programmers.co.kr"; | ||
| const VITE_USERNAME = "jisungkim"; |
Comment on lines
+14
to
+16
| if (res.ok) { | ||
| return await res.json(); | ||
| } |
Comment on lines
+8
to
+12
| ...options, | ||
| headers: { | ||
| "Content-Type": "application/json", | ||
| "x-username": `${VITE_USERNAME}`, | ||
| }, |
There was a problem hiding this comment.
options가 headers 속성을 가지고 있다고 가정해본다면, 여기서 headers를 덮어쓰게 되지 않을까요?
그렇다면 options의 headers와 여기 내부에 있는 headers를 같이 혼용해서 쓰고 싶다면 어떻게 해야 좋을까요?
| ...options, | ||
| headers: { | ||
| "Content-Type": "application/json", | ||
| "x-username": `${VITE_USERNAME}`, |
There was a problem hiding this comment.
여기서 바로 username을 넘겨주기보단, 바깥에서 username을 받아와서 넘겨주도록 해주면 어떨까요? 그래야 request가 더 범용적으로 쓰일 수 있을 것 같아요!
가령, 우리팀 모든 사람들의 문서를 가져오고 싶다면?
이라는 가정을 해보는거죠 ㅋㅋ
Comment on lines
+6
to
+7
| import DocumentHeader from "./DocumentHeader.js"; | ||
| import DocumentList from "./DocumentList.js"; |
There was a problem hiding this comment.
이 부분도 앞선 리뷰를 토대로 index.js 같은걸로 묶어줄 수 있을 것 같아요~
여기서 중요한게 components 내에서도 계층 구조를 가질 수 있지 않을까 고민해보면 좋답니다!
Comment on lines
+48
to
+53
| pageRender: async (id) => { | ||
| // api요청! | ||
| const nextState = await getDocument(id); | ||
| console.log(nextState); | ||
| // 데이터를 받아온다.!!! => 이 데이터를 이제 documentpage에 꽂아주면 돼! | ||
| }, |
Comment on lines
+21
to
+25
| this.render = async () => { | ||
| sideBar.render(); // home안에다가 넣고 | ||
| edit.render(); // home안에다가 넣고 | ||
| $target.appendChild($document); // home을 #app안에다가 넣는다. | ||
| }; |
There was a problem hiding this comment.
이러면 render를 할 때 마다 $target에 $document가 추가되지 않을까요?
Comment on lines
+3
to
+4
| import DocumentEdit from "../components/DocumentEdit.js"; | ||
| import DocumentSidebar from "../components/DocumentSidebar.js"; |
| @@ -0,0 +1,21 @@ | |||
| import DocumentEdit from "../components/DocumentEdit.js"; | |||
| import DocumentSidebar from "../components/DocumentSidebar.js"; | |||
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
📌 과제 설명
바닐라 JS만을 이용해 노션을 클로닝합니다.
기본적인 레이아웃은 노션과 같으며, 스타일링, 컬러값 등은 원하는대로 커스텀합니다.
✔️ 화면 좌측에 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를 불러와 편집기에 로딩합니다.
👩💻 요구 사항과 구현 내용
✅ 피드백 반영사항
✅ PR 포인트 & 궁금한 점