Node.js - 생활코딩

생활코딩 Node.js 에서 제공하는 소스로 진행합니다.

jjgodcom의 node.js-생활코딩 바로가기에 수업한 내용을 정리합니다.

github 에 수업한내용을 공유합니다.

생활코딩 Node.js 재생목록 바로가기
  1. 수업소개
    이 수업은 JavaScript를 이용해서 Node.js를 제어해 동적으로 HTML 코드를 생성하는 웹애플리케이션을 만드는 방법에 대한 수업입니다.
  2. 수업대상
    예를들어 1억개의 페이지로 이루어진 웹사이트가 있다고 상상해보세요. 그런데 HTML 코드의 구조를 바꿔야 한다면 어떤 절망적인 상황이 생길까요? 이런 상황에서 생겨날 절망감을 상상할 수 있는 분이라면 이 수업을 통해서 혁명적인 변화를 겪을 수 있습니다
Node.js - 1.수업소개 유튜브 보러가기

영상 요약

1. 자바스크립트르 이용해서 웹브라우저가 아닌 컴퓨터를 조종하는 것을 개발했다.
Node.js - 2. 수업의 목적 유튜브 보러가기

영상 요약

기존에는 여러 개의 html 파일을 만들어서 구현을 함.
node.js를 사용하면 한 번에 중복되는 코드를 수정 가능함
(ex. ul 태그를 ol 태그로 한 번에 수정 가능)
기존에는 사용자의 참여가 제한되어 있지만 node.js를 이용하여 구현한다면 사용자가 참여할 수 있다
(ex. 읽기,수정,삭제,추가)
Nodejs - 3.설치 유튜브 보러가기
Nodejs - 3.1.설치 (Windows) 유튜브 보러가기

영상 요약

https://nodejs.org/ko/ 에서 node.js 를 설치 진행함
윈도우 + R 키 누른 후 cmd 입력하면 cmd창이 실행됨
cmd창에서 node -v 라고 입력하면 버전이 출력됨
cmd창에서 node 라고 입력 후 엔터 console.log(1+1); 를 작성했을 때 2가 출력되면 성공적
ctrl + c 를 두번누르거나 .exit 를 입력하면 나가게 됨

nodejs 폴더 생성 후 hellowrld.js 만들고 console.log(1+1); 을 저장함
emd창 에서 cd nodejs폴더경로 를 입력하면 해당 폴더로 접속함
dir 을 입력하면 해당 폴더에 어떤 파일이 있는지 출력됨
node helloword.js 엔터를 쳤을 때 2가 출력되면 성공
Node.js - 4.공부방법 유튜브 보러가기

영상 요약

node.js 를 이용하여 web application 만드는 게 목표.
Node.js - 5.Node.js로 웹서버 만들기

영상 요약

node.js 는 apache와 똑같이 웹서버로 사용이 가능하다.

main. js 새로 만든후 영상에 나오는 소스 복사함
cmd에 node main. js 엔터
주소창에 http://localhost:3000/ 치면 접속 완료
ctrl + c 누르면 서버 꺼지고 접속이 안 됨

변경한 코드를 적용하려면 껐다 켜야 함
Node.js - 6.1.JavaScript 문법 - Number Data type
Node.js - 6.2.JavaScript 문법 - String

영상 요약

6.1 영상
syntax 폴더 생성 후 number.js 생성
cmd에서 node syntax/number.js입력
(syntax 폴더의 number.JS를 실행하라는 뜻)

6.2 영상
syntax 폴더 에 string.js 생성 javascript string data count 방법 은 console.log(tetet.length); 이다.
Node.js - 7.1. JavaScript 문법 - 변수의 형식
Node.js - 7.2. JavaScript 문법 - 변수의 활용

영상 요약

syntax 폴더 에 variable.js 생성
코드의 가독성을 위해 변수를 사용함.
중복을 자제하면 좋은코드를 만들수 있다.

ex
var 변수명 = "test";
"123"+변수명+"456"
Node.js - 8.JavaScript 문법 - Template Literal

영상 요약

templete.js 생성
자바스크립트에서 문자를 표현하는 편리한 방법

줄바꿈을 할때는 역슬래쉬 \n 을 입력
`text` 를 사용하면 \n을 안써도 줄바꿈이 됨
Node.js - 9.URL의 이해

영상 요약

http://opentutorials.org:3000/mian?id=HTML&Page=12 주소가 있다고 하면

http 는 protocol(프로토콜)
웹브라우저와 웹서버가 서로 데이터를 주고받기 위한 통신규칙 이다.

opentutorials.org 는 도메인 네임,host
인터넷에 연결되어있는 컴퓨터 주소 이다.

3000 은 포트
한대의 컴퓨터 안에 여러 서버가 있을수 있으니 3000 포트에 연결되어 있는 서버에 연결이 된다.

mian 은 path
파일 경로이다.

id=HTML&Page=12 는 query string
지금 배우는 수업의 주인공이다.
쿼리스 트링은 ? 로 시작한다.
값과 값은 & 를 쓴다
값의 이름과 값은 = 로 구분한다.
Node.js - 10.URL을 통해서 입력된 값 사용하기

영상 요약

본격적으로 web application 을 만든다.

id=HTML 은 query string이다.

구글에서 nodejs url parse(분석하다 라는 뜻) query string 을 검색

쿼리스트링에 따른 다른정보를 출력함.
Node.js-11.App 제작-동적인 웹페이지 만들기

실습 소스

Watch

영상 요약

쿼리 스트링에 값에 따라 html 코드도 변하게 구현함

제목은 동적으로 바뀌지만 내용은 정적인 상태이다.
다음시간에는 본문을 요청이 왔을때만 출력하게 구현할 예정.
Node.js-12.Node.js의 파일 읽기 기능

실습 소스

Watch

영상 요약

CURD 는 핵심적인 처리 방법이다.

Create
Update
Read
Delete

nodejs 폴더 생성후 fileread.js 와 sample.txt 생성
cd .. 하면 상위 디렉토리 로 이동한다
Node.js-13.App 제작- 파일을 이용해 본문 구현

실습 소스

Watch

영상 요약

query string 에 따라 본문의 내용이 바뀌는 web application 구현을 함.
main.js가 바뀌면 껏다켜야 함
data 폴더의 데이터가 바뀌는건 바로 반영 됨
Node.js-14.JavaScript-Boolean

실습 소스

Watch

영상 요약

비교 연산자, 조건문 과 연관되어 있다.
true와 false 나누어진다
Node.js-15.JavaScript-비교연산자

실습 소스

Watch

영상 요약

비교연산자 는
==
===
<
>
이 있다.
Node.js-16.JavaScript-제어문

실습 소스

Watch

영상 요약

제어문에 대한 간단한 소개영상임.
Node.js-17.JavaScript-조건문

실습 소스

Watch

영상 요약

조건문 if문,if else문 을 사용한 실습 영상
Node.js-18.NodeJS-콘솔에서의 입력값

실습 소스

Watch

영상 요약

입력되는 값에따라 if문 을 이용하여 프로그래밍 함.
Node.js-19.1.App 제작-Not found 구현

실습 소스

Watch

영상 요약

if문을 사용하여 지정된 경로가 아닐경우에 404 Not found 페이지 출력함.

Node.js-19.2.App 제작-홈페이지 구현

실습 소스

Watch

영상 요약

queryData.id 값이 없을 경우if문을 이용하여 home 페이지 구현함
Node.js-20.JavaScript-반복문

실습 소스

Watch

영상 요약

while문에 대한 실습을 진행함
Node.js-21.JavaScript-배열

실습 소스

Watch

영상 요약

배열을 만들때는 [] 안에 값을 넣으면 된다.
배열을 읽을때는 arr[2]
배열을 업데이트 할때는 arr.push("E")
배열을 수정할때는 arr[2] = 3
Node.js-22.JavaScript-배열과 반복문

실습 소스

Watch

영상 요약

배열을 선언하고
while문을 이용하여 배열의 개수만큼 반복해서
배열에 저장된 값을 호출 및 배열의 총 합을 구함.
Node.js-23.Node.js에서 파일목록 알아내기

실습 소스

Watch

영상 요약

node.js 로 파일목록을 알아보는 실습을 진행함.
node.js file list in directory 를 구글에 검색함

filelist값는 배열로 보여준다.
Node.js-24.App 제작-글목록 출력하기

실습 소스

Watch

영상 요약

data 폴더의 파일을 불러와서
반복문으로 코드 수정없이 추가된 파일을 불러올수있게 코드를 수정함
(따라하느라 솔직히 이해가 덜됨)
``'' 의 차이점을 잘 모르겟음

``''의 차이점은 ${value} 인식유무인듯

Node.js-25.1.JavaScript 함수의 기본 문법

실습 소스

Watch

영상 요약

중복을 최대한 피하기 위해서 함수선언을 한다.

Node.js - 25.2.JavaScript 함수의 입력

실습 소스

Watch

영상 요약

함수를 이용하여 입력 및 출력을 함.
함수는 입력값(인자값)을 받을수 있다.

Node.js-25.3.JavaScript-함수의 출력

실습 소스

Watch

영상 요약

return 을 이용하여 함수를 출력함
return 을 만나는 즉시 이 함수는 종료가 됨
Node.js26.App 제작-함수를 이용해서 정리 정돈하기

실습 소스

Watch

영상 요약

함수를 이용하여 main.js 에 중복되는 코드를 최소화 함
Node.js-27.수업의 정상

영상 요약

자바스크립 라는 컴퓨터 언어로
node.js 의 기능을 제어해서
웹 어플리케이션을 만들고 구동시키는 방법을 배운것이다.
이 이후 강의는 공부를 더 하고싶으면 들으라는 영상인듯
Node.js-28.1.Nodejs에서 동기와 비동기 1

영상 요약

node.js는 비동기적 처리를 하기위한 아주좋은 기능이 많다.
비동기란 무엇인가를 살펴볼것이다.
효율적이지만 매우 복잡하다.

Node.js-28.2.Nodejs에서 동기와 비동기 2

실습 소스

Watch

영상 요약

fs.readFileSyncfs.readFileSync 의 사용법에 대해 실습함. Sync가 없으면 비동기적 방식이다.

Node.js-28.3.JavaScript-callback

실습 소스

Watch

영상 요약

콜백 함수에 대해 실습함.
Node.js-29.Node.js의 패키지 매니저와 PM2

영상 요약

NPM 패키니 매니저 에대해서 강의
http://pm2.keymetrics.io/

cmd 창에 npm install pm2 -g (설치)
pm2 start main.js (main.js 실행)
pm2 monit (현재 실핼중인 소스 보여줌) q버튼을 누르면 나가짐
pm2 list (현재 실행 중인 프로세스 리스트 보여줌)
pm2 stop main (main 프로세스 끔)
pm2 start main.js --watch (이걸 써야지 코드수정해도 자동으로 껏다켜짐)
pm2 log (어떠한 문제점이 있을때 바로 보여줌)
pm2 start main.js --watch --ignore-watch="data/*"(data 디렉토리에 대해서는 watch를 하지 않도록 설정)
Node.js-30.HTML-form

실습 소스

Watch

영상 요약

사용자가 각각 입력한 정보를 서브밋 버튼을 눌럿을때 액션속성이 가르키는 서버로 쿼리 스트링으로 전송하는 html 기능이다.
서버에 보낼때는 눈에 보이지 않는 방법으로 보내야 한다.

받을때는 get방식
서버에 보낼때는 반드시 post방식으로 해야함
Node.js-31.App 제작-글생성 UI 만들기

실습 소스

Watch

영상 요약

pathname에 따른값으로 페이지 이동후
form 태그를 이용한ui 구현을함
Node.js-32.App 제작-POST 방식으로 전송된 데이터 받기

실습 소스

Watch

영상 요약

사용자가 form으로 post방식으로 전달한것을 node.js안에서 가져오기 위한 방법에 대해 실습

post 방식은 전달할떄 데이터가 너무 많으면 프로그램이 꺼지거나 터진다
post로 보낸값을 받는 함수를 만듬.
Node.js-33.App 제작-파일생성과 리다이렉션

실습 소스

Watch

영상 요약

nodejs file write 구글에 검색

사용자가 보낸 정보로 파일 생성함

리다이렉션은 해당 페이지에서 동작이 끝낫을때 다른페이지로 팅겨버리는것

nodejs redirection 을 검색함.

파일을 만드는 동시에 해당 페이지로 넘어감
Node.js-34.App 제작-글수정-수정링크생성

실습 소스

Watch

영상 요약

update 하는 페이지를 구현
단 메인에서는 출력이 안되고 나머지 페이지에서만 됨.
Node.js-35.App 제작-글수정-수정할 정보 전송

실습 소스

Watch

영상 요약

input hidden을 이용하여 사용자가 보내준 정보를 확인함
Node.js-36.App 제작-글수정-파일명 변경, 내용저장

실습 소스

Watch

영상 요약

nodejs file rename검색

rename() 을 이용하여 update에서 파일 이름, 본문내용을 수정하고 저장함
Node.js-37.App 제작-글삭제-삭제버튼 구현

실습 소스

Watch

영상 요약

삭제버튼은 링크로 만들면 안됨!
삭제버튼을 구현함
Node.js-38.App 제작-글삭제 기능 완성

실습 소스

Watch

영상 요약

nodejs delete file검색

unlink()를 사용하여 거존에 있던 파일 삭제함
Node.js-39.JavaScript 객체의 형식

실습 소스

Watch

영상 요약

객체와 배열은 정보를 정리하는 수단

객체는 순서가 없는 정보 {}
배열은 순서가 있는 정보 []
Node.js-40.JavaScript-객체-반복

실습 소스

Watch

영상 요약

객체와 반복문을 같이 사용하는 방법에 대해 실습함.
Node.js-41.JavaScript-객체-값으로서 함수

실습 소스

Watch

영상 요약

함수를 여러 방법으로 선언하는 방법에 대해서 실습
Node.js-42.JavaScript-객체-데이터와 처리 방법을 담는 그릇으로서 객체

실습 소스

Watch

영상 요약

변수안에 여러개의 평션을 만들고 호출하는 방법을 실습함 this라는 값으로 처리함
Node.js43.App제작-템플릿 기능 정리정돈하기

실습 소스

Watch

영상 요약

변수안에 중복되는 함수를 정리하여 리팩토링 진행함
Node.js-44.Node.js 모듈의형식

실습 소스

Watch

영상 요약

모듈이 어떤것인가 실습함

module.exports = M; // M이란는것을 모듈로 적용함
var part = require('./mpart.js'); // 파일 불러오기
part.f(); // part에 f를 호출한다.
Node.js-45.App 제작 - 모듈의 활용

실습 소스

Watch

영상 요약

모듈을 이용하여 main.js 소스코드 정리함.
Node.js-46.App 제작-입력정보에 대한 보안

실습 소스

Watch

영상 요약

nodejs path parse 검색

주소상에 경로로 파일을 열람할수 있으니 보안하는 방법에 대해 간략히 설명함
Node.js-47.1.App제작-출력정보에 대한 보안

실습 소스

Watch

영상 요약

데이터를 받을때 script로 자바를 보내면 실행이 된다.
< 는 엔티티코드를 이용하여 필터링 해준다.
엔티티코드 관련 링크는 https://www.toptal.com/designers/htmlarrows/ 입니다.

Node.js-47.2.App제작-출력정보에 대한 보안

실습 소스

Watch

영상 요약

사용자가 입력한 정보를 웹으로 출력할떄 오염된 정보가 있다면 소독하는게 목표이다.

npm sanitize html 검색
npm init 엔터
디폴트로 끝날때까지 엔터
npm install -S sanitize-html 엔터

을 설치하면 node_modules 이라는 폴더가 생성됨

Node.js-47.3.App제작-출력정보에 대한 보안

실습 소스

Watch

영상 요약

예민한 테그가 있다면 사용하지 않음.
설정을 하지 않으면 내용은 살리지만 태그는 죽인다.
Node.js-48. API와 CreateServer

영상 요약

http.createServer 라는 함수에 대해서 설명.
Node.js-49.수업을마치며

영상 요약

DB
MongoDB
MYsql

framwork

node.js AWESOME 검색하면 많은 자료가 나올것이다.
API
mpdule