📚 Study/JS, JQuery

jQuery - $(document).ready() 대신 $()를 사용하자

사용법 $(document).ready(function(){ // 실행할 기능을 정의해주세요. }); 일반적으로 사용되는 방법은 위에서 제시한 예제 코드와 같습니다. .ready()를 사용하는 대표적인 코드들은 아래와 같습니다. $(handler) $(document).ready(handler) $("document").ready(handler) jQuery 3.0 버전 이후부터는 첫 번째에 해당하는 구문만 사용하는 것을 권장드립니다. .ready() Event는 1.8 버전에서는 deprecated 되었으며 3.0에서는 지원하지 않기 때문입니다. $(documet).ready() 대신 $()를 사용하자 $(function(){ // 실행할 기능을 정의해주세요. });

jQuery / Method / .val() - 양식(form)의 값을 가져오거나 값을 설정하는 메소드

.val() .val()은 양식(form)의 값을 가져오거나 값을 설정하는 메소드입니다. 문법 1 .val() 선택한 양식의 값을 가져옵니다. 예를 들어 var jb = $( 'input#jbInput' ).val(); 은 아이디가 jbInput인 input 요소의 값을 변수 jb에 저장합니다. 문법 2 .val( value ) 선택한 양식의 값을 설정합니다. 예를 들어 $( 'input#jbInput' ).val( 'ABCDE' ); 는 아이디가 jbInput인 input 요소의 값을 ABCDE로 정합니다. 예제 1 양식에 텍스트를 입력하고 버튼을 클릭하면, 입력한 값을 출력합니다. Click 예제 2 select 양식에서 값이 바뀌면, 그 값을 출력합니다. One Two Three 예제 3 버튼을 클..

JQuery

개요 JavaScript는 하나의 기업에서 혼자 만들고, 혼자 사용 환경까지 배포해주는 언어가 아닙니다. 표준과 규약이 있고 빠르게 발전하고 있기는 하지만 규약이 제대로 정해지기 전 나왔던 구형 브라우저 (Internet Explorer 9 이하)에서는 JavaScript 함수를 지원하지 않는 것이 있어 코드가 제대로 동작하지 않는 경우도 많습니다. jQuery는, 이런 브라우저 호환성을 해결하고 자주 사용하는 코드를 재사용할 수 있도록 만들어진 라이브러리입니다. 상당히 많은 웹사이트가 현재도 jQuery를 사용하고 있습니다. jQuery 공식 홈페이지 이 강의에서 상세하게 다루진 않을 예정이며, JavaScript 작업이 많이 필요한 홈페이지에는 jQuery 사용을 권장드립니다. 사용법 var span..

[node.js] req.params vs req.body vs req.query

node.js로 프로젝트를 하면서 주소로 받는 params( 라우터 매개변수) 와 req.body 데이터들을 담아서 보낼 때 사용하는 것(유저의 정보 또는 파일) 키 값으로 보내는 것은 알고 있었으나 req.query를 쓰는 선배를 보고 이건 모르면 안될 것 같아서 정리 합니다. req.params - 라우터 매개변수 예를 들어 /:id/:name 경로가 있으면 ":id"속성과 ":name"속성을 req.params.id, req.params.name으로 사용할 수 있다. www.example.com/post/1/jun 일 경우 1과 jun을 받는다. req.body - JSON 등의 데이터를 담을때 사용한다. (주로 POST로 유저의 정보 또는 파일 업로드(formdata)를 보냈을 때 ) 요청 본문에..

Mongo DB와 Node.js 연동하기

서론 mongodb와 node.js를 연동해서 db를 출력하기 위해서는 연동하는 방법을 알아야한다. const mongoose = require('mongoose'); const MONGODB_URL = 'mongodb+srv://root:12341234@cluster0.luvlj.mongodb.net/myFirstDatabase?retryWrites=true&w=majority' mongoose.connect(MONGODB_URL, { useNewUrlParser: true }, (err) => { if (err) { console.log(err); } else { console.log("Connected to database successfully") } }) DB접근에 비밀번호가 뜨는 문제가 발생 ..

요청 라우팅하기

서론 middle웨어의 라웉팅을 알아보자 요청 url을 일일이 확인해야 하는 번거로운 문제를 해결하는 것이 라우터 미들웨어입니다. 라우터 미들웨어 사용하기 라우터를 사용하면 사용자가 요청한 기능이 무엇인지 패스를 기준으로 구별하기 때문에 아주 중요합니다. * Router 객체를 이용해 라우팅 함수 등록하기 * * (1) 웹 브라우저에서 http://localhost:3000/public/login2.html 페이지 열고 요청 * (2) 크롬 브라우저의 Postman 앱이나 기타 POST 요청 도구를 사용하여 POST 방식으로 요청 * * @date 2016-10-25 * @author Mike */ // Express 기본 모듈 불러오기 var express = require('express') , ht..

미들웨어 사용하기

서론 express 모듈안에 미들웨어와 라우터를 사용할 줄 알아야하는데 그중 미들웨어를 알아보자 지금까지는 use() 메소드로 미들웨어 함수안에 코드를 직접 넣어 클라이언트 응답을 전송해야 하는데 어려워서 개발자가 미리 만들어놓은 미들웨어를 사용한다. Static 미들웨어 특정 폴더의 파일들을 특정 패스로 접근할 수 있도록 만들어 줍니다. // Express 기본 모듈 불러오기 var express = require("express"); const res = require("express/lib/response"); const path = require("path"); // static 미들웨어 특정 폴더의 파일들을 특정 패스로 접근할 수 있도록 만들어준다. var static = require("ser..

익스프레스로 웹 서버 만들기

서론 http모듈만 사용해서 웹 서버를 구성할 때는 많은 것들을 직접 만들어야 한다. express 모듈을 사용해서 미들웨어, 라우터를 사용하면 편리하게 구성할 수 있다. express 서버만들기 $ npm init 해서 package.json 파일을 만든다. express, http 모듈은 ./ 기호 없이 모듈 이름만 사용한다. 이것은 노드에 내장된 모듈 또는 npm으로 설치한 외장 모듈일 때 상대 패스가 아닌 이름만 지정하도록 설정되었기 때문이다. // Express 기본 모듈 불러오기 var express = require("express"); http = require("http"); // 익스프레스 객체 생성 var app = express(); // 기본 포트를 app 객체에 속성으로 설정 a..

간단한 웹서버 만들기

서론 node.js를 통해서 서버를 구축해서 DB에서 정보를 가져오는 app프로젝트를 하기위해서 서버 공부중에 가장 기초적인 서버 구축을 해보았다. 본문 노드에 기본으로 들어 있는 http모듈을 사용하면 웹서버 기능을 담당하는 서버 객체를 만들 수 있습니다. http 모듈을 로딩했을 때 반환되는 객체에는 createServer()메소드가 정의 되어있다. 이 메소드를 호출하면 서버 객체를 만들 수 있다. //http 모듈에 들어있는 서버 기능을 사용하려면 먼저 require()메소드로 http 모듈을 불러옵니다. var http = require("http"); // 웹 서버 객체를 만듭니다. var server = http.createServer(); // 웹 서버를 시작하여 5000번 포트에서 대기합니..

Chap1 start _ require() 메소드

Node.js에서 require 메서드 외부 모듈을 가져올 때 사용됩니다. 모듈이라 함은 외부에 영향을 받지 않는 독립된, 재사용 가능한 코드들의 묶음으로 볼 수 있습니다. 예시 module.exports export export 문은 JavaScript 모듈에서 함수, 객체, 원시 값을 내보낼 때 사용합니다. 내보낸 값은 다른 프로그램에서 import 문으로 가져가 사용할 수 있습니다. 이렇게 바로 선언해서 짧게 require해서 사용할 수도 있다.