개발공부 기록지

Express :  Node.js 를 위한 웹 어플리케이션 프레임워크  -expressjs.com-

Node.js?  cross-platform( Linux, macOs, Windows), open-source, JavaScrpit rumtime environments

Express 관련 문서가 있는 사이트

https://expressjs.com/en/guide/routing.html

Installing

※ Node.js 는 설치되어 있다고 가정

$ npm init

• npm : Software registry(library), open-sourse develper 들이 소스를 공유하기위해 사용
• npm init 을 실행하면 package.json 이 생성됨
  • Node.js ecosystem(이게 뭘까??)의 핵심
  • Node.js, npm, javaScript를 이해하고 작업하는데 기초적인 중요 요소
  • 응용 프로그램, 모듈, 패키지 등에 대한 정보를 저장하는 매니페스트로 사용
    • manifest??-> 무엇이 있는지 기록되어있는 목록
      • [사전]:(v) to show something cleary, through sings or actions
                   (n) a list of people and goods carried on a ship or plane

$ npm i express

• install express

서버코드 작성

// respond with "hello world" when a GET request is made to the homepage

• app.get(’/’, (req, res) ⇒ …)    Get method를 app 의 root 에 정의
  • respond with "hello world" when a GET request is made to the homepage 
    • 홈페이지 주소를  입력해서 접속 => GET request => reponse로  "Hello world!!" 출력
  • app.get() : Get requests를 다루기 위한 메소드
  • res.send ()
    • res (reponse) : object  → send a respones to client
      • client: 서버에 데이터를 요청한 어떤 것/ 사람
    • This route path will match requests to the root route, "/".
  • req 
    • req (request) : object
• app.listen(port, () ⇒ …) ?
  • 원하는 port 에 서버를 오픈, ()=>: 서버오픈시 실행할 코드

<정리> 웹 서버 구축 순서

1. 폴더생성 -> 폴더에서

npm init
npm i express

2. app.js 생성 후 서버 실행 

• node app.js

# 앞으로 데이터를 json 형식으로 주고 받을 예정이므로 chrom에 아래 링크된 확장자 설치하면 json을 보기 편함

Repositoy 이름 변경

StudyNodeJs => StudyExpress

remote: This repository moved. Please use the new location:
remote:   https://github.com/JW0203/StudyExpress.git
To https://github.com/JW0203/StudyNodeJs.git

-> l

-> origin 지우고 재설정

• 객체를 효율적이고 안전하게 만들기 위해서 만들어진 문법
• 클래스는 상태( = 속성, 필드, 특성, 멤버변수)와 행위 (기능, 메서드, 함수) 를 가지고 있다. 
• 실생활에서 사용하는 개념(사물, 사람, 기계 등을) 코드로 표현하기 위한 수단..

구성:  클래스 생성자 인스턴스

• 클래스 = 설계도
• 인스턴스 = 설계도를 통해 만들어진 실체화된 객체
• 생정자 =  인스턴스를 만들 때 사용하는 것

(예시) 자동차 클래스

= 선언된 클래스를 다른 파일에 불러오는 방법 :: python에 있는 import 기능

-- makeCarClass.js -- 

module.exports = makeCarClass;< 선언된 클래스가 있는 코드명>

-- app.js ----

const Car = require('./makeCarCalss) < 코드명을 입력해서 클래스 호출>

const car = new Car("아반떼", 90);

※ 한 코드 파일에 여러가지( 객체, 배열, 함수, 클래스) 가 있다면

1. 앞에 export 붙여주면 된다.

2.  마지막에 module.exports= { 다시 사용 할 객체, 배열, 함수, 클래스}

//myTest.js

export const myArr = [1,2,3,4];
export const myObject = {name: a, age: 30};
export function myfuntion(){
  for (let i = 1; i < 10; i++) {
	//code..
  }
}
export class Car{
	//code...
}

// 앞에 export를 안적었다면
module.export ={myArr, myObject, myfunctioin, Car}

// app.js
const { myArr, Car} = require('./myTest');


// 아래는 새로운 문법인가? 
// https://ko.javascript.info/import-export
import * as test from "./myTest.js" //전부 호출
import {myArr, Car} from "./myTest.js" // 호출하고 싶은것만

클래스  + 객체

▶객체를 class의 입력으로 사용할 때 아래와 같이 객체의 key를 이용해서 각 key에 있는 value값을 받을 수 있다.

(비구조화 할당 활용)

class Student{
    constructor({name, krScore, enScore}){
        this.name = name;
        this.krScore = krScore;
        this.enScore = enScore;
    }
    //code...
 }

1. Github Gist https://gist.github.com/

2.Carbon https://carbon.now.sh/

3. color scripter https://colorscripter.com/

화살표 함수 Arrow function

• 기본형태

let functionName = (argument1, arg2, ...argN) => expression;

let double = (n) => n * 2;

let double = function(n) { 
	return n*2;
 }

• forEach(), map(), filter() 속에서도 가능

array.forEach(element => {
    //code
});

• array.filter() 는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환
  

const result = studentsInfo.filter(({ score }) => score >= 90);

//https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);

• array.map() 는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환

names = result.map(({ name }) => name);

//https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map
const array1 = [1, 4, 9, 16];
const map1 = array1.map(x => x * 2);