[Mission4/김순요] - Project_Notion_VanillaJS #9
Conversation
…ion_VanillaJS into 3/#4_soonyo_working
KSoonYo
changed the title
| onDelete({ id }); | ||
| } | ||
| } else if (target.getAttribute("name") === "item-content") { | ||
| const id = $li?.dataset.id; |
There was a problem hiding this comment.
id를 if문 안에서 반복해서 변수로 설정하고 있으니 if문 밖에서 선언해주는 건 어떨까요?! 😊
| const id = $li?.dataset.id; | ||
| const selectedDocs = this.state.selectedDocs; | ||
|
|
||
| // subList toggle |
There was a problem hiding this comment.
함수에 대한 주석을 추가할때는
/**
*
*/
로 추가하는 것을 권장합니다.
그래야 ide에서 hover를 했을때 주석까지 출력이 되기 때문입니다
멘토님께서 이전 과제 때 주석은위와 같은 형식으로 다는 것을 권장한다고 하시더라구요! 😊 //대신 위와 같은 형태로 주석을 추가해주시면 좋을 것 같아요! :)
| onAdd: async ({ parent, title }) => { | ||
| await request("/documents", { | ||
| method: "POST", | ||
| body: JSON.stringify({ parent, title }), | ||
| }); | ||
| this.setState(); |
There was a problem hiding this comment.
실행해보니까 +버튼으로 새로운 글을 추가했을 때 추가한 글이 편집기에 바로 안 뜨더라구요!! 추가된 문서의 id를 받아서 해당 id의 주소로 이동해주면 좋을 것 같아요 😊
There was a problem hiding this comment.
새 문서 만들기 버튼도 같은 함수가 사용되고 있어서 편집기에 바로 뜨지 않고 있어요! 바로 이동되면 좋을 것 같아요 :)
| if (selectedDocs.has(id)) { | ||
| selectedDocs.delete(id); | ||
| } else { | ||
| selectedDocs.add(id); | ||
| } |
There was a problem hiding this comment.
저도 토글 부분을 구현하고 싶었는데 순요님 코드 보고 배워갑니다 :)
There was a problem hiding this comment.
토글 기능 너무 좋은 것 같아요👍
그런데 현재 모습에서는 하위 리스트가 있는지 알 수 없어서 나중에 토글 관련 화면이나 css를 추가해 주시면 더 좋을 것 같아요!
list style은 보통 css before content로 구현하는 것 같네요ㅎㅎ |
| const documents = await request("/documents"); | ||
| docsList.setState({ docs: documents }); |
There was a problem hiding this comment.
받는쪽에서도 state를 documents로 정의했으면 좋았을 것 같네요ㅎㅎ
|
|
||
| this.setMarkup = (docsList, hide = false) => { | ||
| const markup = ` | ||
| <ul class=${hide ? "hidden" : ""} > |
There was a problem hiding this comment.
<ul class="${hide ? "hidden" : ""}">
doublequote가 빠진 것 같네요
| <ul class=${hide ? "hidden" : ""} > | ||
| ${docsList | ||
| .map((doc) => { | ||
| return `<li class="item" data-id=${doc.id}> |
| <span name="item-content"> ${ | ||
| doc.title.trim() === "" ? "빈 제목" : doc.title | ||
| } </span> | ||
| <div data-group-id=${doc.id} class="button-group""> |
There was a problem hiding this comment.
전반적으로 따옴표가 많이 빠져있는 것 같은데, jsx가 아니기 때문에 마크업에 대한 체크가 필요해보입니다~!
| const id = selectedDoc?.id; | ||
| if (!id) { | ||
| this.state = { id: "new" }; | ||
| $ediotr.setState({ title: "", content: "" }); | ||
| } else { | ||
| this.state = selectedDoc; | ||
| const doc = await request(`/documents/${id}`); | ||
| $ediotr.setState(doc); | ||
| } |
There was a problem hiding this comment.
if else로 구성한다면 굳이 if (!id) 부터 시작하지 않아도 될 것 같습니다
if (id) else 로 작성하면 될 것 같네요~
| const res = await request("/documents", { | ||
| method: "POST", | ||
| body: JSON.stringify({ title, parent: null }), | ||
| }); | ||
| if (res) { | ||
| this.state = res; | ||
| push(`/documents/${this.state.id}`); | ||
| } else { | ||
| throw new Error("Post method failed"); | ||
| } |
There was a problem hiding this comment.
이부분은 res의 유무가 아닌 trycatch로 처리를 해야하지 않을까요?
| if (selectedDocs.has(id)) { | ||
| selectedDocs.delete(id); | ||
| } else { | ||
| selectedDocs.add(id); | ||
| } |
There was a problem hiding this comment.
토글 기능 너무 좋은 것 같아요👍
그런데 현재 모습에서는 하위 리스트가 있는지 알 수 없어서 나중에 토글 관련 화면이나 css를 추가해 주시면 더 좋을 것 같아요!
| }); | ||
| onChange(); | ||
| } | ||
| }, 1500); |
There was a problem hiding this comment.
처음 시작하는 화면에서 제목과 내용을 입력하면 새로운 페이지로 추가될 때 내용이 사라지는 현상이 있더라고요!
아마 처음에는 id가 new로 되어있어서 POST 날릴 때 제목만 넣어줘서 그런 것 같은데
제목 입력이 끝난 것을 감지해서 바로 POST를 한다거나 임시로 1.5초로 설정되어 있는 부분을 조금 짧게 설정해 주는 방법도 있을 것 같아요!
| <span> No documents </span> | ||
| <button name="add" > + 새 문서 만들기 </button> |
There was a problem hiding this comment.
같은 줄에 No documents와 새 문서 버튼이 출력돼서 span 태그 보다는 p 태그를 사용하거나 css를 통해 다른 줄로 만드는 게 조금 더 보기 좋을 것 같아요!
| onAdd: async ({ parent, title }) => { | ||
| await request("/documents", { | ||
| method: "POST", | ||
| body: JSON.stringify({ parent, title }), | ||
| }); | ||
| this.setState(); |
There was a problem hiding this comment.
새 문서 만들기 버튼도 같은 함수가 사용되고 있어서 편집기에 바로 뜨지 않고 있어요! 바로 이동되면 좋을 것 같아요 :)
| }, | ||
| }) | ||
| ); | ||
| }; |
There was a problem hiding this comment.
컴포넌트 폴더 안에 유틸 폴더가 있는건 무언가 네이밍과 맞지 않은것 같아요~!
| }; | ||
|
|
||
| $docsList.addEventListener("click", (e) => { | ||
| const { target } = e; |
There was a problem hiding this comment.
구조분해 할당은 매개변수 쪽에서 바로 하는것도 좋을것 같아요~!~!
({target} =>
| if (target.name === "add") { | ||
| this.setState({ selectedDocs: this.state.selectedDocs.add(id) }); | ||
| onAdd({ parent: id || null, title: tempTitle }); | ||
| } else if (target.name === "delete") { |
| if (res) { | ||
| this.state = res; | ||
| push(`/documents/${this.state.id}`); | ||
| } else { |
There was a problem hiding this comment.
try catch를 이용헤 res.ok가 아닐경우 에러를 발생시키는 방향도 좋을것 같아요~!
| @@ -0,0 +1,14 @@ | |||
| <!DOCTYPE html> | |||
| <html lang="en"> | |||
| id: null, | ||
| }; | ||
|
|
||
| const $ediotr = new EditorPage({ |
| import DocsList from "./DocsList.js"; | ||
|
|
||
| export default function DocsContainer({ $target }) { | ||
| const $docsContainer = document.createElement("aside"); |
There was a problem hiding this comment.
aside element는 처음 보는데, 순요님 덕분에 공부하고 지나갑니다~ :)
| export default function EditorContainer({ $target, onChange }) { | ||
| const $editorContainer = document.createElement("main"); | ||
| $editorContainer.className = "editor-container"; | ||
| $target.appendChild($editorContainer); |
📌 과제 설명
바닐라 JS로 노션 클로닝
👩💻 요구 사항과 구현 내용
기본 요구사항
추가 요구사항
✅ PR 포인트 & 궁금한 점
CSS를 전혀 신경쓰지 않고 기본 기능 구현에만 집중했더니 결과물이 많이 심심해졌습니다..
일단 기한 내로 한 곳까지 PR을 하고 추후에 추가 기능과 CSS 모두 지속적으로 업데이트 하겠습니다.
궁금한 점