반응형 전체 글340 [NodeJS] 템플릿 템플릿 res.send만으로 html 응답을 주려면 너무 많은 값들이 들어간다.따라서 템플릿 엔진을 이용하여 보다 복잡한 html 응답을 한다. 템플릿에는 jade, ejs 등 다양한 종류가 있는데우선 ejs의 사용법에 대해 알아보자 우선 ejs 템플릿 엔진을 사용하기 위해서 npm에서 ejs를 설치해준다. 1app.set('view engine', 'ejs'); cs 따로 변수에 저장할 필요없이 app.set으로 ejs를 사용한다고 명시해준다 다른 템플릿을 사용한다면 ejs 위치에 해당 템플릿의 이름을 입력한다. 12345678910111213141516 MY APP h1{ text-align: center; margin-top: 10rem; } welcome Colored by Color Script.. 2017. 4. 18. [NodeJS] POST 요청 받기/응답 POST 요청 받기/응답 1234 email: 보내기:Colored by Color Scriptercs get은 데이터를 보낼때 길이에 제한이 있고, 보안에 취약하다는 단점이있다따라서 public/form.html의 코드 중 method를 post로 변경해보자. post 방식은 get과 다르게 url에 데이터가 전송되지않으므로req.param으로 데이터를 가져올 수 없다.따라서 body-parser를 사용해야하는데, express 와 마찬가지로 npm에서 제공하는 모듈이므로 install --save하여 설치해준다. 123var bodyParser = require('body-parser'); app.use(bodyParser.json());app.use(bodyParser.urlencoded({exte.. 2017. 4. 18. [NodeJS] GET 요청 받기/응답 Get 요청 받기/응답 123456789101112131415 this is form html email: 보내기: Colored by Color Scriptercs 우선 get 요청하는 form을 만들어 보자public 폴더 안에 다음과 같은 form.html을 만들어 준다. 잘 생성이 되었는지 localhost:3000/form.html에 접근하여 확인한다. 1234app.get('/send_email', function(req,res){ console.log("email :", req.param('email')); }); Colored by Color Scriptercs html에서 action을 /send_email로 설정했으므로 Path도 동일하게 설정한다.이때 get방식은 url과 함께 데이터.. 2017. 4. 18. [NodeJS] 정적 파일 위치 등록 정적 파일 위치 등록 public 폴더에 js 폴더를 생성후 main.js파일을 만들어준다또한 앞서 만들었던 main.html에 main.js 파일을 추가한다 1 cs main.js에는 간단하게 콘솔로 'Hello world'를 출력하게 했다그러나 로컬에서 접근을 하면 다음과 같은 오류가 발생한다. 이는 js/main.js의 경로를 찾지 못하기 때문이다.따라서 URL로 접근 후 브라우저에 내려받는 정적 파일의 위치를 등록해 줘야한다(static directory) 1app.use(express.static('public')); cs app.use(express.static('폴더'))를 지정해주면 정적파일에 대한 위치가 등록된다여기서 정적파일이란 html, js, css, images 등이 해당된다. 2017. 4. 18. [NodeJS] Get 라우팅 Get 라우팅 Node가 미들웨어로써의 역할을 하기 위해서 라우팅이 필요하다라우팅은 URL이나 특정한 HTTP 요청 메소드(GET/POST)인 특정 엔드포인트에 대한 클라이언트의 요청에 애플리케이션이 응답하는것을 결정하는걸 말한다 예를 들어 사용자가 localhost:3000으로 접근한 후 /main에 대한 요청을 보냈을 때어떤 동작을 할 것 인가에 대한 명령이 필요하다.(locallhost:3000/main) 예를 들어 main에 접근했을때 main.html 이라는 파일과 연결시킬수도 있고hello.html이라는 파일과 연결시킬수도 있다. 각 라우트는 하나 이상의 핸들러 함수를 가질수 있고, 이 함수는 라우트 함수가 일치할때 실행된다.라우트의 정의, 기본 몸체는 다음과 같다. 1app.METHOD(PA.. 2017. 4. 18. [NodeJS] 기본 서버 연결 기본 서버 연결 기본적인 서버 연결 예제를 살펴보자기본 예제는 다음과 같다. 123456var express = require('express');var app = express();app.listen(3000, function(){ console.log("Start server on port 3000"); })console.log("End of code");Colored by Color Scriptercs require은 다운받은 모듈을 사용하는 메소드이다.우리가 설치한 웹 프레임워크인 express를 가져온다기본적으로 모듈과 변수의 이름을 일치시켜준다. nodeJS만으로 코드를 짜려면 라우팅이나 세션관리 등이 상당히 복잡해진다그러나 Express에서 제공하는 메소드를 사용하면 간편하게 웹서버를 구축할.. 2017. 4. 18. [NodeJS] 초기 설정(mac) 초기 설정 노드는 npm이라는 패키지 매니저를 통해 필요한 패키지를 설치할수있다. 터미널에서 작업할 폴더에 들어가서 npm init을 입력하면이름과 버전, git 레포지터리 등을 등록하는데 필요한 내용만 입력하고입력하지 않을 내용은 Enter를 입력하여 넘어간다마지막에 Is this ok? 라는 글이 출력되면 yes를 클릭한다.이 과정을 완료하면 nodeJS에 대한 기초 설정이 완료된다 자세한 내용은 pasckage.josn에 대한 공식문서를 참조하자https://docs.npmjs.com/files/package.json Express 설치 다음으로 node에서 사용할 Express를 설치해야한다.Express는 nodeJS를 위한 간결하고 빠른 웹 프레임워크이다.node에서는 Express의 여러 유.. 2017. 4. 18. [ReactJS] 작업 환경 구축 - create react app 작업 환경 구축 - create react app 웹팩 설정을 하거나 보일러 플레이트를 사용하는 방법도 있지만복잡한 설정없이 프로젝트를 만드는데 create react app을 사용하는것이 가장 간단한 방법인 것같다.create react app은 페이스북 팀에서 만든 앱이고, Redux 개발자가 프로젝트에 참여했다. create react app의 git 에 들어가면설치 및 사용방법에 대한 예제가 자세히 나와있다. 12345npm install -g create-react-app create-react-app my-appcd my-app/npm startColored by Color Scriptercs 우선 npm의 글로벌 옵션으로 create-react-app을 설치 해준다.그리고 create-rea.. 2017. 4. 18. [Web] Database - 2 Database SQL 실습 Bitnami를 설치하면 아파치 웹서버 뿐만아니라 MySQL도 자동으로 설치가 된다.이를 이용하여 SQL에 대한 실습을 진행해보자 먼저 MySQL을 설치하면 기본적으로 Monitor도 같이 설치가 된다.이를 실행하기 위해서는 터미널을 열고 mysql-> bin 폴더로 들어간후 모니터를 실행시켜 준다.맥 기준으로 현재(2017-01-01) 버전 경로는 다음과 같다.cd /Applications/mampstack-5.629-0/mysql/bin 모니터를 실행시키기 위해서는 다음과 같은 명령어를 입력해야한다../mysql - hlocalhost -uroot -p -h~ : 서버의 주소를 설정한다. h 뒷부분이 주소이며, 현재는 로컬로 접속한다는 뜻이다.-u~ : 비밀번호 접근을 설.. 2017. 4. 18. 이전 1 ··· 31 32 33 34 35 36 37 38 다음 반응형
