Node.js (3)

송예원·2024년 9월 25일
node.js
0

node.js

목록 보기
3/6

24. App 제작-글목록 출력하기

fs.readdir('./data', function(error, filelist){
          var list = '<ul>';
          var i = 0;
          while(i < filelist.length){ 
            list = list + `<li><a href="/?id=${filelist[i]}">${filelist[i]}</a></li>`;
            i = i + 1;
          }
          list = list+'</ul>';

=> `, $ { }을 이용하면 이용할수록 코드가 간결해짐!

25.1/ 2/ 3. JavaScript 함수의 기본 문법/ 입력/ 출력

- 함수 사용 이유: 중복의 효과적인 제거를 위해

=> 코드의 재활용성, 가독성 증가

-

function 함수_이름 (매개변수) {
	함수_내용
    }

ex) 

function f123() {
  console.log(1);
  console.log(2);
  console.log(3);
  console.log(4);
}
f123();
> 1
2
3
4

- 입력받아 매개변수로 전달해야 함수에서 사용 가능

- return: 함수의 실행값 반환, 형식에 구애받지 않고 사용 가능함
(파일, 콘솔 ... 어디서든 사용 가능)
return 뒤의 실행문은 실행되지 않음 (함수 종료)

26. App 제작-함수를 이용해서 정리 정돈하기

+) 함수를 코드 맨 뒤에 입력해도 먼저 실행되는 이유 (실행될 수 있는 이유): 호이스팅 방법때문

- 함수를 선언한 뒤 많이 쓰이는 (재사용률이 높은) 코드를 작성하면
짧게, 쉽게 사용 가능 (매개변수만 잘 받아준다면...)

28.1. Nodejs에서 동기와 비동기 1

- 동기적: 순차적으로 일 진행 (단순, 비효율적)

- 비동기적: 병렬적으로, 동시에 일 진행 (복잡, 효율적)

28.2. Nodejs에서 동기와 비동기 2

- sync: 있으면 동기적으로, 없으면 비동기적으로 처리

var fs= require ('fs'); //fs는 sample파일, B 담겨있음
console.log('A');
var result = fs.readFileSync('syntax/sample.txt', 'utf8');
console.log(result);
console.log('C');
> A
B
C
//동기적으로 실행-> 순차적으로 실행됨
var fs= require ('fs'); //fs는 sample파일, B 담겨있음
console.log('A');
fs.readFile('syntax/sample.txt', 'utf8', function(err, result){
    console.log(result);
});
// 파일 읽기가 끝난 후 콜백함수 실행
console.log('C');
// 비동기적으로 실행-> (노드가 선호) => callback 필요
> A
C
B

// 비동기적으로 작업해야 노드의 생산성이 높아짐! `

28.3. JavaScript-callback

https://velog.io/@ko1586/Callback%ED%95%A8%EC%88%98%EB%9E%80-%EB%AD%94%EB%8D%B0

- callback이 사용되면 시간이 흐른 후 (앞 코드들 모두 실행)
해당 함수에 callback된 함수를 실행

var a = function(){
  console.log('A');
}
function slowfunc(callback){
  callback();
} 
slowfunc(a);
function a() {
	console.log('A');
}
a();

==

var a= fnuction() {
	console.log('A');
}
a();

29. Node.js의 패키지 매니저와 PM2

- 패키지: 패키지 매니저:
노드에서 사용되는 모듈을 효과적으로 관리할 수 있게 도와주는 도구

- NPM: 노드 설치시 함께 설치됨, 노드에서 가장 많이 쓰는 패키지 매니저

- PM2 활용하면 수정시 자동 새로고침 등...
=> 노드 애플리케이션 관리하는 프로세스 매니저

=> pm2라는 npm을 이용해서 node.js가 계속 켜져 있도록 유지할 수 있고 내용 수정 시에 자동으로 즉시 반영 되도록 할 수 있다.

30. HTML-form

- form: 사용자가 서버쪽으로 데이터를 전달하기 위해 사용하는 기능

<input type="text">= 텍스트 입력받기
<textarea>= 텍스트 여러줄 입력받기
<p></p>= 줄바꿈
<input type="submit">= 텍스트 내용 서버에 전송
<form action="주소"></form>= 주소로 form태그 안에 있는 정보를 전달=> 쿼리스트링 만들어짐

단, 서버에 보낼 때 URL로 보내면 안되는데...
=> method post 사용->

<form action="http://localhost:3000/process_create" method="post">
  <p><input type="text" name="title"></p>
  <p>
    <textarea name="description"></textarea>
  </p>
  <p>
    <input type="submit">
  </p>
</form>

서버에 데이터 전송, 삭제 -> method= post
... -> get/ X

31. App 제작-글생성 UI 만들기

placeholder: 뭘 입력할지 알려주는 가이드...

var http = require('http');
var fs = require('fs');
var url = require('url');
function templateHTML(title, list, body){
  return `
  <!doctype html>
  <html>
  <head>
    <title>WEB1 - ${title}</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h1><a href="/">WEB</a></h1>
    ${list}
    <a href="/create">create</a>
    ${body}
  </body>
  </html>
  `;
}
function templateList(filelist){
  var list = '<ul>';
  var i = 0;
  while(i < filelist.length){
    list = list + `<li><a href="/?id=${filelist[i]}">${filelist[i]}</a></li>`;
    i = i + 1;
  }
  list = list+'</ul>';
  return list;
}
var app = http.createServer(function(request,response){
    var _url = request.url;
    var queryData = url.parse(_url, true).query;
    var pathname = url.parse(_url, true).pathname;
    if(pathname === '/'){
      if(queryData.id === undefined){
        fs.readdir('./data', function(error, filelist){
          var title = 'Welcome';
          var description = 'Hello, Node.js';
          var list = templateList(filelist);
          var template = templateHTML(title, list, `<h2>${title}</h2>${description}`);
          response.writeHead(200);
          response.end(template);
        });
      } else {
        fs.readdir('./data', function(error, filelist){
          fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){
            var title = queryData.id;
            var list = templateList(filelist);
            var template = templateHTML(title, list, `<h2>${title}</h2>${description}`);
            response.writeHead(200);
            response.end(template);
          });
        });
      }
    } else if(pathname === '/create'){ //pathname이 /create이면 input받기
      fs.readdir('./data', function(error, filelist){
        var title = 'WEB - create';
        var list = templateList(filelist);
        var template = templateHTML(title, list, `
          <form action="http://localhost:3000/process_create" method="post">
            <p><input type="text" name="title" placeholder="title"></p>
            <p>
              <textarea name="description" placeholder="description"></textarea>
            </p>
            <p>
              <input type="submit">
            </p>
          </form>
        `);
        response.writeHead(200);
        response.end(template);
      });
    } else {
      response.writeHead(404);
      response.end('Not found');
    }
});
app.listen(3000);

32. App 제작-POST 방식으로 전송된 데이터 받기

- <form action="해당 주소" method="post">를 이용해
post 방식으로 해당 주소에 데이터를 보냈을 때 해당 주소에서 데이터를 받는 방법

else if(pathname === '/create_process'){
      var body = '';
      request.on('data', function(data){
          body = body + data;
      }); //콜백이 실행될 때마다 데이터 추가-> body에 저장
      request.on('end', function(){
          var post = qs.parse(body); // 데이터 전송이 멈추면 두 번째 qs.parse로 객체 형태 데이터를 뽑아낸 후 key값으로 데이터에 접근
          var title = post.title; 
          var description = post.description
      });
      response.writeHead(200);
      response.end('success');

33. App 제작-파일생성과 리다이렉션

- post로 받은 데이터를 파일로 받는 방법

 fs.writeFile(`data/${title}`, description, 'utf8', function(err){
            response.writeHead(302, {Location: `/?id=${title}`}); //302: 리다이렉션, Location: 리다이렉션 시키고싶은 주소
            response.end();

- 리다이렉션: 사용자를 다시 다른 페이지로 보내 동작하게 만드는 것

34. App 제작-글수정-수정링크생성

- 수정 (update): 특정 링크에서만 작동하도록 제작

profile
송예원
이전 포스트

Node.js(2)

다음 포스트

Node.js (4)

0개의 댓글