아빠개발자의 노트

📢 컴퓨터에서의 수표현

▼ 컴퓨터는 10진수가 아닌 2진수로 수를 표현한다. 

일반적으로 컴퓨터에서 사용되는 정수형의 종류는 char (8bit,1byte) , short (16bit, 2byte) , int(32bit , 4byte) , long (64bit , 8byte) 이다. 이중 int (32bit가 제일 많이쓰여 32bit 기준으로 설명을 하겠다.)

4byte는 32bit 이며 1bit는 0과 1중 둘중 하나로 사용을 할 수 있다. 즉 2진수로 32개의 자리수를 차지하여 숫자를 표현한다.

보통 컴퓨터언어에서 맨앞자리 그니간 맨왼쪽자리 1비트는 + - 의 부호비트로 사용한다. 따라서 양수로 표현할수있는 가장 큰 32 비트값은?

0111 1111 1111 1111 1111 1111 1111 1111(2) (0x7FFFFFFF) = 2147483647 가 된다. (여기서 0은 +라는 부호비트로 사용), 만약 숫자 3을 이진수로 뽑으면 011 이겠지만 사실상 int 형(4byte)에 담아 본다면.

0000 0000 0000 0000 0000 0000 0000 0011 이렇게 될것이다 int형의 32bit 자리수를 다채우지만 앞에가 0이라 생략이 된 것.

📋 컴퓨터에서 음수를 표현할 때

▼ 컴퓨터에서 음수를 표현할때는 맨앞자리가 0이면 + 1이면 -이다. 음수를 표현하는 방법은 여러가지가 잇겠지만 그중 대중적인건 2의 보수를 사용한다. 그 이유는 bit는 1개가 0과 1을 표현한다. 그러니 수를 표현하는 비트수가 많건 적건 결과는 항상 짝수이다. 그렇다보니 음수를 표현하는대있어 1의보수와 부호화 절대치방법 들은 +0과 -0이 공존하게된다. 같은 0인데도 말이다.

2의 보수의 경우 +0과 -0이 따로없고 0은 오로지 1개 그리고 음수가 숫자가 1개가 더많다. 예를들어 양수로 7까지표현한다면 음수로는 -8까지 표현이 가능하다는 말이다.  만약 java로 int형 변수에 담아 이진수로 출력하게될경우

ex ) 1111 1111 1111 1111 1111 1111 1111 1101 (2) 이렇게 표현이 될것이다. 그 이유는 java등 기타 많은 언어들은 대부분 음수표현을 2의 보수 형태로 취하고 있기 때문이다.

컴퓨터(논리회로) 가 음수를 표현하는 방법은 여러 가지가 있지만, 그중 대표적으로 3가지를 말하자면 부호화 절대치 방법, 1의보수 방법 , 2의보수 방법 이렇게 3가지가 있다.

📋 부호화 절대치 방법 (Sign Magnitude)

▼ 부호비트를 제외한 수를 양수로 읽고, 마이너스를 붙이는 방법 즉 이진수 000011(2) = +3으로, 100011(2) = -3으로 인식하는 것. 이는 표기하기도 직관적이고 사칙연산중 곱셈 나눗셈 할땐 매우 유리하지만, 음수의 덧셈은 양수의 뺄셈과 전혀 다른 결과라서 이를 해결하기 위해서는 피연산자의 절댓값을 서로 비교하는 추가적인 연산이 필요로 한다는 단점이 있다.

📢 보수의 개념, 보수의 정의

▼보수란? 어원적 의미로는 상호 보완하는 수로, 임의의 수를 보완해주는 다른 임의의 수다.

보충해주는 수 라는 의미를 가지고있으며 컴퓨터가 뺄셈을 할 때 사용되는 개념입니다.

컴퓨터가 뺄셈을 하기 위해 이런 개념이 필요한 이유는, 컴퓨터는 뺄셈을 할 수 없기 때문입니다. (가산기만 가지고 계산을함) 가산기란 : 덧셈연산을 수행하는 논리회로 (계산기)

그럼 가산기만 가지고 사칙연산을 하는법은? +는 더하면되고 -는 보수를취해서한다, X 곱셈은 +를 n번하면되고 / 나누기는 -를 n번하면 됩니다. 이렇게 컴퓨터는 가산기만가지고 사칙연산을 다계산합니다.

10진수 10이 있을때, 6의 보수를 구하면 6+x = 10 이 되는 숫자인 x= 4 가 10에 대한 6의 보수 입니다.

즉 N이 있을때 N의 'X의 보수'를 구하라고 하면 X에 (보수)Y를 더하여 N이 나오면됩니다. (X+Y =N)의 식이나옵니다. 여기서 N의 X의 보수는 Y가 되는거지요 (6 + 4 = 10 , 10에대한 6의보수는 4)

10진수에서 2에대한 10의 보수는 8입니다. 즉 2+8 =10 그러나 2진수에서 2의 보수는 음수를 나타냅니다.

📋 1의 보수

※요약※

1. 1의보수는  0 -> 1   1->0 으로 나타냅니다.
2. 보수는 음수일경우만 취한다. 양수일경우 x
3. 덧셈 , 뺄셈 계산시 자리올림수 (캐리값)은 숫자 1로 바꾼다.
4. 이진수변환시 +0과 -0이 존재한다

양수의 비트들을 반전시켜서 음수를 표현하는 방법. (ex : 101011 를 1의보수로 바꾸면 010100 이 된다.)

조금더 정확하게 풀이하자면 모든비트가 1인 수 에서 빼면 나오는데.   11111(2) - 101011(2) = 010100 (1의보수) 이렇게 계산하여 나오는 수 ( - 뺄셈이지만 정확하게는 xor연산입니다. 결과는 같다.) 

ex) 3의 보수 : 011 -> 100      7의 보수 : 0111 -> 1000

위 처럼 0000 0001 이라면 1111 1110 이렇게 자리수는 지켜줘야 야 합니다. 그래야 덧셈 뺄셈 할때 혼동이 되지 않아요.

010110 - 11 일경우 자리수를 맞춰주고 ( 010110 - 000011 ) --> 음수를 1의보수로 바꿔주면 ( 010110 + 111100 ) --> 1010010  이와 같은 결과가 나오는대. 6자리수에서 덧셈으로인한 자리수 올림이 발생하여 7자리가 되었는대. 저기서 빨간색으로 칠한 부분은 캐리(carry) 라고 하며, 1의보수에선 캐리값을 숫자 1로 바꿔 더해줍니다.

( ex : 1010010 --> 010011 ) 이렇게 자리수를 다시 6자리로 맞춰주고 6자리외에 올림은 숫자1로 바꿔 저렇게 더해줍니다. 그러면 십진수로 계산을 해보면 22 - 3 = 19  --> 010110 - 11 = 010011 (2) 이렇게 결과가 나옵니다.

📋 2의 보수

※요약※

1. 2의보수는 1의보수에서 +1을 더한 상태
2. 보수는 음수일경우만 취한다. 양수일경우 x
3. 덧셈 , 뺄셈 계산시 자리올림수 (캐리값)은 버린다.
4. 이진수변환시 0은 하나만 존재한다

양수의 비트들을 반전시켜서 음수로 만든후 +1 을 더한다. 자세한설명은 아래 예제를 보며 습득하자.

📋 1의보수 2의보수 예제

EX1)  ‘1’ 의 2의 보수
0000 0001   →   1111 1110   →   1111 1111
    < 1 >         <1의 보수>        <2의 보수>

EX2)  ‘3’ 의 2의 보수
0000 0011   →   1111 1100   →   1111 1101
    < 3 >            <1의 보수>      <2의 보수>      
 
EX3) ‘6’의 2의 보수
0000 0110   →   1111 1001   →   1111 1010
    < 6 >            <1의 보수>      <2의 보수>

EX4)‘9’의 2의 보수
0000 1001   →   1111 0110   →   1111 0111
    < 9 >            <1의 보수>      <2의 보수>

EX5) ‘10’ 의 2의 보수
0000 1010   →   1111 0101   →   1111 0110
   < 10 >           <1의 보수>      <2의 보수>
그럼 뺄셈의 예제를 들어보도록 하겠습니다.


EX1)  “9 - 9”
       9 - 9    →   9 + (-9)
     9: 0000 1001 
   -9: 1111 0111
결과:  0000 0000      결과값은 ‘0’ 나오게 됩니다.

EX2)  “7 - 4”
        7 - 4    →   7 + (-4)
      7: 0000 0111
    -4: 0000 0100(4) → 1111 1011 (4의 1의보수) → 1111 1100(4의 2의보수)
   결과 : 0000 0011   결과값은 ‘3’ 나오게 됩니다.

EX3)  “19 -10”
      19 - 10   →   19 + (-10)
    19: 0001 0011
  -10: 0000 1010(10) → 1111 0101(10의 1의보수) → 1111 0110(10의 2의보수)
결과 : 0000 1001  결과값은 ‘9’ 나오게 됩니다.

EX4)  “3 - 5”
      3 - 5   →   3 + (-5)
      3: 0000 0011
    -5: 0000 0101(5) → 1111 1010(5의 1의보수) → 1111 1011(5의 2의보수)
  결과: 1111 1110  결과값은 ‘-2’ 나오게 됩니다.

EX5)   “1 - 7”
      1 - 7   →   1 + (-7)
     1: 0000 0001
   -7: 0000 0111(7) → 1111 1000(7의 1의보수) → 1111 1001(7의 2의보수)
결과: 1111 1010  결과값은 ‘-6’ 나오게 됩니다.

📢FaceBook 으로 로그인하기 (passport)

📋페이스북 로그인 인증 만들기

https://developers.facebook.com/support

FB_ID="facebook 앱 id"
FB_SECRET="facebook 앱 시크릿 코드"

npm install passport-facebook

📋passport - facebook 로그인하기

▼ passport.js 에 아래와 같이 저장

 import FacebookStrategy from "passport-facebook";

 passport.use(
    new FacebookStrategy({
        clientID: process.env.FB_ID,
        clientSecret: process.env.FB_SECRET,
        callbackURL: `http://localhost:4000${routes.facebookCallback}`
      },facebookLoginCallback));

▼ 컨트롤러

const facebookLogin = passport.authenticate('facebook'); 
//passport로 facebook 으로 보내서 인증 확인

const facebookLoginCallback = (accessToken, refreshToken, profile , cb) =>{
    console.log(accessToken, refreshToken, profile , cb);
}
//facebook 의 user가 있는지 확인하고 계정을 찾아내거나 새로생성

const postFacebookLogin = (req,res) => {
    res.redirect(routes.home);
};
// 마지막은 인증에 성공했을때 redirect 해주는것

▼요약

1. 먼저 passport.js 의 로그인에 맞는 strategy 를 생성

2. 해당 앱에 맞는 id,pw 를 할당해주고 콜백 url 주소와 성공적으로 실행했을경우 실행할 콜백 함수를 같이 준다.

📢NODE JS -ESlint

📋ESlint 설치법

▼ESLint

ESLint는 자바스크립트 문법 중 에러가 있는 곳에 표시를 달아놓는 도구를 의미합니다.ESLint가 뜬 이유는 바로 확장성 때문입니다. 다양한 플러그인을 사용할 수 있기 때문에 새로운 규칙을 추가할 수 있고, 손쉽게 다른 회사나 사람의 설정을 도입할 수 있습니다.

npm install eslint

eslint --init
// 또는
node node_modules\eslint\bin\eslint.js --init

////////////아래 질의문 선택////////////////////
? How would you like to use ESLint? 
To check syntax, find problems, and enforce code style

? What type of modules does your project use? 
JavaScript modules (import/export)

? Which framework does your project use? 
None of these

? Where does your code run? (Press  to select,  to toggle all,  to invert selection)
Browser

? How would you like to define a style for your project? 
Use a popular style guide

? Which style guide do you want to follow? 
Airbnb (https://github.com/airbnb/javascript)

? What format do you want your config file to be in? 
JavaScript

? Would you like to install them now with npm? 
Yes

  "devDependencies": {
    "eslint": "^5.16.0",
    "eslint-config-airbnb-base": "^13.1.0",
    "eslint-plugin-import": "^2.16.0",
    "nodemon": "^1.18.10"
  },

//이렇게 추가가 되어있을것이다

npm uninstall eslint

npm install eslint-plugin-prettier
npm install eslint-config-prettier

package.json 에서  dependencies 에 
"eslint-plugin-prettier" : "^3.0.0", 이런게 잇을텐데
이걸 devDependencies객체로 넣자 그후 npm install prettier -D
이렇게 명령어를 쳐서 설치하면 된다.

.eslintrc.js
module.exports = {
  extends: ["airbnb-base", "plugin:prettier/recommended"],
  rules: {
    "no-console": "off"
 }
};
//이렇게 에러의 이름이있는데 rules 에 에러이름을넣고 off를 넣어주면된다.

📢Github 으로 로그인하기 PASSPORT

📋Passport

▼Passport 란?

브라우저에서 쿠키를 저장하고 쿠키 캐시를 갖고와서 컨트롤러에 넘기게 도와주는 미들웨어다. facebook,google,인스타그램 등등 각종 유명대기업의 인증도 도와준다. 또한 다른모듈도 다 지원을 해준다.

▼설치법

브라우저에서 쿠키를 저장하고 쿠키 캐시를 갖고와서 컨트롤러에 넘기게 도와주는 미들웨어다. facebook,google,인스타그램 등등 각종 유명대기업의 인증도 도와준다. 또한 다른모듈도 다 지원을 해준다.

npm install passport passport-local

app.post('/login',
    passport.authenticate('local'),
    function(req,res) {
        res.redirect('/users/'+req.user.username);
    });

npm install passport-local-mongoose

▼mongoose model

Momgoose 의 model 인 user.js

import mongoose from "mongoose";

const UserSchema = new mongoose.Schema({
    name : String,
    email: String,
    avatarUrl : String,
    facebookId : Number,
    githubId : Number
})

const model = mongoose.Model("User",UserSchema);

export default model;

passport.js

import passport from "passport";
import User from "./models/User";

passport.use(User.createStrategy());
//strategy 라는건 로그인 방식

passport.serializeUser(User.serializeUser()); //쿠키에 user.id 를 담는다
//serialization 어떤 정보를 쿠키에게 주느냐를 의미 (어떤 field가 쿠키에 포함될것인지)

passport.deserializeUser(User.deserializeUser()); //그 id로 사용자를 식별한다
//deserialization 어느사용자인지 어떻게 찾는가? 쿠키에 저장되어있는 userid로 어떻게 사용자를찾느냐를 의미

UserController.js

import User from "../models/User";

const postjoin = async (req,res) => {
    const{
        body: {name, email, password, password2}
    } = req;
    if(password !== password2){
        res.status(400);
        res.render("join",{pageTitle: "Join"});
        console.log('비밀번호틀림2');
    } else{
        try {
            //const user = await User.create({
                //create는 생성시키고 db에 저장까지 해서
            const user = await User({
                name,
                email
            });
            await User.register(user,password); //회원가입
        } catch (error) {
            console.log(error);
        }
        res.redirect(routes.home);        
    }
};

npm install express-session

import session from "express-session";
app.use(session({
    secret: "ajhdfjdanfadf",
    resave: true,
    saveUninitialized : false
})
);

//공개키 암호화 기법

//resave 는 세션을 강제로 저장하게 합니다.
//saveUninitialized 는 초기화 되지 않은 (uninitialized) 세션을 저장소에 저장합니다.
//새로운 세션이지만 변경되지 않은 세션은 초기화 하지 않습니다.
//로그인 session에 이용하려면 false가 좋다

▼설치법

npm install passport-github

 

▼사용법

먼저 github에서 application 을 생성한다.

https://github.com/settings/applications/new .여기 링크에서 만들면 된다.

사용자가 github에 요청을 하면 github에서 사용자정보를 내가만든 웹에 정보를 줘도 되겠냐고 물어본다 그걸가지고 회원가입을 하는거다.

깃헙 아이디를 만들면 아래와 같이 화면이 뜬다. 비밀키와 아이디를 적어주자

▼ passport.js

import GithubStrategy from "passport-github";

//3번 authenticate("github") 을통해서 passport의 strategy 를 이용
passport.use(new GithubStrategy({
  clientID: (GITHUB_CLIENT_ID 을 적어주자),
  clientSecret: (GITHUB_CLIENT_SECRET 을 적어주자),
  callbackURL: (콜백 url 주소) // 4-2 깃헙페이지로 갔다가 돌아오면서 callbackURL 로 간다.
},githubLoginCallback   /*4-1번 콜백함수*/  
));

const githubLogin = passport.authenticate("github");

const githubLoginCallback = async (accessToken, refreshToken, profile, cb) => { // 5번
    const {_json : { id, avatar_url, name, email}} = profile;
    try {
        const user = await User.findOne({email}); //_json의 email과 몽고db의 email이 같은게 있는가를 찾는다
        console.log(user);
        if(user){
            user.githubId = id;  // 깃헙에서 가져온 ID를 몽고DB에 있는 ID로 바꿔준다
            user.save();
            return cb(null,user); //이걸 쿠키에 저장한다. 자동으로
        } 
            //mongo의 db와 같은게 없으면 새로 아이디를 만든다 github 내용으로 mongoDB 에
            const newUser = await User.create({
                email,                           
                name,
                githubId : id,
                avatar_url : avatar_url
            })
            return cb(null,newUser);

    } catch (error) {
        return cb(error);
    }
//passport 에서 제공하는 github 콜백햄수들을 그냥 콘솔출력
//cb는 passport로부터 제공되는것 함수인데 실행되면 passport에서
//사용자가 성공적으로 로그인되었다고 알려준다.

 

▼라우터.js

import {githubLogin, postGithubLogIn } from "../controllers/userController";

globalRouter.get(routes.github,githubLogin); // /github/login 들어오면  1번

globalRouter.get(routes.githubCallback, //callbackURL 5번
    passport.authenticate("github",{ failureRedirect: "/login"}), //실패시 6번 실패화면
    postGithubLogIn // 성공시 6번
);

▼컨트롤러.js

const githubLogin = passport.authenticate("github"); //2번

const postGithubLogIn = (req,res) =>{ //7번
    res.send(routes.home); //성공시 홈화면
};

req.logout(); // 만써주면 된다 passport에서 지원

📢NODE JS - pug(mixin) 사용법

📋MIXIN

▼mixin 은 pug의 함수의 일종이다. 반복적으로 사용되는 html 구조를 mixin의 정의하고 그값을 인자함수로 정의해줌으로써 반복되는 html 안에 변수를 설정해줄수있다. 아래 소스의 +는 mixin을 포함하여 실행한다는 뜻이다.

💻videoBlock.pug

mixin videoBlock(video ={})
    .videoBlock
        video.videoBlock__thumbnail(src=video.videoFile, controls=true)
        h4.videoBlock__title=video.title
        h6.videoBlock__views=video.views

💻home.pug

include mixins/videoBlock

each object in videos //for .. in 같은 pug 전용 반복문이다.
    +videoBlock({
        title: object.title,
        description:object.description
    })

💻videoController.js (단지 pug의 videos의 객체를 전달해주기 위함)

const videos = {title : '제목' , description : '내용'};
const home = (req,res) => {
    res.render('home',{videos});
};