[Vue] 노션 클론 프로젝트

제론·2022년 6월 13일
0

[Vue] 공부기록!

목록 보기
6/6
post-thumbnail

노션 클론 프로젝트

목표

  • 뷰를 통해 CRUD와 서버와의 통신을 능숙하게 하고 싶다.

뷰 노션 프로젝트

  • 프로젝트 시작 및 설치

$ 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

Eslint

-> vue.js 권장 사항 규칙에 맞게 검사하는 도구

라우터

  • hash 모드
    /#/~
  • history 모드 -> 조건이 추가됨
    ~
    라우터 옵션
  • scrollBehavior
    - 이전페이지의 스크롤을 저장 안하게 설정 가능

vite 경로 별정 설정

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요소 날리기위해!

업데이트한 내용을 반영하기 위해

  • 수정 후 blur 처리! -> oninput 실행

내용이 비워져있을 때 placeholder 적용

[contenteditable] {
    &:empty::before{
      content: attr(placeholder);
      color: lightgray;
    }
  }



profile
Software Developer

0개의 댓글