2024. 11. 15. 23:52ㆍ프로젝트
main.js 코드는 DOM요소를 진입하기위한 대문역할을 하기 때문에
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles/style.css" />
<title>Document</title>
</head>
<body>
<main id="app"></main>
<h1>123</h1>
<script type="module" src="src/main.js"></script>
</body>
</html>
여기 html 코드에서 DOM요소는 <main id="app"> 이 부분이기 때문에 여기에서 요소들이 만들어지고 삭제되고 합니다.
그래서 이요소를 메인으로 잡고 들어가야합니다.
main.js 파일에
const $app = document.querySelector('#app')
console.log($app)
이렇게 하고 서버를 돌려보면
예를들어 main.js에 이렇게 적고
const $app = document.querySelector('#app')
const $h1 = document.createElement('h1')
$h1.innerHTML = '안녕하세요'
$app.appendChild($h1)
실행을 하면
이런식으로 만들 수 있습니다.
그다음 src폴더에 구분을 하기위해 수정을 해줍니다.
src폴더안에 components폴더를 만들어줍니다.
또한 src 폴더에 App.js파일을 만들어줍니다.
main.js에서 넘겨주어App.js파일에서 만들어줍니다.
이런식으로 구조를 잡아가고
App.js파일에
export default function App() {}
작성하고
main.js 파일에서
import App from './App.js'
const $app = document.querySelector('#app')
new App({ $target: $app })이런식으로 넘겨주어
export default function App({$arget}) {
}App.js에서 받아와서 사용할 수 있습니다.
export default function App({ $target }) {
const $listContainer = document.createElement('div')
const $editorContainer = document.createElement('div')
}
이런식으로 App.js에서 리스트와 글작성 div를 만들어주고
target을 해주면
export default function App({ $target }) {
const $listContainer = document.createElement('div')
const $editorContainer = document.createElement('div')
$target.appendChild($editorContainer)
$target.appendChild($listContainer)
}
div가 두개 생긴걸 볼 수 있습니다.
각 Editor.js 파일과 Sidebar.js 파일에
export default function EditorPage() {}export default function SidebarPage() {}
해준다음 App.js에
import EditorPage from './components/EditorPage'
import SidebarPage from './components/SidebarPage'
export default function App({ $target }) {
const $listContainer = document.createElement('div')
const $editorContainer = document.createElement('div')
$target.appendChild($listContainer)
$target.appendChild($editorContainer)
const editorpage = new EditorPage({ $target: $listContainer })
const sidebarpage = new SidebarPage({ $target: $editorContainer })
}
이런식으로 new 를 통해 생성해주고 변수에 담고 target을 listContainer과 editorContainer로 설정해준다.
또 RDB(관계형 데이터베이스) 가 아닌 firebase처럼 Nosql처럼 계층형 관계처럼 더미데이터를 만들어줍니다.
우선적으로 기능을 먼저 만들어준후 api를 통해서 받아오게 하겠습니다.
import EditorPage from './components/EditorPage.js'
import SidebarPage from './components/SidebarPage.js'
export default function App({ $target }) {
const dummyData = [
{
id: 1,
title: '제목1',
documents: [
{
id: 2,
title: '제목2',
documents: [
{
id: 3,
title: '제목3',
documents: [],
},
],
},
],
},
{
id: 4,
title: '제목4',
documents: [],
},
]
const $listContainer = document.createElement('div')
const $editorContainer = document.createElement('div')
$target.appendChild($editorContainer)
$target.appendChild($listContainer)
const sidebarpage = new SidebarPage({ $target: $editorContainer,})
const editorpage = new EditorPage({ $target: $listContainer })
}그다음 Sidebarpage변수에 intialState (데이터가 어떤식으로 가지고 있는지)로 dummyData를 넘겨주겠습니다.
const sidebarpage = new SidebarPage({
$target: $editorContainer,
initalState: dummyData,
})
Sidebarpage.js에 initalState값이 잘 넘어갔나 확인하겠습니다.
export default function SidebarPage({ $target, initalState }) {
const $page = document.createElement('div')
console.log(initalState)
$page.innerHTML = 'sidebar'
$target.appendChild($page)
}
잘넘어오는걸 확인할 수 있습니다.
'프로젝트' 카테고리의 다른 글
| 노션 (자바스크립트) 클론 코딩 (4) EditorPage - css수정 및 NewButton 만들기 (0) | 2024.11.16 |
|---|---|
| 노션 (자바스크립트) 클론 코딩 (3) 디자인 수정 (4) | 2024.11.16 |
| 노션 (자바스크립트) 클론 코딩 (1) vscode 기본 세팅 (3) | 2024.11.15 |
| 프로젝트 (2024-05-10~2024-05-21) 틱톡 AR 필터 모집 공고 (2) (0) | 2024.05.29 |
| 프로젝트 (2024-05-10~2024-05-21) 틱톡 AR 필터 모집 공고 (0) | 2024.05.21 |