일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- Open Source
- Eclipse
- STS
- Core Java
- git
- jpa
- Source
- SpringBoot
- Thymeleaf
- IntelliJ
- ubuntu
- maven
- myBatis
- error
- JDBC
- JavaScript
- Exception
- PostgreSQL
- MySQL
- MSSQL
- Spring Boot
- Docker
- Python
- 문서
- oracle
- 오픈소스
- AJAX
- Tomcat
- spring
- 설정
- Today
- Total
목록CSR(Client Side Rendering) (9)
헤르메스 LIFE

스캐폴딩(Scaffolding) : 프로젝트의 기본 환경과 구조를 자동으로 구성하는 과정. 이 용어는 건축에서 철골 구조물을 세우는 작업에서 유래되었으며, 소프트웨어 개발에서는 프로젝트를 시작하기 위한 기본 틀이나 뼈대를 자동으로 생성해주는 것을 말합니다.1. 스캐폴딩: Vue 3.x 버젼을 지원하는 공식 스캐폴딩 Tool인 Vite 를 이용한 방법> npm create vite@latest my-project? Select a framework: Vue? Select a variant:TypeScriptScaffolding project in C:\project\workspace\vuesample\my-project...Done. Now run: cd my-project npm install np..

버전확인C:\>node -vv16.14.2C:\>npm -v8.5.0npm 설치 - 오류가 발생됐습니다.C:\>npm install -g npmnpm noticenpm notice New minor version of npm available! 8.5.0 -> 8.14.0npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.14.0npm notice Run npm install -g npm@8.14.0 to update!npm noticenpm ERR! code EPERMnpm ERR! syscall mkdirnpm ERR! path C:\Program Files\nodejs\node_modules\.npm-QXjMEw5Nnpm ERR! er..

1. Vue 버전 확인-g 옵션 : global 옵션이라고 합니다.관리자 권한으로 설치해야 합니다.관리자 권한임에도 불구하고, 아래와 같은 오류가 발생합니다.C:\project\workspace\vuesample>vue --version2.9.6C:\project\workspace\vuesample>npm install -g @vue/clinpm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.npm WARN deprecated s..

아래의 내용은 인프런의 캡틴판교님의 강의를 정리한 내용입니다. 제 소스도 아니고, 무언가를 배우기 위해서는 직접 keyin 하는 방법이 좋기 때문에, 중요 소스는 죄송하지만 이미지 입니다. 정상동작합니다. 1. Todo List를 보여주는 방법 TodoList.vue 파일의 created Hook을 App.vue 으로 옮겼습니다. props 기능 : 상위에서 하위로 데이터를 보내는 기능 2. TodoList 등록하는 방법 TodoInput.vue 파일의 addTodo 기능을 App.vue 으로 옮겼습니다. $emit 기능 : 하위에서 상위로 데이터를 보내는 기능 3. TodoList 삭제 및 Toggle 방법 하위에서 상위로 데이터를 보내기 때문에 역시 $emit 기능 입니다. 4. 전체 삭제 기능 하위..

아래의 내용은 인프런의 캡틴판교님의 강의를 정리한 내용입니다. 제 소스도 아니고, 무언가를 배우기 위해서는 직접 keyin 하는 방법이 좋기 때문에, 중요 소스는 죄송하지만 이미지 입니다. index.html main.js import Vue from 'vue' import App from './App.vue' new Vue({ el: '#app', render: h => h(App) }) App.vue TodoHeader.vue TODO it! TodoInput.vue TodoList.vue TodoFooter.vue 로직적인 내용 중 저장하는 부분이 중요하다고 생각해서 남겨봅니다. // localStorage 특성상 // TodoInput.vue에서 // Object -> json 문자열로 저장하고...

TodoHeader.vue Sample header 실행 npm run dev 결과 파비콘 생성 사이트 https://www.favicon-generator.org/ font awesome 6.1.1 font awesome 6.0.0 font awesome 5.14.4 font awesome 5.0.9 Google Ubuntu Font https://fontawesome.com/v6/icons?m=free Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.com

Chrome plugin 설치 Vue.js devtools 검색 제공업체 : http://vuejs.org 의 Vue.js devtools 를 선택해서 설치하면 됩니다. 확장프로그램 설정 - 파일 URL에 대한 엑세스 허용을 Enable 시켜줘야 합니다.
VSCode > Terminal에서 Vue.js 설치 시 아래와 같은 오류가 발생했습니다. npm i -g @vue/cli C:\Users\[USER]>npm i -g @vue/cli npm ERR! The operation was rejected by your operating system. npm ERR! It's possible that the file was already in use (by a text editor or antivirus), npm ERR! or that you lack permissions to access it. npm ERR! npm ERR! If you believe this might be a permissions issue, please double-check the ..

개발환경JDK : 1.8Spring BootlombokThymeleafVue Cli : 2.9.6Vue.js : Version 2.xnode.js : 16.14.2npm : 8.5.0Database : PostgreSQL1. Spring Boot 환경설정application.yml# WAS server settingserver: port: 9090 servlet: context-path: / encoding: charset: UTF-8 enabled: true force: true session: timeout: 3600 # 기본단위 : 초 tomcat: uri-encoding: ..