24-02-02-fri. vue.js - Githubissues

2sjdeveloper commented 8 months ago

1교시

전체 하나의 페이지를 컴포넌트화 해서 만들어보기. 공통의 부분은 하나의 컴포넌트로 빼서 작업하기.
board-project 만들기

명령프롬프트

Microsoft Windows [Version 10.0.19045.3930]
(c) Microsoft Corporation. All rights reserved.

C:\Users\admin>d:

D:\>cd git

D:\git>cd ..

D:\>cd DEV

D:\Dev>cd vue-workspace

D:\Dev\vue-workspace>cd vue-project

D:\Dev\vue-workspace\vue-project>npm run serve

> vue-project@0.1.0 serve
> vue-cli-service serve

 INFO  Starting development server...

 DONE  Compiled successfully in 5418ms                                                                      오전 9:13:12

  App running at:
  - Local:   http://localhost:8081/
  - Network: http://192.168.0.33:8081/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

일괄 작업을 끝내시겠습니까 (Y/N)? y

D:\Dev\vue-workspace\vue-project>cd ..

D:\Dev\vue-workspace>dir
 D 드라이브의 볼륨에는 이름이 없습니다.
 볼륨 일련 번호: 3817-1070

 D:\Dev\vue-workspace 디렉터리

2024-02-01  오전 10:46    <DIR>          .
2024-02-01  오전 10:46    <DIR>          ..
2024-02-01  오전 10:46    <DIR>          node_modules
2024-02-01  오전 10:46            45,899 package-lock.json
2024-02-01  오전 10:46                70 package.json
2024-02-02  오전 09:01    <DIR>          vue-project
2024-02-01  오전 10:20    <DIR>          vue-project-manually
2024-02-01  오전 10:40    <DIR>          vue-ui
               2개 파일              45,969 바이트
               6개 디렉터리  997,002,186,752 바이트 남음

D:\Dev\vue-workspace>vue create board-project

Vue CLI v5.0.8
? Please pick a preset: vue basic ([Vue 3] babel, router, eslint)

Vue CLI v5.0.8
✨  Creating project in D:\Dev\vue-workspace\board-project.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

npm ERR! code ECONNRESET
npm ERR! syscall read
npm ERR! errno -4077
npm ERR! network read ECONNRESET
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly.  See: 'npm help config'

npm ERR! A complete log of this run can be found in: C:\Users\admin\AppData\Local\npm-cache\_logs\2024-02-02T00_20_43_170Z-debug-0.log
 ERROR  Error: command failed: npm install --loglevel error --legacy-peer-deps
Error: command failed: npm install --loglevel error --legacy-peer-deps
    at ChildProcess.<anonymous> (C:\Users\admin\AppData\Roaming\npm\node_modules\@vue\cli\lib\util\executeCommand.js:138:16)
    at ChildProcess.emit (node:events:518:28)
    at cp.emit (C:\Users\admin\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\cross-spawn\lib\enoent.js:34:29)
    at maybeClose (node:internal/child_process:1105:16)
    at ChildProcess._handle.onexit (node:internal/child_process:305:5)

D:\Dev\vue-workspace>dir
 D 드라이브의 볼륨에는 이름이 없습니다.
 볼륨 일련 번호: 3817-1070

 D:\Dev\vue-workspace 디렉터리

2024-02-02  오전 09:20    <DIR>          .
2024-02-02  오전 09:20    <DIR>          ..
2024-02-02  오전 09:21    <DIR>          board-project
2024-02-01  오전 10:46    <DIR>          node_modules
2024-02-01  오전 10:46            45,899 package-lock.json
2024-02-01  오전 10:46                70 package.json
2024-02-02  오전 09:01    <DIR>          vue-project
2024-02-01  오전 10:20    <DIR>          vue-project-manually
2024-02-01  오전 10:40    <DIR>          vue-ui
               2개 파일              45,969 바이트
               7개 디렉터리  996,863,483,904 바이트 남음

D:\Dev\vue-workspace>cd board-project

D:\Dev\vue-workspace\board-project>dir
 D 드라이브의 볼륨에는 이름이 없습니다.
 볼륨 일련 번호: 3817-1070

 D:\Dev\vue-workspace\board-project 디렉터리

2024-02-02  오전 09:21    <DIR>          .
2024-02-02  오전 09:21    <DIR>          ..
2024-02-02  오전 09:21    <DIR>          node_modules
2024-02-02  오전 09:20               250 package.json
               1개 파일                 250 바이트
               3개 디렉터리  996,863,483,904 바이트 남음

D:\Dev\vue-workspace\board-project>cd ..

D:\Dev\vue-workspace>delete board-project
'delete'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는
배치 파일이 아닙니다.

D:\Dev\vue-workspace>del board-project
D:\Dev\vue-workspace\board-project\*, 계속하시겠습니까(Y/N)? y

D:\Dev\vue-workspace>vue create board-project

Vue CLI v5.0.8
? Target directory D:\Dev\vue-workspace\board-project already exists. Pick an action: Overwrite

Removing D:\Dev\vue-workspace\board-project...

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? No

Vue CLI v5.0.8
✨  Creating project in D:\Dev\vue-workspace\board-project.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

npm ERR! code ECONNRESET
npm ERR! syscall read
npm ERR! errno -4077
npm ERR! network read ECONNRESET
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly.  See: 'npm help config'

npm ERR! A complete log of this run can be found in: C:\Users\admin\AppData\Local\npm-cache\_logs\2024-02-02T00_23_30_674Z-debug-0.log
 ERROR  Error: command failed: npm install --loglevel error --legacy-peer-deps
Error: command failed: npm install --loglevel error --legacy-peer-deps
    at ChildProcess.<anonymous> (C:\Users\admin\AppData\Roaming\npm\node_modules\@vue\cli\lib\util\executeCommand.js:138:16)
    at ChildProcess.emit (node:events:518:28)
    at cp.emit (C:\Users\admin\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\cross-spawn\lib\enoent.js:34:29)
    at maybeClose (node:internal/child_process:1105:16)
    at ChildProcess._handle.onexit (node:internal/child_process:305:5)

D:\Dev\vue-workspace>vue create board-project

Vue CLI v5.0.8
? Please pick a preset: Default ([Vue 3] babel, eslint)

Vue CLI v5.0.8
✨  Creating project in D:\Dev\vue-workspace\board-project.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

added 874 packages, and audited 875 packages in 10s

98 packages are looking for funding
  run `npm fund` for details

4 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
🚀  Invoking generators...
📦  Installing additional dependencies...

added 95 packages, and audited 970 packages in 4s

110 packages are looking for funding
  run `npm fund` for details

4 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project board-project.
👉  Get started with the following commands:

 $ cd board-project
 $ npm run serve

D:\Dev\vue-workspace>vue add router

📦  Installing @vue/cli-plugin-router...

up to date, audited 115 packages in 511ms

20 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
✔  Successfully installed plugin: @vue/cli-plugin-router

? Use history mode for router? (Requires proper server setup for index fallback in production) Yes

🚀  Invoking generator for @vue/cli-plugin-router...
 ERROR  Error: Cannot find module '@vue/cli-service/generator/template/src/App.vue' from 'D:\Dev\vue-workspace\node_modules\@vue\cli-plugin-router\generator\template\src'
Error: Cannot find module '@vue/cli-service/generator/template/src/App.vue' from 'D:\Dev\vue-workspace\node_modules\@vue\cli-plugin-router\generator\template\src'
    at Function.resolveSync [as sync] (C:\Users\admin\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\resolve\lib\sync.js:111:15)
    at renderFile (C:\Users\admin\AppData\Roaming\npm\node_modules\@vue\cli\lib\GeneratorAPI.js:518:17)
    at C:\Users\admin\AppData\Roaming\npm\node_modules\@vue\cli\lib\GeneratorAPI.js:303:27
    at async Generator.resolveFiles (C:\Users\admin\AppData\Roaming\npm\node_modules\@vue\cli\lib\Generator.js:313:7)
    at async Generator.generate (C:\Users\admin\AppData\Roaming\npm\node_modules\@vue\cli\lib\Generator.js:205:5)
    at async runGenerator (C:\Users\admin\AppData\Roaming\npm\node_modules\@vue\cli\lib\invoke.js:111:3)
    at async invoke (C:\Users\admin\AppData\Roaming\npm\node_modules\@vue\cli\lib\invoke.js:92:3)

D:\Dev\vue-workspace>cd board-project

D:\Dev\vue-workspace\board-project>vue add router

📦  Installing @vue/cli-plugin-router...

up to date, audited 970 packages in 4s

110 packages are looking for funding
  run `npm fund` for details

4 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
✔  Successfully installed plugin: @vue/cli-plugin-router

? Use history mode for router? (Requires proper server setup for index fallback in production) Yes

🚀  Invoking generator for @vue/cli-plugin-router...
📦  Installing additional dependencies...

added 2 packages, and audited 972 packages in 1s

111 packages are looking for funding
  run `npm fund` for details

4 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
⚓  Running completion hooks...

✔  Successfully invoked generator for plugin: @vue/cli-plugin-router

D:\Dev\vue-workspace\board-project>

-생성 결과

2sjdeveloper commented 8 months ago

BoardView.vue 파일 생성, index.js, App.vue 수정

2sjdeveloper commented 8 months ago

BoardView 를 구성하는 컴포넌트를 생성하기
BoardList.vue 생성
HeaderComponent.vue 생성
FooterComponent.vue 생성
결과

2sjdeveloper commented 8 months ago

2교시

BoardView.vue 설명 부모, 자식 컴퍼넌트끼리는 정보를 주고받을 수 있는데 자식 컴포넌트끼리는 데이터를 주고받을 수 없음. 그래서 부모 데이터에 정보를 저장해서 자식에게 알려주는 방식으로 처리. 월요일 수업에서는 전체 영역에서 공유할 수 있는 방법 할거임. 오늘은 부모자식끼리. 그래서 데이터를 보드뷰로 옮겼음.

2sjdeveloper commented 8 months ago

BoardWrite.vue 생성

2sjdeveloper commented 8 months ago

3교시

2sjdeveloper commented 8 months ago

4교시

App.vue 안에 : HomeView : AboutView : BoardView - headerCopm, FooterComp, BoardList, BoardWrite

2sjdeveloper commented 8 months ago

이거 세개로 계속 게시판 기능 만드는 중

2sjdeveloper commented 8 months ago

5교시

App.vue 안에 : HomeView : AboutView : BoardView - headerCopm, FooterComp, BoardList, BoardWrite, BoardRead 추가

2sjdeveloper commented 8 months ago

BoardRead.vue 생성
상세화면 만듦

2sjdeveloper commented 8 months ago

https://blog.naver.com/gpdnjsl123

2sjdeveloper commented 8 months ago

6교시

2sjdeveloper commented 8 months ago

7교시

교수님의 진도 목표 : 컴포넌트 진도 끝내기
TodoView.vue 생성 (숙제)
head, body component 생성
여기서 큰 틀은 가져옴. https://www.w3schools.com/howto/howto_js_todolist.asp
숙제 개요
1. 목록에 출력
2. 추가
3. 삭제
4. 리스트 클릭하면 모양 변화. 클래스가 바뀌면된다고 한다. li 에 이벤트 걸기

2sjdeveloper / vue-project

24-02-02-fri. vue.js #2

1교시

2교시

3교시

4교시

5교시

6교시

7교시