Seonglae Cho
일단 다 때려박고 쓸것만 쓰면 될듯
근데 몰랐는데 jsconfig.json 은 되게 좋은듯
Use jsconfig.json to improve VS Code IntelliSense on a Vue.js or Nuxt.js project
When you work on a Vue.js or a Nuxt.js project, and more generally on a webpack project, you usually use absolute imports. Learn how to configure the jsconfig.json file in Visual Studio Code for Vue.js or Nuxt.js development and make IntelliSense work with absolute imports!
https://lmichelin.fr/vscode-intellisense-jsconfig-vue-js-nuxt-js-absolute-imports/
VS code jsconfig를 사용하여 webpack alias 자동완성(autocomplete) 적용하기
많은 분들께서 js 또는 typescript 내에 import path 경로를 불러오실때, ../../ 형태로 중복해서 불러오는 것을 싫어하셔서, webpack 또는 babel 사용시에 module resolver를 많이 사용하실겁니다. webpack에는 resolve option에 alias 등을 사용하실 것이고, babel에서는 babel-plugin-module-resolver를 사용하셔서 module에 대한 alias를 설정하고, 모듈들을 import 하실것 같습니다.
https://trustyoo86.github.io/vscode/2018/08/22/vscode-jsconfig.html
db 데이터 구조를 그린다 공책에 몽고db 깔고 선택은 크게 user, team으로
block 은 user나 team에 속할 수 있는데 user 는 prviate team은 team별로 각각, root아닌 shared 로 나뉜다
mirro 에 데이터 구조부터 정리하고 있음
json 으로 짜고 데이터 정리하는게 더 편하겠다는 생각에 짜는 중
대충 프로젝트 structure 만들고 json mongo db 에 넣으려는데 안댐 흠
Unexpected end of JSON input in MongoDB Compass
I had this issue 6 month ago, the solution is write all JSON in one line. [{"id":4,"user":"test@example.com","date1":"2019-03-01","date2":"2019-04-01","statut":"Good","guest_number":4}] MongoDB Compass will told you: Import success! But definitely the document will not appear in your collection, so better use Robo3T if you gonna insert json. Then you can use again Compass like I do.
https://stackoverflow.com/questions/56151099/unexpected-end-of-json-input-in-mongodb-compass
minify 해줘야한다는데 겁나 귀찬쿤
vscoede 에 있다
그러니 import 는 되는데 데이터가 없네?
mongoDB 테스트용 json파일 import 및 document(bson) 조회 가이드
mongoDB 오늘은 json파일을 이용한 document(bson) import 후 다양한 구문을 이용하여 document(bson)를 조회하는 예제를 작성해 보겠습니다. mongoDB 설치 및 간단한 CRUD 예제는 아래 링크에서 확인하시면 됩니다. http://korn123.blog.me/220863836729 01. mongoDB sample json파일 다운로드 sample data는 mongoDB Getting Started Guide 페이지에서 다운로드 할 수 있습니다.
https://m.blog.naver.com/PostView.nhn?blogId=korn123&logNo=220864724172&proxyReferer=https%3A%2F%2Fwww.google.com%2F
이걸 보니 콤마없이 적는 json... 에러나고 수정도 힘든데 어쩌지 cli 로 해보자
Import and Export Data - MongoDB Compass stable
Export Entire Collection Export Filtered Subset of a Collection To export an entire collection to a file: Click Collection in the top-level menu and select Export Collection Compass displays the following dialog: The top section of the export dialog displays the query entered in the query bar prior to export, if applicable.
http://docs.mongodb.com/compass/master/import-export/
이건데 뭔 개같은 format 인지..
MongoDB 외부파일 import, export 방법
MongoDB(몽고db)를 사용하면서 외부파일을 가져오거나 내보낼 경우가 있을 수 있습니다. 백업을 위한 경우도 있으며 아니면 서버를 이전하면서 기존의 데이터베이스를 마이그레이션(Migration)하려고 많은 데이터를 한번에 옮길 수도 있겠죠~ 그럼 아래는 어떻게 import 또는 export하는지 알아보겠습니다. # MongoDB 내보내기, export() 현재의 데이터베이스를 외부 파일로 내보내는 방법입니다. 이때 mongoexport를 사용합니다. 대량의 데이터를 백업하기 위한 방법으로도 사용할 수 있겠죠.
https://webisfree.com/2017-07-30/mongodb-%EC%99%B8%EB%B6%80%ED%8C%8C%EC%9D%BC-import-export-%EB%B0%A9%EB%B2%95
역시 cli 가 최고다 - path 설정하고 restart 이후 (cmd 만 바로적용됨)
vscode에서
삭제도 알아둬야 할 것 같다
remove = delete
(MongoDB) 삭제(Delete 또는 Remove)
안녕하세요. 이번 시간에는 CRUD 마지막 시간으로 Delete 기능에 대해 알아보겠습니다. 문서를 지우는 작업이니만큼 신중하게 해야합니다. 몽고DB는 롤백(이전으로 되돌리는 기능)을 지원하지 않습니다. 롤백하는 한 가지 방법이 있긴 합니다. 그 방법은 나중에 설명할 oplog 를 사용하는 겁니다. oplog란 미리 알려드리자면, 데이터베이스에 어떤 쿼리를 했는지 기록으로 남겨두는 겁니다. 그 기록을 거꾸로 돌리면 롤백과 유사한 효과를 볼 수 있습니다.
https://www.zerocho.com/category/MongoDB/post/579ecb1fc097d015000404dd
jsconfig 작동 안하는데 nuxt webpack 이 그전에 빌드해서 그런듯
그냥 webpack option 에 주자
How to add custom resolve.alias in nuxt.config.js · Issue #124 · nuxt/nuxt.js
Dismiss GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together. Sign up chuanxd changed the title How to add custom resolve.alias in nuxt.conig.js How to add custom resolve.alias in nuxt.config.js Jan 13, 2017 lock bot locked as resolved and limited conversation to collaborators Nov 2, 2018 You can't perform that action at this time.
https://github.com/nuxt/nuxt.js/issues/124
잘 작동
port 3333공개
mongo db 회사쪽에도 깔아야 하니 까는데 같은 db 공유는 못한다
Environment Variables
The bash shell is really a programming language in disguise. Whenever you execute something at the command line, you are really running a small program. These programs typically launch other programs, but there's quite a bit of interpretation that can occur before those programs are executed.
https://drstearns.github.io/tutorials/env/
작업효율성 발견
이제 db 연결해야하는데 idpw 있으면 srv, 아니면 그냥 mongodb protocol 사용하는듯
- great get staerted
모던웹(NEMV) 혼자 제작 하기 3기 - 23 몽구스 설치 및 확인
노드에서 몽고디비를 사용하는 방법은 여러가지 입니다. 그 중 몽구스(mongoose)라는 것이 디비를 핸들링하기 쉽게 해줍니다. 몽구스는 몽고디비 기반 ODM(Object Data Mapping) 이란 것입니다. 공식 홈페이지: https://mongoosejs.com 몽구스를 이용해서 CRUD(Create Read Update Delete) 쓰고 읽고 수정하고 지우고를 해보도록 하겠습니다. 백엔드에 몽구스를 설치 합니다. be/app.js 백엔드의 시작점인 app.js 하단에 코드를 넣어서 연결되었다는 문자를 확인해봅니다.
https://fkkmemi.github.io/nemv/nemv-023-mongoose-setup/
- srv
MongoDB - Error: invalid schema, expected mongodb
I'm new in building application with MEAN Stack, I'm trying to build a real time chat app, here is my server side : console.log("Server running...!"); var mongo=require('mongodb').MongoClient; var client=require('socket.io').listen(8080).sockets; mongo.connect('localhost:27017/db/chat',function(err,db){ if(err) throw err; client.on('connection',function(socket){ console.log('someone has connected !'); //waiting for input socket.on('input',function(data){ console.log(data); }); }); }); I am sure that i created a data base called chat with mongodb, also mongo is waiting for connection.
https://stackoverflow.com/questions/35813584/mongodb-error-invalid-schema-expected-mongodb/56823260#56823260
생각보다 연결에 에러가 많이 걸려서 힘들었다 특히 윈도우에서 mongodb config 로 path 설정이 잘 안먹히는데, 그냥 기본 위치로 변하기 때문에 굳이 안바꾸는걸 추천
- deprecate 나와서 use new 어쩌고 option 2개 줘야함
연결했고 api 계속 안되던데 server폴더를 테스트할때 계속 빠트려서 그럼..
또 몽고 한번 연결하면 route 안에서도 잘 되네
- post get 호환도 안되고 좋군
또다른 deprecated mongo db update를 호환이 잘 안되게 하나보다
모던웹(NEMV) 혼자 제작 하기 3기 - 45 사용자 모델 정리하기
기존에는 name, age 로만 테스트 했으니 로그인이 가능할 모델로 변경합니다.
https://fkkmemi.github.io/nemv/nemv-045-user-model/
여기에 정확한 정보가 나와있다 - 내가하는거랑 다겹치는 고마운분
Cannot use aliases inside serverMiddleware · Issue #4580 · nuxt/nuxt.js
You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or window. Reload to refresh your session. Reload to refresh your session.
https://github.com/nuxt/nuxt.js/issues/4580
음 servermiddleware에서 es6는 사용가능하지만 안되는 것은 alias 웹팩설정이 안먹힌다
왠진 모르겠지만 build를 하는걸로 봐서 babel만 돌리나? server 쪽이라 그런듯
무거우면 다른 서버 추천한다는데 뭐 그정돈 아니니
Sortable
Sortable with vue.js
https://codepen.io/ogwmnm/pen/JGXerz
기본적으로 sortable이 있는데
RubaXa/Sortable 인듯
Vue.Draggable LIst Drag UI
Vue.Draggable LIst Drag UI 이분야 에서는 RubaXa/Sortable 가 대세인것 같아 각종 wrap 들 API가 많다. 그중에 vue에 맞춘 wrap 이 있다. 아래가 데모 이다 사용해본 결과 잘된다 .. https://github.com/Sortabl..
https://idlecomputer.tistory.com/264
각종 framework 에 대한 wrapper들이 있는데 vue-sortable은 안되고 vue draggable이 지금 된다고 한다 여기에 따르면
SortableJS/Vue.Draggable
Vue drag-and-drop component based on Sortable.js. Contribute to SortableJS/Vue.Draggable development by creating an account on GitHub.
https://github.com/SortableJS/Vue.Draggable
뭐 사용하다가 안되는거 있으면 sortable 사용해야할수도
- 결론은 이거만 보면 될듯
vuedraggable
https://sortablejs.github.io/Vue.Draggable/#/handle
example 들이 아주 잘 나와있다
Front
컬러테마 등 수정해주고
nav align
Bootstrap 4 align navbar items to the right
How do I align a navbar item to right? I want to have the login and register to the right. But everything I try does not seem to work. This is what I have tried so far: <div> around the &...
https://stackoverflow.com/questions/41513463/bootstrap-4-align-navbar-items-to-the-right
하다가 빡쳐서 뒤질뻔
textarea size 이벤트
Document: keyup event
The keyup event is fired when a key is released. The and keyup events provide a code indicating which key is pressed, while indicates which character was entered. For example, a lowercase "a" will be reported as 65 by keydown and keyup, but as 97 by keypress.
https://developer.mozilla.org/en-US/docs/Web/API/Document/keyup_event
HTML textarea 자동 높이 조절
textarea overflow visible textarea auto resize in html on chrome textarea 높이 내용물에 맞추기 textarea 자동 크기 조절 IE든 크롬이든 최초 문자열의 크기에 맞게 TEXTAREA 세로 크기가 정해진다. 이후에 텍스트를 입력하면... IE8에서는 그에 맞게 TEXTAREA의 세로 크기가 늘어난다. 크롬에서는 늘어나지 않고, 대신 스크롤이 생긴다... 내용물 높이에 맞춰주는 스크립트를 추가하면 크롬에서도 자동맞춤이 된다.
https://zetawiki.com/wiki/HTML_textarea_%EC%9E%90%EB%8F%99_%EB%86%92%EC%9D%B4_%EC%A1%B0%EC%A0%88
Guide | VueTextareaAutosize
TextareaAutosize plugin for Vue.js
https://devstark-com.github.io/vue-textarea-autosize/guide.html#installation
이녀석으로 textarea height 자동조정 성공스 - vue-bootstrap은 outline 도 안없어지고 심지어 row 1개도 안됨... 멍청이 개발자녀석