$ npm create vite@latest notion-project
$ npm install vue-router pinia
// pinia -> store
$ npm i -D eslint eslint-plugin-vue sass
-> url에 워크스페이스 id가 뜸(주소)
-> 워크스페이스의 깊이
-> 하위 워크스페이스가 없을 때 없다고 뜨기
-> 새로고침해도 워크스페이스 내용변화X(서버)
-> vue-router
-> vue.js 권장 사항 규칙에 맞게 검사하는 도구
export default defineConfig({
plugins: [vue()],
resolve: {
alias: [{ find: '~', replacement: `${__dirname}/src` }]
}
})
readWorkspace 함수 정의 -> 서버에 있는 데이터 가져오는 함수
가져온 데이터는 store 안에 data에 저장 -> this.workspaces = workspace
LeftNavBar 컴포넌트 생성 -> 노션 왼쪽 바 (페이지들 나오는 부분)
store에 있는 데이터 사용
1. Import {mapStores} from ‘pinia’ / import {store} from ‘’
2. Computed: {…mapStores(srore)}
router -> 라우츠 제어하는 명령들
routes -> 정보
Update
-> contenteditable
-> input 태그 단점 글씨를 쓰면 잘림
제목에서 줄바꿈X 하려고 할 때 input요소 일 때(양식요소)
-> 내용을 가져오기 위해 text content => div를 날리고 내용만 가져옴
줄바꿈 내용까지 가져올 때
-> html 요소를 알아야함! -> innerHTML
-> 줄이 바뀌면 저절로 div요소로 만들어짐 -> div요소 날리기위해!
업데이트한 내용을 반영하기 위해
내용이 비워져있을 때 placeholder 적용
[contenteditable] { &:empty::before{ content: attr(placeholder); color: lightgray; } }