JavaScript 4

MongoDB 연결하기

mongodb사이트에 들어가서 회원가입을 하고 create 버튼을 눌러서 cluster를 만들어준다. shared모드로 설정해주고 seoul이나 무료로된 가까운 도시를 선택해준다 cluster tier나 Additional Settings은 설정해줄필요없다. cluster name은 마음대로 정해도된다. database에서 connect를 누른후 username과 password를 정해준다음 connect your application을 선택해준다음 이 부분은 server에서 mongodb를 연결하는 역할을 한다. 복사해둔다. terminal에 npm install mongoose --save를 입력하고 package.json의 dependencies에 추가되었는지 확인한다. mongoose를 받아온다음..

JavaScript/nodejs 2022.04.13

Nodejs 시작하기 (server)

nodejs를 검색한 후 node js 사이트에 들어가서 lts버전을 다운받는다. 명령 프롬프트 창 (윈도우 cmd)에서 node -v을 입력해서 버전이 나오면 다운로드가 잘 된 것이다. vscode에서 node를 사용하면 편리하기 때문에 vscode를 사용을 권장합니다. terminal에 npm init을 입력후 모두 기본값으로 enter를 쳐주면 된다. 여기서 에러가 날 때는 terminal이 cmd 또는 node인지 확인해주고 안되면 ctrl + shift + p 를 눌러서 terminal select default profile을 command prompt로 바꿔준다. index.js 파일을 만들어주고 terminal에 npm install express --save를 추가해준다. 그러면 node..

JavaScript/nodejs 2022.04.13

Drag and Drop img

Drag and Drop 을 사용하려면 하나의 태그만 있으면 가능하다. 이런식으로 구색만 갖춰주면 이런식이 된다. $("#input-img").on("dragover", dragOver).on("dragleave", dragOver).on("drop", uploadFiles); 이부분은 "dragover" 부분은 드래그가 올려졌을 때 dragOver함수를 샐행한다는 뜻이고 "dragleave" 부분은 드래그가 멀어졌을 때 dragOver함수를 시랭한다는 뜻이다. "drop" 부분은 드래그를 해온다음 마우스를 놓았을 때 uploadFiles 함수를 실행한다는 뜻이다. dragOver 함수의 if문은 dragover일 때와 dragleave일 때 약간의 변화를 주기 위해 설정해 놓은것이다. uploadFil..