whenever purple

ORM이란?

ORM(Object Relational Mapping)은 객체와 관계와의 설정을 의미한다.

더 자세히 말하자면, 말하는 객체(Object)는 OOP (Object_Oriented Programming)의 객체로 구현되는 클래스와 RDB (Realational DataBase)에서 쓰는 데이터인 테이블을 자동을 연결하는 것을 의미한다. 클래스와 테이블은 서로 호환가능성을 두고 만들어진 것이 아니기때문에 일치하지 않는데, 이를 ORM을 통해 객체 간의 관계를 바탕으로 SQL문을 자동으로 생성하여 불일치를 해결한다. 

ORM의 장점

1. 객체 제향적인 코드로 인해 더 직관적이고 비즈니스 로직에 더 집중할 수 있게 도와준다. 

• ORM을 이용하면 SQL문이 아닌 직관적인 코드로 데이터를 조작하여, 객체 지향 프로그래밍에 집중할 수 있다. 
• 선언문, 할당, 종료 같은 부수적인 코드를 줄일 수 있다. 
• 각종 객체에 대한 코드를 별도로 작성하여 가독성을 높일 수 있다.
• SQL의 절차적이고 순차적인 접근으로 객체지향적 접근만 고려되어 생산성이 증가할 수 있다. 

2. 재사용, 유지보수, 리팩토링이 편리하다. 

• ORM은 기존 객체와 독립적으로 작성되어 있어, 해당 객체들은 재활용 할 수 있다.
• 매핑정보가 명확하여 ERD를 보는 의존도를 낮출 수 있다.

3. DRMS (DataBase Management System)에 대한 종속성이 줄어든다. 

• 대부분 ORM솔루션은 DB에 종속적이지 않다. (구현방법과 많은 솔루션, 자료형 타입까지 종속적이지 않다.)
• 개발자는 객체(Object)에 집중함으로서 극단적으로 DBMS를 교체하는 큰 작업에도 리스크가 적고 소요시간도 줄어든다. 
• 자바에서 가공할 경우 equals, hashCode의 오버라이드 같은 기능을 이용할 수 있고 빠르게 가공할 수 있다.

ORM의 단점

1. ORM으로만 서비스를 구현하기 어렵다. 

• 사용하기는 편리하지만, 설계는 매우 신중하게 해야한다. 
• 프로젝트 복잡성이 커질 경우 난이도 또한 올라가며, 부족한 설계로 속도 저하나 일관성을 무너뜨리는 문제점이 생길 수 있다.

2. 절차가 많은 시스템에는 ORM의 객체 지향적인 장점을 활용하기 어렵다.

• 절차가 많은 시스템에서는 다시 객체로 바꿔야하며, 그 과정에서 생산성 저하 또는 리스크가 많이 발생할 수 있다. 

ORM과 Node.js 프레임워크

ORM은 Node.js 추상화계층의 고려해야할 가장 높은 수준의 추상화이다. ORM의 요점처럼 관계형 데이터 베이스의 데이터를 애플리케이션의 객체에 매핑하는 것이다. Node.js ORM, Sequelize는 Postgres, MySQL, MariaDB, SQLite 등을 지원하는 Promize에 기반한 비동기로 동작한다.

아래의 블로그를 참고하여 작성되었습니다. 

https://yceffort.kr/2021/07/dont-use-nodjs-orm

Node.js 프로젝트를 

활성화시키면서 자동적으로 만들어지는

"package.json"

에 대해서 알아보고자 한다.

npm 이란?

npm은 Node Package Manager의 약어로, 명칭 그대로 노드 패키지 매니저이다.

노드가 자바스크립트 프로그램을 컴퓨터에서도 실행할 수 있게 해준다. 

자바스크립트 프로그램은 패키지로 npm에 등록되어 있으며

특정 기능의 패키지가 필요하다면 npm 에서 찾아 설치하면 된다.

package.json

프로젝트에 필요한 패키지를 추가하다보면 패키지가 어마어마해진다.
사용하는 패키지는 저마다 고유한 버전이 있으며,
동일한 버전을 설치하지 않으면 문제가 생길수 있다. 

이때 설치한 패키지의 버전을 관리하는 파일을
package.json 이라고 한다.

package.json 설치하기

프로젝트를 시작하기 전에 폴더 내부에 무조건 package.json부터 만들고 시작해야 한다!

npm init -y

* -y : 모든 항목에 Yes를 한다는 의미이다.

프로젝트 이름, 설명 등을 작성하고 싶다면, 

'npm init'로 실행시키고 콘솔창에서 작성할 수 있다.

아래의 형식으로 package.json 미리보기가 나온다.

{
  "name": "프로젝트 이름",
  "version": "프로젝트 버전",
  "description": "프로젝트 설명",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "작성자 이름",
  "license": "ISC",
  }
}

package.json 작성시 알아두기

package name :

패키지 이름으로 Package.json의 name 속성에 저장된다. 

version :

패키지 버전은 SemVer의 방식의 버전 넘버링을 따라 항상 세자리로 이루어져 있다. 

package.json에 가장 중요한 항목은 "name" 과 "version" 이다.

이 2가지 항목을 통해 패키지 고유성을 판별하게 된다.

필수 항목이며, 해당 내용이 없으면 패키지를 설치 할 수 없다.

description :

문자열로 기입해야하며, 

npm search로 검색된 리스트에 표시되어 만들어진 패키지를 찾고 이해하는 도움을 준다. 

entry point :

자바스크림트 실행파일 진입점. 보통 마지막으로 module.exports를 하는 파일을 지정한다. 

package.json의 main속성에 저장된다.

test commend : 

코드 테스트 시 입력하는 명령어를 의미한다.

package.json scripts 속성안의 test 속성에 저장된다.

git repository :

코드를 저장해둔 깃 저장소 주소를 의미한다.

소스에 문제가 생기면 사용자들이 이 저장소에 방문에 문제를 제기하거나

코드 수정본을 올릴 수 있다. package.json repository 속성에 저장된다.

keywords : 키워드를 문자열 배열로 설명되며,

npm search로 검색된 리스트에 표시되어 만들어진 패키지를 찾고 이해하는 도움을 준다.

bugs :

프로젝트의 이슈와 버그 트레킹을 볼수있는 url 또는 이슈를 알릴 email 주소를 입력한다. 

패키지 사용자가 문제가 있을 시 도움을 줄 수 있다.

 license : 

패키지 사용자들이 만들어진 패키지를 사용하기 위해 어떻게 권한을 얻고,

어떤 금기 사항이 있는지 이해하기 위해 라이센스를 명시해야 한다. 

dependencies :

패키지 설치시, 패키지 이름과 함께 설치된 버전이 저장된다.  

devDenpendencies :

패키지 모듈을 이용하는 사람이라면, 패키지 테스트 및 문서 작성에 사용되는

외부 프레임 워크는 다운로드를 원하지 않을 것이다. 

이러한 경우, devDependencies 객체에 디펜던시를 추가하는 것도 좋은 방법이다.  

더 자세한 사항은 아래의 링크를 참조할 수 있다.

https://docs.npmjs.com/cli/v8/configuring-npm/package-json

JavaScript에서 ES 란?

ECMASCRIPT의 약어를 뜻하며, 자바스크립트의 표준, 규격을 나타내는 용어이다.

모든 브라우저에서 동작할 수 있는 표준화된 자바스크립트가 필요해지면서

비영리 표준화 기구인 ECMA 인터네셔널에 자바스크립트의 표준화를 요청하였다.

ES5 는 2009년도에 HTML5와 함께 출연한 표준 사양이며,

ES6는 2015년에 버전업을하여 출시한 버전이다. 

ES6 이후로도 매년 업데이트가 되고 있고, 이후를 '모던 자바스크립트'라고 부른다.

아래에는 ES6에 포함된

let, const 키워드 /  화살표 함수 / 클래스 / 모듈 다루고 있다.

let, const 키워드

ES5

ES5의 변수 선언 방법은 var가 유일하다.

var :  선언과 초기화가 동시에 실행 

단점: 

함수 레벨 스코프 지원 → 지역변수를 전역변수로 사용남발

var키워드 생략 허용 → 암묵적 전역변수 양산

변수 중복 선언 허용 → 변수값의 의도치 않은 변경

변수 호이스팅  → 선언하기 이전에 참조

ES6

 var 키워드의 단점을 보완하기위해

let과 const 키워드가 도입되었다. 

const : 상수(변하지 않는 값, 재할당 x)

let : 재할당이 가능한 값

블록 레벨 스코프 → 지역변수{ } 에서 사용된 변수는 코드 블로내에서만 유효

변수 중복 선언 금지 →  중복 선언시, 문법에러가 발생

호이스팅 → 변수 선언 이전에는 참조할 수 없다. 

변수 선언에는 기본적으로 const를 사용하고, 

let은 재할당이 필요한 경웨 한정하여 사용하는 것이 좋다. 

전역 변수 (Global scope)
전역에서 선언된 변수이며, 어디에서든지 참조할 수 있다. 

지역 변수 (Local scope of Function-level scope)
지역(함수) 내에서 선언된 변수이며, 그 지역과 그지역의 하부지역에서만 참조할 수 있다.

함수 레벨 스코프 (Function-level scope) 
함수 내에서 선언된 변수는 함수 내에서만 유효, 함수 외부에서는 참조할 수 없다. 
즉, 함수 내부에서 선언변수는 지역변수 / 함수 외부에서 선언한 변수는 전역  변수

블록 레벨 스코프 (Block-level scope)
모든 코드 블록(함수 if문, for문, while문, try/catch 문 등)내에서 선언된 변수는 코드 불록 내에서만 유효, 
코드 블록 외부에서는 

화살표 함수(Arrow function)의 선언

화살표 함수는 function키워드 대신 (=>)를 사용하여 함수를 선언한다.

// 매개변수 지정 방법
    () => { ... } // 매개변수가 없을 경우
     x => { ... } // 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다.
(x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다.

ES5보다  ES6의 화살표 함수는 좀더 간결하게 표현된다.

// ES5
var pow = function (x) { return x * x; };
console.log(pow(10)); // 100

// ES6
const pow = x => x * x;
console.log(pow(10)); // 100

기존의 함수와 this 바인딩이 다르며,

Lexical this를 지원하므로 콜백함수로 사용하기 편리하다.

(이 부분은 추가적으로 공부가 필요할 것같다.)

클래스(Class)

ES5

생성자 함수와 프로토타입, 클로저를 사용하여

객체 지향 프로그래밍을 구현하였다.

// ES5
var Person = (function () {
  // Constructor
  function Person(name) {
    this._name = name;
  }

  // public method
  Person.prototype.sayHi = function () {
    console.log('Hi! ' + this._name);
  };

  // return constructor
  return Person;
}());

var me = new Person('Lee');
me.sayHi(); // Hi! Lee.

console.log(me instanceof Person); // true

ES6

기존 방식보다 단순명료한 새로운 문법으로 Class함수가 추가 되었다.

// 클래스 선언문
class Person {
  // constructor(생성자)
  constructor(name) {
    this._name = name;
  }

  sayHi() {
    console.log(`Hi! ${this._name}`);
  }
}

// 인스턴스 생성
const me = new Person('Lee');
me.sayHi(); // Hi! Lee

console.log(me instanceof Person); // true

(디테일한 내용은 추가 공부가 필요할것같다.)

모듈 (Module)

모듈은 애플리케이션을 구성하는 개별적 요소로서 재사용이 가능한 코드 조각을 말한다. 

모듈은 세부 사항을 캡슐화하고 공개가 필요한 API만을 외부에 노출한다.

모듈은 파일단위로 분리되어 있으며 필요에 따라 모듈을 로드하여 재사용한다. 

script 태그에 type="module" 을 추가하면 모듈로서 동작한다. 

ES6 모듈의 파일 확장자는 모듈임을 명확하기 위해 mjs를 사용하도록 권장한다.

<script type="module" src="lib.mjs"></script>
<script type="module" src="app.mjs"></script>

모듈은 모듈 스코프를 가진다. 

모듈 내에서 var 키원드로 선언한 변수는 더이상 전역 변수가 아니며

window 객체 프로퍼디도 아니다.

// foo.mjs
var x = 'foo';

console.log(x); // foo
// 변수 x는 전역 변수가 아니며 window 객체의 프로퍼티도 아니다.
console.log(window.x); // undefined

// bar.mjs
// 변수 x는 foo.mjs에서 선언한 변수 x와 스코프가 다른 변수이다.
var x = 'bar';

console.log(x); // bar
// 변수 x는 전역 변수가 아니며 window 객체의 프로퍼티도 아니다.
console.log(window.x); // undefined

<!DOCTYPE html>
<html>
<body>
  <script type="module" src="foo.mjs"></script>
  <script type="module" src="bar.mjs"></script>
</body>
</html>

Export: 외부에 공개하여 다른 모듈들이 참조할 수 있게한다.

// lib.mjs
const pi = Math.PI;

function square(x) {
  return x * x;
}

class Person {
  constructor(name) {
    this.name = name;
  }
}

// 변수, 함수 클래스를 하나의 객체로 구성하여 공개
export { pi, square, Person };

Import: 모듈에서 공개한 (export)한 대상을 로드하려면 import 키워드를 사용한다.

아래의 import 3가지 방식을 참고할 수 있다.

// app.mjs
// 같은 폴더 내의 lib.mjs 모듈을 로드.
// lib.mjs 모듈이 export한 식별자로 import한다.
// ES6 모듈의 파일 확장자를 생략할 수 없다.
import { pi, square, Person } from './lib.mjs';                      // import 첫번째 방식
import * as lib from './lib.mjs';                                    // import 두번째 방식
import { pi as PI, square as sq, Person as P } from './lib.mjs';     // import 세번째 방식

console.log(pi);         // 3.141592653589793
console.log(square(10)); // 100
console.log(new Person('Lee')); // Person { name: 'Lee' }

<참고용>

lib.mjs / app.mjs / html 에서 import와 export 동작 사용방법 

// lib.mjs
export default x => x * x;

// app.mjs
// 브라우저 환경에서는 모듈의 파일 확장자를 생략할 수 없다.
// 모듈의 파일 확장자는 .mjs를 권장한다.
import square from './lib.mjs';

console.log(square(10)); // 100

<!DOCTYPE html>
<html>
<body>
  <script type="module" src="./lib.js"></script>
  <script type="module" src="./app.js"></script>
</body>
</html>

'오늘의 계절, 오늘의 노래' 라는 프로젝트를 진행하면서

JWT방식으로 로그인+회원가입을  프로그래밍을 해보았지만, 

JWT와 친해지지 않아 자세히 알아보기로 해보았다.

JWT 는 무엇일까?

JWT는 JSON Web Token의 약자로 전자 서명 된 URL-safe (URL로 이용할 수있는 문자 만 구성된)의 JSON입니다.

JWS (Jason Web Signature) : JSON을 암호화하여 URL-safe 문자열로 표현한 것

JWE (Jason Web Encryption) : JSON 데이터 구조를 사용하여 암호화 방법

*URL Safe : URL에 포함 할 수 없는 문자를 포함하지 않는 것

JWT 토큰 구성

JWT 토큰 구성은 헤어(header) + 페이로드(payload) + 서명(Signature)로 구성되며,

각 부분은  Base64로 인코딩 되어 표현된다. 

헤어(header) : 토큰의 유형 (JWT) +  HMAC, HS256(SHA256) 또는 RSA와 같은 해시 알고리즘을 나타낸다.

페이로드(payload) : 토큰에 담을 (name/value)를 한쌍으로 이룬 클레임(claim)정보를 나타낸다. 
                                   클레임 정보는 등록된 클레임, 공개 클레임, 비공개 클레임으로 나뉜다.

서명(Signature) : secret key를 포함하여 암호화 되어있다.

JWT Process 

- 클라이언트의 로그인 정보를 서버에 저장하지 않아, 토큰기반 인증 메커니즘을 제공한다.

- 로그아웃 시, 로컬 스토리지 저장된 JWT 데이터를 제거한다.

 JWT의 적용

• 회원인증 : JWT의 가장 흔한 방법 
• 정보교류 : 두 개체 사이에서 안정성있게 정보를 교환하기에 좋은 방법이다.  
                  정보가 서명되어있기 때문에, 보낸이가 바뀌진 않았는지 도중에 조작되지 않았는지 확인할 수 있다.

JWT 장점  

• 사용자 인증에 필요한 모든 정보는 토큰 자체에 포함되어 별도 인증 저장소가 필요없다.
• 디버깅 및 관리가 용이하다.
• 트래픽 부담이 낮다.    
• 독립적인 JWT

JWT 단점 

• 더 많은 정보를 입력할수록 토큰이 커져 네트워크 부하를 줄 수 있다. 
• JWT는 상태를 저장하지 않아 제어가 어렵다. 
• 임의로 토큰을 삭제할 수 없어 '토큰 만료 시간'을 꼭 넣어주어야 한다.
• Payload 는 암호화 한 것이 아니기 때문에
• JWE를 암호화 하거나 Payload에 중요한 데잉터를 넣지 말아야한다.

opennaru blog, 'JWT(JSON Web Token) 이해와 활용' 참고하였습니다.

http://www.opennaru.com/opennaru-blog/jwt-json-web-token/

- CSS 사용하기 (구글웹폰트, 이미지 넣기)
- 부트스트랩사용하기
- 포스팅박스 만들기

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"></script>

    <title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
   <link href="https://fonts.googleapis.com/css2?family=Poor+Story&display=swap" rel="stylesheet">
    <style>
        *{
            font-family: 'Poor Story', cursive;
        }
        .mytitle {

            max-width: 100%;
            height: 600px;

            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://img.vogue.co.kr/vogue/2021/12/style_61c299401f4b3.jpeg");
            background-position: center;
            background-size: cover;

            color: white;

            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .card {
            max-width: 95%;
            width: 500px;
            height:100px;

            margin: 10px auto 0px auto;
        ;
        }
        .mypost {
            max-width: 95%;
            width: 500px;
            height: 300px;

            background-color: transparent;
            color: black;
            border-radius: 5px;

            border: 1px solid grey;

            margin: 20px auto;
            padding: 20px;
        }
        .mypost > button {
            margin: 20px auto;
        }
    </style>
</head>

<body>
    <div class="mytitle">
        <h1>아이유 팬명록</h1>
    </div>

    <div class="mypost">
        <div class="form-floating mb-3">
          <input type="email" class="form-control" id="floatingInput" placeholder="닉네임">
          <label for="floatingInput">닉네임</label>
        </div>

        <div class="form-floating">
            <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
                      style="height: 100px"></textarea>
            <label for="floatingTextarea2">응원댓글</label>
        </div>

        <button type="button" class="btn btn-dark">응원남기기</button>
    </div>

    <div class="card">
      <div class="card-body">
        <blockquote class="blockquote mb-0">
          <p>앨범 너무 좋아요!</p>
          <footer class="blockquote-footer">아이러브유</cite></footer>
        </blockquote>
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <blockquote class="blockquote mb-0">
          <p>앨범 너무 좋아요!</p>
          <footer class="blockquote-footer">아이러브유</cite></footer>
        </blockquote>
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <blockquote class="blockquote mb-0">
          <p>앨범 너무 좋아요!</p>
          <footer class="blockquote-footer">아이러브유</cite></footer>
        </blockquote>
      </div>
    </div>

</body>

</html>