[Mission5/김다은] Project_Notion_VanillaJs 과제 #54
Conversation
| export const updateDocumentTitle= (onUpdate)=>{ | ||
| window.addEventListener(TITLE_UPDATE_EVENT_NAME, ()=>{ | ||
| onUpdate() | ||
| }) | ||
| } | ||
|
|
||
| export const update = ()=>{ | ||
| window.dispatchEvent(new CustomEvent('title-update',{ | ||
| })) | ||
| } |
| toggle: id => { | ||
| const getOpenedDocuments = getItem(OPENED_DOCUMENTS, []); | ||
| if (getOpenedDocuments.includes(id)) { | ||
| const removeOpenedDocuments = getOpenedDocuments.findIndex( | ||
| documentId => documentId === id, | ||
| ); | ||
| if (removeOpenedDocuments !== -1) | ||
| getOpenedDocuments.splice(removeOpenedDocuments, 1); | ||
| setItem(OPENED_DOCUMENTS, [...getOpenedDocuments]); | ||
| } else { | ||
| setItem(OPENED_DOCUMENTS, [...getOpenedDocuments, id]); | ||
| } | ||
| }, |
There was a problem hiding this comment.
toggle이 add랑 delete 부분이랑 중복되는 코드가 있는뎅 toggle로 한번에 처리하면 좋을꺼 같습니당 :)
| </ul>` | ||
| } | ||
| ).join("") | ||
| } |
There was a problem hiding this comment.
DocumentLists 컴포넌트의 렌더링 로직에서 그려야 할 HTML 템플릿을 따로 함수로 구현해주신 점 좋네요!
다만 파일이 src/components 디렉토리에 존재하고 있어서 이것이 컴포넌트라는 생각이 들 수도 있을 것 같아요!
사실 컴포넌트라기보다는 들어온 인자를 가지고 가공해서 문자열을 반환하는 순수 함수의 형태인 것 같아서
이 함수를 DocumentLists.js 파일 내부에 존재하도록 하거나 혹은 template/createList.js 같은 느낌으로 이사하는건 어떨까요?
| console.log(e.message) | ||
| push("/") | ||
| } | ||
| } |
There was a problem hiding this comment.
서버에 요청을 보내는 일반화된 함수 request 는 api.js 에 존재하고,
실제로 구체화된 요청을 보내는 함수는 request.js 에 존재하는 형태인 것 같습니다!
request 함수는 request.js 에 작성하고, 구체화된 요청을 하는 함수는 api.js 에 작성하는 형태가 더 좋지 않을지 궁금합니다!
There was a problem hiding this comment.
파일 이름이 requset.js 로 오타가 있었던 것 같습니다!
|
안녕하세요 다은님. 코드 잘 보고 배워갑니다!! |
삭제된 페이지라면 요청 시 HTTP code 404가 반환되고, 그에 따른 처리를 하는 것이 맞습니다. 그 방식을 우회해서 list를 전체를 다시 가져오는 것은 효율성 측면에서도 그렇고, 일반적이지 않은 접근 방식인 것 같습니다. ^^
토글된 상태를 저장해도 문제가 있는 것은 아닙니다. 어짜피 이미 유저에게 보여주고 있는 정보는 로컬스토리지에 저장해도 크게 다른 것은 없다고 볼 수 있겠죠~ 좀 더 좋은 방법은 (아마 현재 시점에서 서버 구현을 바꾸기는 어려울 것이므로 구현할 수 있을지는 모르겠지만) 토글이 되어있는지 여부를 서버 측에서 저장하고 있는 것이 아닐까 합니다. 그 이전에, 토글되었는지 여부를 저장하는 것이 좋은지에 대해 생각해 보면 좋을 것 같지만요. |
| $target.innerHTML = "" | ||
| if(pathname === "/"){ | ||
| documentPage.render() | ||
| }else if(pathname.indexOf("/documents/") === 0){ | ||
| const [,,documentId] = pathname.split("/") | ||
| documentPage.render() | ||
| editorpage.setState({documentId}) | ||
| }else{ | ||
| $target.innerHTML = "" | ||
| documentPage.render() | ||
| } |
There was a problem hiding this comment.
| $target.innerHTML = "" | |
| if(pathname === "/"){ | |
| documentPage.render() | |
| }else if(pathname.indexOf("/documents/") === 0){ | |
| const [,,documentId] = pathname.split("/") | |
| documentPage.render() | |
| editorpage.setState({documentId}) | |
| }else{ | |
| $target.innerHTML = "" | |
| documentPage.render() | |
| } | |
| $target.innerHTML = "" | |
| documentPage.render() | |
| if(pathname.indexOf("/documents/") === 0){ | |
| const [,,documentId] = pathname.split("/") | |
| editorpage.setState({documentId}) | |
| } |
공통된 부분이 많아 이렇게 줄여볼 수 있겠네요~
| return`<ul data-id="${id}"> | ||
| <div class="document__title"> | ||
| <span> | ||
| <button class="toggle__button">></button> |
There was a problem hiding this comment.
| <button class="toggle__button">></button> | |
| <button class="toggle__button">></button> |
HTML에서는 마크업 문제가 있을 수 있으니 > < 를 이용하길 권장합니다.
| $target : $page, | ||
| initialState :{ | ||
| title : "", | ||
| content :""}, |
| if(!init){ | ||
| $editor.innerHTML=` | ||
| <input class="title" style="width:800px;height:70px;" value="${this.state.title}"> | ||
| <textarea class="content" style="width:800px;height:500px;">${this.state.content}</textarea> |
| export default function Header({$target}){ | ||
| const $header = document.createElement("h2") | ||
| $header.innerHTML = "김다은의 Notion" | ||
| $target.appendChild($header) | ||
| } |
There was a problem hiding this comment.
처음에 Header 컴포넌트를 보고 <header>태그를 사용하신 컴포넌트로 이해했습니다.
위치는 <header> 태그를 이용했을때와 같겠지만 태그를 이용하는 편이 이해하기 좀 더 수월할 수도 있지 않을까요?
| export default function Footer({$target, onClick}){ | ||
| const $button = document.createElement("button") | ||
| $target.appendChild($button) | ||
| $button.textContent = "페이지 추가" | ||
| $button.className = "footer" | ||
|
|
||
| document.querySelector(".footer").addEventListener("click", (e)=>{ | ||
| onClick() | ||
| }) | ||
| } |
There was a problem hiding this comment.
Header와 같은 의미로 <footer> 태그를 이용하시는 편이 위치를 이해하기 좋을 것 같다는 생각이 듭니다.
베포 링크
👩💻 요구 사항과 구현 내용
✅ 피드백 반영사항
✅ PR 포인트 & 궁금한 점
뒤로가기를 눌렀을때 해당 url이 삭제된 페이지라면 api 호출 오류가 뜹니다. 이를 방지하고자 api get요청을 통해 전체 List를 다시 가져와 해당 id가 있는지 탐색한뒤 없을 경우 "/"페이지로 오류없이 넘어가고자 했습니다. 하지만 결국 api요청이 늘어나서..😭 제가 생각한 방법보다 더 좋은 방법이 없을까요?ㅎㅎ;; 아무래도 api요청이 적을수록 좋은거겠죠..?
List가 다시 렌더링 되어도 토글된 상태를 저장하고자 로컬스토리를 사용했습니다. 하지만 로컬스토리지는 사용자도 볼수있는 부분이라서 어떤 값이 들어가는게 옳은지? 유효한 것인지 구분이 잘 안갑니다. 로컬스토리지를 어디까지 사용하는것이 좋을까요..? 토글된 상태를 저장하고자 로컬 스토리를 사용하는것이 옳은 걸까용? 아니면 각 문서마다 토글된 상태를 가지고 있는 방법은 없을까용? 혹시 다른 좋은 방법이 있다면 알려주시면 감사하겠습니당!🧐