본문 바로가기

공부/프론트엔드32

[PJ] Vue 공부중3 json-server 를 이용한 DB 공식문서 설치 npm i json-server db.json 파일 생성 { "posts": [ { "id": 1, "title": "json-server", "author": "typicode" } ], "comments": [ { "id": 1, "body": "some comment", "postId": 1 } ], "profile": { "name": "typicode" } } 실행 json-server --watch db.json 아래와 같이 데이터가 쌓여 있는 모습을 실시간으로 볼 수 있다. async vs sync (비동기 vs 동기) 동기는 일을 처리하는데 시간이 얼마나 걸리든, 일을 무조건 순차적으로 진행하는 것. 비동기는 일의 요청을 바로바로 받아서 .. 2022. 9. 28.
[PJ] Vue 공부중2 집에서 공부했던 vue3 project를 다른 곳에서 ( window ) 작동 시키려니 되지 않는다..하하하하 (몇일째 셋팅만 하는건지 모르겠다. 제발 코딩좀 하자) wsl 로 ubuntu 설치해둔게 있어서 거기서 돌려보도록한다. 근데 너무 깨끗한 ubuntu server... nodejs, npm, vue-cli, vue-cli-service 등을 설치해 주었다. sudo apt update sudo apt install nodejs node -v npm -v # npm 은 안깔렸다 sudo apt install npm # npm 설치 npm -version npm install -g @vue/cli # node 버전이 낮아서 안깔림. 14이상으로 설치. npm run serve curl -o- htt.. 2022. 9. 27.
[PJ] Vue 공부중 최종적으로 Vue3 + MDB + Bootstrap 을 사용해서 프로젝트를 진행하기로 결정!! (땅땅땅) vue 공부 - todo list 만들어보기 Vite로 프로젝트 생성 npm init vite-app todo Vitejs2로 프로젝트 생성 npm init vite todo-vite2 기본 폴더 구조 vitejs로 프로젝트 생성시, index.css 파일이 따로 있지 않고 태그가 기본적으로 setup속성을 갖도록 템플릿이 만들어진다... 그게 뭔데.ㅡ Vite Project Start Bootstrap Library 설치 npm install bootstrap Popper Library 설치 npm install @popperjs/core Todo List 변수 생성 생성된 변수는 전 컴포넌트에 걸.. 2022. 9. 26.
[PJ] vue2+vuetify vuetify2 vs vuetify3 vue3 프로젝트에서 vuetify2 설치 시 아래와 같은 에러가 발생하였다. Error: You cannot call "get" on a collection with no paths. Instead, check the "length" property first to verify at least 1 path exists. vue3 에서 vuetify2를 지원하지 않는다.. Vuetify v3 Beta 로 해서 쓰려고 하는 기능들이 다 있으면 beta로 쓰는걸로하려고 한다. but.!! vuetify v3 에 우리가 원하는 date picker 가 없다.. 왜..? 2에는 있는데 3에 왜없어!! ㅠㅠㅠ 책도사고 강의도 끊었는데 왜!!! vue2 + vuetify 2로 .. 2022. 9. 20.
[PJ] Vue vueCLI 설치 기본 vue 개발 환경을 설정해주는 도구 npm install -g @vue/cli # OR yarn global add @vue/cli vue -V # 설치확인 vue CLI 를 활용한 vue project 생성 vue create hello-vuecli # vue create 프로젝트명 확장프로그램 - vetur 설치 vue 프레임워크에 대해 다양한 기능을 제공하는 플러그인 *.vue 파일에 대한 코드들을 만들어주거나, 디버깅, 자동완성, 하이라이트나 에러체크 등을 지원 Features Syntax-highlighting Semantic-highlighting Snippet Emmet Linting / Error Checking Formatting IntelliSense Debugg.. 2022. 9. 19.
[PJ] study 1. 프로그램설치 - putty - vm ssh접속용 - Figma - docker 2. 2022. 9. 15.