본문 바로가기

Node.js/Node.js | Express.js16

Node.js 이전 버젼으로 옮길려면 | NVM 새 최신 버젼을 다운 받았지만 버그가 많아 이 전 버젼으로 다시 돌아가고 싶다면 NVM을 사용한다. https://github.com/nvm-sh/nvm GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions - GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active nod.. 2022. 2. 2.
BMI 계산기 서버 만들기 앞에서 만든 계산기 서버 폴더 안에 BMI 서버를 만들어 보자. 1 새 파일을 만든다. bmiCalculator.html 2 html 내용을 입력한다. 버튼 타입을 button으로 해놔서 숫자 입력해도 아무 일도 일어나지 않았었다. 버튼 타입을 submit으로 해야 입력 내용이 서버로 간다. 3 서버를 만든다. 새 자바스크립트 파일을 만드는 것이 아니라 이미 만들어 놓은 calculator.js 파일에 내용을 추가하면 된다. express, nodemon, body-parser는 이미 실행 중이므로 다시 실행할 필요가 없다. 입력값을 Number()로 감싸지 않고, parsefloat()로 감쌌다. 왜 그랬을까..? HTML DOCTYPE html> BMI Calculator BMI Calculator .. 2021. 10. 3.
백엔드에서 일어나는 일 백엔드에서 일어나는 일 웹페이지에서 오른쪽 클릭하면 view page source가 나오는데 클릭하면 html 내용이 뜬다. 그 내용을 보면 계산이 되거나 하는 코드가 없이 단순한 코드만 있다. 계산이 되거나 하는 것은 사용자가 볼 수 없는 백엔드에서 일어나고 사용자는 그 결과만 볼 수 있게 된다. 2021. 10. 3.
Body Parser 사용하기 Body Parser 계산기 서버 만들 때 숫자를 서버에 입력받고 나면 서버가 계산 한 후 그 결과를 브라우저에 보낼 수는 없을까? 이 때 npm package 에서 Body Parser가 필요하다. https://www.npmjs.com/package/body-parser 다운받기 npm install body-parser을 써서 다운을 받자. 다운로드 후 package.json에서 body-parser가 들어가있는 것을 볼 수 있다. bodyParser 모드 bodyParser는 몇 가지 모드가 있다. bodyParser.text() : parse all the requests into text parse 팔-ㅆ : 분석하다 bodyParser.json() : special format that we.. 2021. 10. 3.
자바스크립트 파일 경로 알아보기 자바스크립트 코드 에디터에 console.log(__dirname); 을 입력하고 터미널에서 서버를 실행시키면 nodemon calculator.js (파일명) 혹시 nodemon을 다운 받지 않았다면 터미널에서 npm install nodemon 터미널에 경로가 나온다 2021. 10. 3.
POST 요청 방금 만든 계산기 웹사이트에서 숫자를 입력하고 calculator 버튼을 누르면 어떻게 될까? 크롬 디벨로퍼툴을 열어서 network로 들어가면 index.html 의 status가 404(Not Found)가 나온다. (내 크롬 디벨로퍼툴은 강의 때랑 지금이랑 크롬이 달라졌는지 status를 찾을 수 없었다..) html의 form태그를 보면 method가 post라서 아래에 입력된 내용을 어딘가로 보낼려고 만들었다는 의미이다. 그 어딘가는 action에 적힌 곳으로 가게된다. 위의 코드는 서버가 아닌 index.html로 가게 해놓았다. 또는 메인 페이지라서 이렇게 쓸 수 있다. 여기서 action을 지워도 괜찮다. 현재 페이지로 가도록 기본 설정되어있다. 하지만 404 에러가 나는 이유는 서버에서 .. 2021. 9. 28.
Get 요청 | sendFile() | __dirname GET request 하기 get요청하고 파일로 받을려면 sendFile() 메소드를 이용한다 여기서 파일 주소를 "index.html"로 했을 때 내 컴퓨터 안에 서버가 있는 경우는 괜찮치만 서버가 클라우드나 다른 컴퓨터에 있다면 이 경로는 찾을 수가 없다. __dirname을 붙여주면 /Users/mira/Desktop/코딩/calculator 이 폴더까지 전체 경로를 나타내 준다. 거기에 파일을 더해주면 res.sendFile(__dirname + "/index.html"); 서버가 어디에 있든 해당 파일을 받을 수 있다. 파일 위치를 변경해도 알아서 찾아간다. 2021. 9. 28.
계산기 서버 만들기 | body-parser | path.js | 웹사이트 서버 기본 세팅 회색 하이라이트는 터미널에서 실행 파랑 하이라이트는 코드에디터에서 실행 1 원하는 곳에 새 폴더 만든다 mkdir calculator 2 새로 만든 폴더 안에 들어간다 cd calculator 3 새 파일 만든다 touch calculator.js 4 npm을 실행시킨다 npm init 5 코드에디터에서 만든 폴더를 연다 6 express를 다운 받는다 npm install express 7 calculator.js에서 express 요청하는 코드 작성 const express = require('express'); 8 express 셋업 const app = express(); 9 포트 연결 app.listen(3000, function() { console.log("Serve.. 2021. 9. 25.
서버 기본 세팅 work flow 요약 파일 만들고 그 파일 안에 npm init 실행 npm install express npm install nodemon npm install body-parser 다운 받아 놓고 자바스크립트에서 코드 작성 웹사이트 서버 기본 세팅 회색 하이라이트는 터미널에서 실행 파랑 하이라이트는 코드에디터에서 실행 1 원하는 곳에 새 폴더 만든다 mkdir calculator 2 새로 만든 폴더 안에 들어간다 cd calculator 3 새 파일 만든다 touch calculator.js 4 npm을 실행시킨다 npm init 5 코드에디터에서 만든 폴더를 연다 6 express를 다운 받는다 npm install express 7 calculator.js에서 express 요청하는 코드 작성 const expr.. 2021. 9. 24.
Nodemon 설치하기 | rs 앞 포스트에서 보았듯이 코드에디터에 변경이 있을 때마다 터미널에서 계속 서버를 나왔다가 다시 들어갔다가를 반복해야하는데 너무 귀찮다. 소스 코드에 변경이 있을 때마다 이 작업을 자동으로 해주는 프로그램이 있는데 nodemon이다. nodemon 설치하기 https://nodemon.io/ 디렉토리 어디에 설치하든 상관없다. 모든 디렉토리에 적용이 된다. npm install -g nodemon 다운 받고 나서 터미널에 nodemon 과 파일 이름을 작업 중인 파일 안에 적어준다 nodemon server.js nodemon 실행 해보기 하나의 get 요청을 더 추가하니 콘솔에서 자동으로 변경이 된다. 로컬 호스트에 나온 내용 콘솔에서 rs 누르면 restart 할 수 있다. 2021. 9. 24.
request, response | GET 요청하기 우리가 구글에 접속하는 경우 우리 컴퓨터 브라우저가 구글 서버에 데이타 달라고 request를 한다. 구글 서버는 이 브라우저에 HTML, CSS, JS을 보내며 response를 해준다. 요청의 4가지 종류 요청에는 4가지가 있다. HTTP 요청이라고도 부른다. 1. 읽기: GET요청 (페이지 읽게 해달라고 요청) 2. 쓰기: POST 요청 (포스트, 블로그, 댓글 등 쓰게 해달라고 요청) 3. 수정: PUT 요청 (이미 있는 내용 수정해 달라고 요청) 4. 삭제: DELETE GET 요청보내기 기본 문법 app.get("/", function(req, res) { res.send("Hello world")}); 1. get 요청해서 콘솔에 request 내용보기 1) app.get 매소드 작성 app.. 2021. 9. 24.
Express.js 프레임워크 시작하기 express 란? express는 node의 많은 프레임워크 중 하나이다. java script에서 jQuery가 있듯이 node.js에는 express가 있다. 누군가가 써놓은 코드 뭉치들인데 Express는 특히 웹 만들 때 코드들을 organize하고 structure하는데 도움을 준다. Node가 수동 스크루 드라이버라면 express는 전동 드라이버로 Node보다 간단한 코드로 웹 서버를 만들 수 있다. express 라이브러리 설치하기 익스프레스를 다운 받으려면 npm을 먼저 다운 받고 그 npm에서 express를 다운 받는다. 터미널에 npm install express 눌러서 다운받는다. node-modules 라이브러리에 필요한 자료를 담는 공간 관련된 라이브러리 담겨있음 새 Web .. 2021. 9. 22.
npm 사용하기 npm 이란? https://www.npmjs.com/ node 개발팀이 만든 코드 라이브러리 말고, 다른 사람들이 만든 라이브러리를 사용하려면 라이브러리 설치를 도와주는 도구인 npm을 다운 받고서 쓸 수 있다. 즉 npm은 external module을 쓰기 위함이다. NPM: Node Package Manager nodejs 다운 받을 때 같이 다운 받아진다 npm -v 눌러서 다운 받아졌나 확인하기 npm 다운 안되면 yarn으로 해도 된다. package.json 만들기 라이브러리 어떤 걸 썼는지 기록해 놓아야하는데 package.json 이 그 역할을 한다. npm 다운 받을 때 자동으로 같이 온다. 터미널에서 npm init을 치고 나서 프로그램이 읽어지면 만들 package 이름을 넣는다... 2021. 9. 22.
맥에서 Node.js 시작, 끝내기 | 로컬 파일에 접근하기 node.js 시작하기 REPL은 Read Evaluation Print Loop로 node.js 코드를 bite sized chucks로 실행할 수 있게한다 크롬 안에 있는 콘솔처럼 사용가능하다 NodeJS 다운 받을 때 Node REPL도 자동으로 같이 다운로드된다. REPL로 접근하려면 터미널에서 node를 치면된다. > 꺽쇠 모양이 나오면 REPL 안으로 들어 왔다라는 뜻이다. 하는 방식은 크롬 콘솔과 거의 비슷하다. 명령어가 생각이 안날 때 스펠링 조금만 쓰고서 Tap 2번 누르면 가능한 명령어들이 나온다. console. 명령어를 넣고 Tap 2번 누르면 가능한 명령어들이 쭉 나온다. node.js 끝내기 REPL 끝내기 방법1 .exit 방법2 control c (^c) 두번 누르기 Node.. 2021. 9. 22.
Node JS란? 일단 html과 javascript가 무엇인지 알아보자. html 란? 웹페이지를 만들기 위한 언어이다 워드와 비슷하게 글 쓰고 그림넣는 언어 정적인 페이지만 가능하다 Javascript 란? HTML페이지에 종속된 언어이며 HTML을 조작하는 언어이다. 연산을 위해 만든 언어가 아니다. 자바스크립트는 누가 동작시키는 것일까? 브라우저가 동작시킨다. 각각 자바스크립트 동작시키는 브라우저 엔진들이 있다. 크롬: V8 인터넷익스플로어: Chakra 모질라: SpiderMonkey Node.js 의 시작 여기서 크롬의 V8 엔진을 따로 떼서 출시하게 되는데 이 것이 Node.js이다. 이로서 자바스크립트가 브라우저에서 벗어나 컴퓨터 하드웨어와 직접 소통하게 되었다. 내 컴퓨터에 있는 파일 시스템이나 네트워킹 .. 2021. 9. 22.
백엔드란? 프론트엔드란? 웹사이트 디자인 사용자와 인터렉트하는 언어 html,css, Bootstrap, Javascript, JQuery 백엔드란? 데이터베이스, 비지니스 로직, 서버 등 과 인터렉트하는 언어 java, c++, c#, python, NodeJS, Ruby 등등 풀스택 개발자는 프론트엔드와 백엔드 모두를 할 줄하는 개발자이다. 서버: html, css, js 파일 올라가는 곳 데이터베이스: 로그인, 패스워드등 정보 저장 2021. 9. 21.

티스토리툴바