MEAN STACK
-
Ajax Delete 예제MEAN STACK/Express 2018. 9. 11. 10:42
지금까지 프로그램은 서버에서 요청 후 결과 페이지까지 지정해줬다. 하지만 AJAX 요청을 이용해 요청의 결과에 따른 페이지 제어를 클라이언트에서도 할 수 있다. 이때 location.href를 사용한다. $("#deleteBtn").click(function(){ $.ajax({ url: '/memo/', method: "DELETE", }).done(function(response){ location.href = "/"; }); }); deleteBtn 을 id로 가지고 있는 태그 클릭시 .ajax 명령어 통해 요청을 보낸다. method를 DELETE로 정하면 Express에서는 delete에 해당하는 메소드 중 일치하는 url 패턴을 찾아 수행한다. 중요한건 done 메소드의 위치. ajax 메소드..
-
Node.js Express jQuery 사용법MEAN STACK/Express 2018. 9. 11. 10:39
Express에서 jQuery 사용할 수 있는 방법은 두가지이다 1) Static 폴더에 jquery 넣고 사용한다. 스프링과 같은 방법으로 static 등 폴더에 넣고 경로 지정해 사용한다. 2) npm으로 설치한다. 따로 jQuery 파일 가지고 있을 필요 없이 명령어만으로 설치 가능해 편리한 장점이 있다.npm 명령어 통해 jquery 설치 path 모듈 추가해 static 경로 지정할 때 추가한다. path 모듈의 join 메소드를 사용해야 하기 때문.node_modules 폴더에 모듈들이 설치되어 있음 확인할 수 있다.다음과 같이 경로 지정해주면jQuery 사용할 수 있다.
-
노드js(Node.js) multipart/form-data 인코딩 지원 모듈 Connect-multipartyMEAN STACK/Express 2018. 9. 11. 10:33
파일 업로드에 지원되는 인코딩 방식 중 대표적인 multipart/form-data를 지원하는 모듈 사용 방법. 스프링에서는 어느정도 코드 작성해야 했지만 Express 이용하면 훨씬 간편하게 사용할 수 있다. 외부 모듈이므로 npm 설치 필요하다. 명령어 : npm install --save connect-multiparty공통적으로 사용하는 모듈의 경우 app.use로 등록해두지만 파일 업로드에 종속된 모듈이기 때문에 post의 매개변수로 사용한다. uploadDir로 파일 저장 경로 등록한대로 디렉토리 생성해준다.__dirname 하위 multipart 폴더로 업로드 파일 경로 지정해두었기 때문에 경로, 파일명 맞춰 생성해준다. 경로에 파일 없으면 500에러 발생url 접속 후 파일 선택 후 fil..
-
노드js(Node.js) Express-SessionMEAN STACK/Express 2018. 9. 11. 10:30
* 예제는 하나의 프로젝트에 내용을 추가하는 방식으로 진행되고 있습니다. MEAN STACK - express 카테고리의 이전 글들을 참고하면 이해에 무리가 없을 것입니다. Express 세션(session) 사용 방법 외부 모듈이므로 터미널에서 설치한다. 명령어 : npm install --save express-session세션 모듈 가져와 등록어플리케이션 파일에 페이지 라우팅 처리readFile 메소드의 경로에 맞도록 html 파일 생성 후 코드 작성login url로 가 로그인. 아이디, 비밀번호는 따로 조건 없기 때문에 모든 값 입력 가능. 인덱스 페이지로 이동하면 정상 동작한 것이다. 이후 다른 탭 열어 같은 url 요청 수행하면이미 로그인되었다는 콘솔 메시지가 출력되며 로그인페이지로 이동을 ..
-
노드js(Node.js) 바디 파서(Body parser)MEAN STACK/Express 2018. 9. 11. 10:26
html 문서의 값을 받아오기 위해 서블릿과 스프링에서 getParameter, 커맨드 객체등을 사용했다. Express에서는 바디 파서를 통해 html 문서의 name 속성 값들을 읽어 올 수 있다. 외부 묘듈이므로 npm 설치가 필요하다. npm install --save body-parser 터미널에 입력해 모듈 설치모듈 등록 후 get, post에 대한 처리 코드 작성 request.body.subject와 같은 형태로 값을 가져올 수 있다. 요청정보변수.바디파서변수.name속성명; 과 같은 방식으로 접근 가능하다는 말이다.readFile의 경로에 맞춰 write.html 파일 작성. name 속성 값을 잘 맞춰준다.결과가 잘 나온다.
-
Express 정적 자원(static) 관리MEAN STACK/Express 2018. 9. 11. 10:16
미들웨어는 작성되는 순서가 중요하다. 정적자원들(JaveScript, css, img)을 먼저 로드 할 수 있도록 가장 상위에 스태틱 미들웨어를 등록해야 한다. 라우팅 하위에 static 폴더 생성 후 임의의 파일 넣는다. 이후 어플리케이션 파일에 다음 코드 추가 app.use(express.static(__dirname + '/static')); __dirname : 현재 스크립트가 동작하고 있는 경로를 반환.파일명으로 url 요청하면 다운받을 수 있다.