공밀레 님의 블로그

-테이블로 표현해 둔 목록에 있는 열의 수정을 선택하면 해당 부분의 데이터 값을 모달로 가져오는 기능이 필요하다. -수정을 눌렀을 경우의 함수에 다음을 추가한다. 이때 정보는 MainView.js에서 export default의 data()항목에 배열로 정의가 되어 있다.data(){ return { todoList: [ { id: 1, content: '테스트', manager: '김길동', status: '완료', dueDate: '2025-01-05', createdAt: '2025-01-02' }, { id: 2, content: '예제', manager: '이영희', status: '미완료', dueDate: ..

-버튼을 눌렀을 때 페이지가 이동되거나 팝업창이 뜨는 게 아닌 배경이 어두워지고 창이 하나 띄워지는 걸 본 적 있을 것이다. 그것이 vue에서는 modal모달이라 부른다. -등록 페이지를 이 모달을 이용해서 표출하기로 했다. 그런데 vue가 처음이기도 하고 지금 그냥 필요한 기능을 맨땅에 헤딩을 하면서 만드는 중이라 이해하는데 시간이 좀 오래 걸렸다. -먼저 모달을 띄울 기본 페이지를 만든다. 이 파일 명을 ModalView.vue라고 지정했다.  -overlay 클래스는 뒤에 오퍼시티 50퍼센트로 깔리는 그 까만 배경을 위해서 만들었다. 해당 부분을 누르면 꺼지도록 이벤트도 추가한다. -modal 클래스가 일종의 백..

-프로젝트 작성 중 어떠한 원리로 현재 메인 화면으로 잡고 있는 MainView.vue가 보여지는 건지 확인하고 싶었다. -main.js의 경우 다음과 같이 되어 있다.import { createApp } from 'vue'import App from './App.vue'import router from './router'createApp(App).use(router).mount('#app') router 를 이용해 App.vue를 이용해 앱을 생성한다는 거다. 그럼 App.vue에서 어떻게 부르는가.  원래 예시 코드라면 nav 태그가 있고 아래에는 하드코딩 style가 있다. 일단 나는 css를 파일로 따로 빼기 때문에 아래 처럼 import하는 식으로 변경했다. 그럼 여기서 부르는 건 무엇인가? ..

-node js가 설치가 되어 있어야지 vue js 설치가 가능하다. -vscode의 터미널을 오픈하여 npm install -g @vue/cli 입력 -얌전히 대기. 완료 문구 이후 vue create [프로젝트명] 입력. 그럼 프리셋을 선택하라고 뜬다. default 에서 선택. 나는 vue3부분을 선택해서 설치했다. 화살표로 이동하고 엔터를 누르면 선택된다. 다시 대기하면 프로젝트 생성이 완료된다.   - Vue의 경우 라우터를 따로 설치해 줘야 한다고 한다. 싱글 페이지 어플리케이션 제작 시 필수 항목이라는 듯 하다.  npm install vue-router@4 혹은 npm install vue-router 혹은 npm install vue-router@next --save 를 터미널에 입력한다..