npm cookie 중에서 cookie-parser 사용하기

request에서의 쿠키를 파싱할 때 필요함

그냥 request에서 오는 거 처리 안 할거면 필요없지만 보통 다 필요하니까, 미리 설치하기

npm: cookie-parser

1.1 cookie

쿠기로 보내기

res.cookie('token', token)

1.2 401, 403, 404

4XX은 클라이언트에서의 오류를 나타내는 상태 코드

• 401 Unauthorized
  • 인증이 안된 상태. 사용자 로그인이 필요함
• 403 Forbidden
  • 서버가 요청은 이해했으나, 승인을 거부한 상태.
  • 주로 인증될 자격은 있으나 인가될 자격은 없는 경우(접근 권한 불충분)
• 404 Not Found:
  • 요청 리소스가 서버에 없는 경우에 발생함.

2. HTTP, HTTPS, HTTPonly, 설정

2.1 HTTP vs HTTPS 간단 비교

보안

HTTP는 plain text로 데이터 전송

HTTPS는 SSL, TLS를 이용해서 데이터 암호화를 한 후 전송

포트 넘버(default)

HTTP - 80

HTTPS - 443

SEO, browser indication

HTTP - 가끔 구글링하면 NOT SECURE이라며 사용자에게 사이트 이용을 경고하는 경우 발생하는데, 모든 브라우저가 HTTP보다 HTTPS를 신뢰하고 주로 사용하기 때문임

HTTPS - 선호됨, 자물쇠모양 아이콘으로 표시됨

2.2 HTTPOnly

프론트엔드가 아니라 API 호출만 가능하도록 허락하는 경우

왜? XSS(웹 브라우저 JS 접근 후 공격)을 막기 위해서

cookie 전송하면서 설정하면 됨

res.cookie('token', token, {
    httpyOnly: true
})

3. 유효 기간, 이슈어 설정

// 로그인
router
    .route('/login')
    .post(
        [
            body('email').notEmpty().isEmail().withMessage('이메일 입력 필요'),
            body('password').notEmpty().isString().withMessage('비밀번호 입력 필요'),
            validate
        ]
        ,(req,res, next)=>{
            const {email, password} = req.body
            let sql = "SELECT * FROM users WHERE email = ?"

            conn.query(sql, email, 
                function(err, results){
                    var loginUser = results[0]

                    if (loginUser && loginUser.password== password){
                        const token = jwt.sign({email: loginUser.email, 
                            name: loginUser.name}, process.env.LOGIN_KEY, {
                                expiresIn : '30m',
                                issuer : 'daeun'
                            })

                        res.cookie('token', token, {
                            httpyOnly: true
                        })

                        console.log(token)

                        res.status(200).json({
                            message: `${loginUser.name}님 로그인되었습니다.`
                        })
                    } else {
                        res.status(403).json({
                            message: "이메일 또는 비밀번호 정보가 틀렸습니다."
                        })
                    }
                }
            )

JWT로 디코딩해보면,

{ "email": "ga@gmail.com", "name": "gagaga", "iat": 1716705058, "exp": 1716706858, "iss": "daeun" }

이런 식으로, iat(issuedat), exp(expiration), iss(issuer) 확인 가능

1.1 방법1 - 미들웨어X → 함수 호출

validate 변수를 생성해서 미들웨어로 사용하지 않고,

그냥 함수로 제작 후 각 api에서 호출하는 형태로 사용하면, 에러 발생하지 않음

1. 유효성 검사 함수 생성

function validate(req, res){
    const err = validationResult(req)

    if(!err.isEmpty()){
        return res.status(400).json(err.array())
    }
}

1. 함수 호출

.get([body('userId').notEmpty().isInt().withMessage('숫자입력필요')]
    ,(req,res)=>{
        validate(req,res)

1.2 방법2 - 미들웨어 사용 + next()로 유효성 검사 통과 후 해야할 일 알려주기

1. 매개변수로 next 추가
2. 만약, 유효성 검사 통과 시, 즉 err가 없을 시, return next()

const validate = (req, res, next)=>{
    const err = validationResult(req)

    if(!err.isEmpty()){
        return res.status(400).json(err.array())
    } else {
        return next(); // 다음 할 일 하러 찾으러 가봐!
    }
}

.get([body('userId').notEmpty().isInt().withMessage('숫자입력필요'),validate]
    ,(req,res, next)=>{

2. 인증과 인가

인증

== 로그인

인가

인증이 되었다고 해도,권한에 따라서 접근 가능한 페이지가 다름

어디까지 권한 가능한지 확인하는 것이 인가

인증 이후 인가

3. 쿠키 세션 차이

로그인 유지에 필요한 개념으로 쿠키와 세션이 있음!

3.1 쿠키

사이트에 한번 로그인하면 일정 기간동안은 로그인이 유지됨

다른 페이지로 이동해도 로그인 정보가 유지됨

이걸 가능하게 하는 방법으로 쿠키가 있는 것!

포춘 쿠키를 생각하자!

포춘 쿠키 안에 메시지를 담은 종이가 있듯이, 쿠키에도 필요한 정보를 담겨있음

로그인을 하면, 서버가 로그인 정보를 담은 쿠키를 구워줌

새로운 페이지에 갈때 이 쿠키를 서버에게 전달하면, 서버가 확인 후, 처리를 함

장점

1. 서버 저장 공간 절약
   1. 서버가 로그인 정보를 서버 저장공간에 저장하는 게 아니라서, 서버 저장 공간을 아낄 수 있다.
2. stateless하다, 따라서 RESTful하다

서버-클라이언트 구조에서 서버가 클라이언트 상태를 가지고 있지 않는 거

단점

1. 보안에 취약하다
   1. 누군가 사용자와 서버 사이의 쿠키를 가로채서 정보를 훔쳐볼 수 있음

3.2 세션

쿠키의 단점(보안에 취약)을 극복하기 위해서 세션이 탄생함

로그인 시, 서버는 서버 공간에 금고를 만들어서 정보를 보관 후,

그 서버 공간에 접근할 수 있는 금고 번호를 사용자에게 줌

사용자와 서버는 번호만을 가지고 대화를 진행

장점

1. 보안
   1. 금고에 정보를 보관하니, 보안이 쿠키에 비해서 비교적 좋다.

단점

1. 서버에 정보를 저장한다.
   1. 서버에 정보를 보관하니, 서버 저장 공간을 사용하게 된다.
2. 서버에 저장하니, stateless하지 못하다.(not RESTful)

4. JWT

4.1 JWT 개념

쿠키도, 세션도 단점이 존재하니, JWT가 탄생하게 된다.

JSON WEB TOKEN의 약자

JSON 형태로 데이터를 안전하게 전송하기 위한 토큰(웹에서 사용)이다.

옛날옛적 사용되던 버스 토큰을 생각하면 이해하기 쉽다.

버스를 타기 위해서는 버스 토큰이라는 게 필요했고, 버스토큰은 학생/성인용으로 나누어져있었음

이와 비슷하게 JWT도, 서버에게 사용자가 자신이 인증된 사용자라는 걸 ‘증명’하기 위한 수단으로 사용됨

또한, 버스토큰이 학생/성인으로 구분된 것처럼,

JWT도 관리자/일반 유저 권한을 구분함

결국, 두 가지에 대한 토큰인 것

1. (인증용) 입장 가능한 유저라는 것

2. (인가용) 관리자 권한, 일반 유저 권한인지

4.2 장점

1. 암호화가 되어있기에, 보안에 강하다
2. HTTP 특징을 잘 따르기에 Stateless하다. (’서버가 상태를 저장하지 않음’)
3. 서버 저장 공간 절약, 서버 부담 줄여줌

4.3 구조

JWT.IO

JWT는 header, payroad, signature의 구조를 가짐

헤더

토큰 타입(jwt), 암호화 알고리즘 명시

페이로드

사용자 정보, 전달하는 데이터

데이터 각각의 key는 claim

→ 페이로드는 a set of claim임

시그니처

헤더와 페이로드가 변조되었는지 확인하는 역할

페이로드를 수정하면 시그니처도 자동으로 수정됨

JWT는 헤더, 페이로드, 시그니처 이 세 파트를 각각 인코딩해서 생성됨

const token = base64urlEncoding(header) 
+ '.' + base64urlEncoding(payload) 
+ '.' + base64urlEncoding(signature)

4.4 인증-인가 절차

첫 요청

1. 클라이언트 → 서버

로그인 요청

post / login

body(username, password)

1. 서버

내부 로직 확인

내부 로직 통과 → JWT 발행(언제 로그인했는지 == JWT 발행 시점)

1. 서버 → 클라이언트

로그인 승인

다음 요청부터는

JWT 들고 다녀!

이후 요청

1. 다음 요청(클라이언트 → 서버)

HTTP header에 JWT 담고, 요청

1. 서버

JWT 시그니처를 내부 로직에서 확인

일치/불일 파악

1. 서버 → 클라이언트

일치하면, 승인

불일치며면 거절

5. JWT 실습

npm: jsonwebtoken

JWT 생성하기

var jwt = require('jsonwebtoken'); // 모듈 불러오기 
var token = jwt.sign({ foo: 'bar' }, 'shhhhh'); // 토큰 생성

jwt.sign의 첫 매개변수는 페이로드

두 번째 매개변수는 시그니처

보통 페이로드와 시그니처에 대해서 지정하고, 헤더는 자동으로 설정됨

기본 헤더(따로 커스텀하지 않으면 자동 설정됨)

{
  "alg": "HS256", // 기본 알고리즘
  "typ": "JWT"    // 기본 타입
}

결과값

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJmb28iOiJiYXIiLCJpYXQiOjE3MTYzNDg3ODB9.sjGX_6SPBijdMC9-eV29JcTeOMBdLJ8me3-s3_2e14w

디코딩해보기

1. jwt 사이트에서

verify signature의 secret 입력란에 코드에서 입력했던 비밀 키 입력하면 verify 됨

1. vscode에서

var jwt = require('jsonwebtoken'); // 모듈 소환
var token = jwt.sign({foo:'gyul'}, 'gyul') //  토큰 생성 ( == 서명함)

//검증
//검증 성공? -> 페이로드 값 읽을 수 있음
var decoded = jwt.verify(token, 'gyul');
console.log(decoded) //{ foo: 'gyul', iat: 1716349210 }
console.log(decoded.foo) // gyul

jwt.verify(token, secretOrPublicKey, [options, callback])

jwt.verify 메서드에 첫 번째 매개변수로는 토큰, 두 번째 매개변수로는 지정했던 시크릿 암호키를 입력하면, 페이로드 확인 가능!

결과값: - { foo: 'gyul', iat: 1716349210 }

iat(issuedat의 약자)는 발생시간의 초단위

발행시간에 따라서, 같은 내용이라도 토큰값이 다름

6. .env

그런데, jwt 인코딩, 디코딩시에 문제점이 존재함

바로, 시그니처 키값이 그대로 드러난다는 것

깃헙에 올리거나 공유할 때, 키 값은 따로 빼놓고 관리해야 함

이럴때 필요한 게 .env 파일임

6.1 .env란?

포트넘버, db 계정, 암호키 등 외부에 유출하면 안되는 주요한 환경 변수를 따로 관리하는 파일

파일확장자는 .env, 프로젝트 폴더 최상위에 존재해야 함

→ 프로젝트의 구조적 일관성을 유지

→ 환경 변수의 로딩 경로 문제를 방지

→ 환경 분리와 보안 관리가 용이

(+) 최상단에 위치하지 않으면 에러 발생

/Users/daeun/node_modules/jsonwebtoken/sign.js:107
    throw err;
    ^

Error: secretOrPrivateKey must have a value

형식

변수명은 대문자, 스네이크 형식

주석은 #으로

//.env 파일

PRIVATE_KEY = 'gyul' #JWT 암호키

//jwt-demo.js 파일

var jwt = require('jsonwebtoken'); 
var dotenv = require('dotenv');

dotenv.config();

var token = jwt.sign({foo:'gyul'}, process.env.privateKey) 

var decoded = jwt.verify(token, process.env.privateKey);
console.log(decoded)
console.log(decoded.foo) 

1. dotenv로 .env 파일 불러옴
2. dotenv.config() 다 활용한다
3. 실제 사용은 process.env.파일에 저장된 값들 중 사용할 키 값

7. youtube project에 jwt 적용하기

.env 파일

PRIVATE_KEY = 'gyul' #JWT 암호키

PORT = 7777 # 포트넘버

LOGIN_KEY = 'login' #로그인 키값

로그인

// 로그인
router
    .route('/login')
    .post(
        [
            body('email').notEmpty().isEmail().withMessage('이메일 입력 필요'),
            body('password').notEmpty().isString().withMessage('비밀번호 입력 필요'),
            validate
        ]
        ,(req,res, next)=>{
            const {email, password} = req.body
            let sql = "SELECT * FROM users WHERE email = ?"

            conn.query(sql, email, 
                function(err, results){
                    var loginUser = results[0]

                    if (loginUser && loginUser.password== password){
                        const token = jwt.sign({email: loginUser.email, 
                            name: loginUser.name}, process.env.LOGIN_KEY)

                        //res.cookie()

                        res.status(200).json({
                            message: `${loginUser.name}님 로그인되었습니다.`,
                            token_message: token
                        })
                    } else {
                        res.status(404).json({
                            message: "이메일 또는 비밀번호 정보가 틀렸습니다."
                        })
                    }
                }
            )
})

1. 로그인 성공 시, JWT 생성하기

const token = jwt.sign({email: loginUser.email, 
                            name: loginUser.name}, process.env.LOGIN_KEY)

2. body에 동봉하기(쿠키는 다음 파트에서)

res.status(200).json({
    message: `${loginUser.name}님 로그인되었습니다.`,
    token_message: token
})

결과

로그인 성공, token까지 출력됨

1.1 express-validator

사용자가 입력한 값의 유효성(타당성)을 확인하는 것

예를 들어서, 우리 채널 post의 user_id, name의 경우

전자는 값이 있고 숫자여야 하고, 후자는 숫자가 아닌 문자열이며 2자리 이상이여야 함

이를 위해서는 express-validator가 필요함

express-validator 설치

Getting Started | express-validator

npm install express-validator

1.2 express-validator 사용

const express = require('express');
const router = express.Router();
const conn = require('./mariadb')
const {body, validationResult} = require('express-validator')

router.use(express.json());

router
    .route('/')
    // 채널 생성
    .post(
        [body('userId').notEmpty().isInt().withMessage('숫자입력필요'), 
        body('channelName').notEmpty().isString().withMessage('문자입력필요')]
        , (req,res)=>{
            const err = validationResult(req)

            if(!err.isEmpty()){
                return res.status(400).json(err.array())
            }

            const {channelName, userId} = req.body
            let sql = 'INSERT INTO channels (name, user_id) VALUES (?, ?)'
            let values = [channelName, userId]

            conn.query(sql, values,
                function(err, results){
                    res.status(201).json(results)
                }
            )

    })

const {body, validationResult} = require('express-validator')

express-validator 모듈로부터 body와 validationResult 변수 가져오기

[body('userId').notEmpty().isInt().withMessage('숫자입력필요'), body('channelName').notEmpty().isString().withMessage('문자입력필요')]

req.body의 userId는 값이 있고, 숫자여야 하고,

req.body의 channelName은 값이 있고, 문자열이여야 함

위의 코드는 userId와 channelName의 필드를 검사하는 것

만약 유효성 검사가 실패한다면, withMessage의 메시지가 반환됨

const err = validationResult(req)

요청의 유효성 검사 결과를 err 변수에 할당한 것

유효성 검사가 성공하면 err.isEmpty()는 true를, 실패하면 false를 반환함

if(!err.isEmpty()){ return res.status(400).json(err.array()) }

err 변수(유효성 검사 결과)가 실패하면, 404 반환

return을 사용하여 코드가 종료되도록 설정

const {channelName, userId} = req.body let sql = 'INSERT INTO channels (name, user_id) VALUES (?, ?)' let values = [channelName, userId]

conn.query(sql, values, function(err, results){ res.status(201).json(results) } )

유효성 검사 통과한 경우 실행될 코드들

1.3 sql err 처리

conn.query(sql, values,
    function(err, results){
        if(err){
            return res.status(400).end();
        }
        res.status(201).json(results)
    }
)

SQL에서 에러가 발생하는 경우에 예외 처리하기

예를 들어서, userId는 FK인데, 입력값이 FK 중에 없는 경우

SQL 에러와, 유효성 검사 에러 차이

유효성 검사 에러의 경우는 빈 값인지, 입력값의 타입이 무엇인지 확인 후, 설정값과 다르면 에러를 발생하는 것이고

SQL 에러의 경우는, 유효성 검사를 통과해도, 실질적으로 db 상에서 없는 값일 경우에 에리가 발생되는 것임

2. 채널 개별 조회

const {body, param, validationResult} = require('express-validator')

.get(param('id').notEmpty().withMessage('아이디 입력 필요')
,(req,res)=>{
    const err = validationResult(req)

    if(!err.isEmpty()){
        res.status(400).end();
    }

    let {id} = req.params
    id = parseInt(id)

    let sql = 'SELECT * FROM channels WHERE id =?'

    conn.query(sql, id, 
        function(err, results){
            if(results.length){
                res.status(200).json(results)
            } else {
                notFoundChannel(res)
            }
    })
})

const {body, param, validationResult} = require('express-validator')

param도 유효성 검사에 추가하기

notEmpty()

req.body의 userId는 값이 있고, 숫자여야 함

3. 채널 업데이트

router 
    .route('/:id')
    //채널 수정
    .put(
        [param('id').notEmpty().withMessage('아이디 입력 필요'),
        body('name').notEmpty().withMessage('아이디 입력 필요')]
        ,(req,res)=>{
            const err = validationResult(req)

            if(!err.isEmpty()){
                res.status(400).end();
            }

            let {id} = req.params
            id = parseInt(id)
            let {name} = req.body
            let sql = 'UPDATE channels SET name = ? WHERE id = ?'
            let values = [name, id]

            conn.query(sql, values, 
                function(err, results){
                    if(err || results.affectedRows == 0){ 
                        return res.status(400).end() 
                    } else {
                        res.status(200).json(results)
                    }
            })
        })

if(err || results.affectedRows == 0){

예외 처리

1. err일 경우
2. results.affectedRow가 0인 경우 (Id가 db에 없는 값이라면,,,)

둘 중에 하나라도 해당되면, 400 띄우도록 세팅

4. 채널 삭제

  router 
    .route('/:id')
    .delete(
        param('id').notEmpty().withMessage('아이디입력필요')
        ,(req,res)=>{
            const err = validationResult(req)

            if(!err.isEmpty()){
                return res.status(400).json(err.array());
            }

            let {id} = req.params
            id = parseInt(id)
            let sql = 'DELETE FROM channels WHERE id = ?'

            conn.query(sql, id, function(err,results){
                if(err || results.affectedRows == 0){
                    res.status(400).end()
                } else {
                    res.status(200).json(results)
                }
            })
    })

5. validate 미들웨어

    const err = validationResult(req)

    if(!err.isEmpty()){
        return res.status(400).json(err.array())
    }
}

모든 채널 api에서 사용되는 유효성 검사 코드를

미들웨어로 생성해서 활용하기

5.1 미들웨어 활용

1. 변수에 함수 할당

const validate = (req, res)=>{
    const err = validationResult(req)

    if(!err.isEmpty()){
        return res.status(400).json(err.array())
    }
}

1. 콜백 함수 이전 코드에 삽입

.get([body('userId').notEmpty().isInt().withMessage('숫자입력필요')
, validate]
,(req,res)=>{

5.2 문제점

validate 함수를 통과해도 이후의 코드를 실행하지 않고

로딩만 진행됨

→ 해결해야 함

1.1 mariadb.js 생성, 사용하기

// Get the client
const mysql = require('mysql2');

// Create the connection to database
const connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'root',
  database: 'Youtube',
  dateStrings : true
});

module.exports = connection;

모듈화하기

module.exports = connection;

1.2 users.js에서 사용하기

connection 모듈 불러오기

const conn = require('../workbench/mariadb')

conn 쿼리문, .get(/users)에서 db 사용하기

router
    .route('/users')
    .get((req, res) => {
        let { email } = req.body;

        // 파라미터 바인딩을 사용하여 SQL 인젝션 방지
        conn.query(
            `SELECT * FROM user WHERE email = ${email}`,
            function (err, results, fields) {
                // if (err) {
                //     return res.status(500).send({ message: 'Database query error' });
                // }
                if (results.length) {
                    res.status(200).json(results);
                } else {
                    res.status(400).send({
                        message: '회원 정보가 없습니다.'
                    });
                }
            }
        );
    })

2. socket hang up

코드를 워크벤치에서 돌리면, “socket hang up”이라는 오류 발생함

[Running] node "/Users/daeun/Desktop/backend-basic/youtuber-project/app.js"
/Users/daeun/Desktop/backend-basic/youtuber-project/routes/users.js:24
                if (results.length) {
                            ^

TypeError: Cannot read properties of undefined (reading 'length')
    at Query.onResult (/Users/daeun/Desktop/backend-basic/youtuber-project/routes/users.js:24:29)
    at Connection._notifyError (/Users/daeun/node_modules/mysql2/lib/connection.js:228:21)
    at Connection._handleFatalError (/Users/daeun/node_modules/mysql2/lib/connection.js:183:10)
    at Connection.handlePacket (/Users/daeun/node_modules/mysql2/lib/connection.js:491:12)
    at PacketParser.onPacket (/Users/daeun/node_modules/mysql2/lib/connection.js:97:12)
    at PacketParser.executeStart (/Users/daeun/node_modules/mysql2/lib/packet_parser.js:75:16)
    at Socket.<anonymous> (/Users/daeun/node_modules/mysql2/lib/connection.js:104:25)
    at Socket.emit (node:events:518:28)
    at addChunk (node:internal/streams/readable:559:12)
    at readableAddChunkPushByteMode (node:internal/streams/readable:510:3)

Node.js v20.12.2

[Done] exited with code=1 in 3.078 seconds

results가 Undefined이고, undefined의 Length는 읽을 수 없어서, 오류가 발생한 것

socket이란?

hang up

서버가 죽음

TypeError: Cannot read properties of undefined (reading 'length')

템플릿 문자열

SQL에서 사용하는 정석 문자열 방법

물음표(?) 사용하기

query(sql, ? 변수, 콜백 함수)

router
    .route('/users')
    .get((req, res) => {
        let { email } = req.body;

        // 파라미터 바인딩을 사용하여 SQL 인젝션 방지
        conn.query(
            "SELECT * FROM users WHERE email = ?", email,
            function (err, results, fields) {
                // if (err) {
                //     return res.status(500).send({ message: 'Database query error' });
                // }
                console.log(email)
                console.log(results)
                if (results.length) {
                    res.status(200).json(results);
                } else {
                    res.status(400).send({
                        message: '회원 정보가 없습니다.'
                    });
                }
            }
        );
    })

? 자리표시자로 sql 작성하기

"SELECT * FROM users WHERE email = ?", email, function()

3. 회원가입 INSERT

// 회원가입
router.post('/join', (req,res)=>{
    if (req.body == {}){
        res.status(400).send({
            message: '다시 입력해주세요'
        })
    } else {
        let { email, name, password, contact } = req.body

        conn.query('INSERT INTO users (email, name, password, contact) VALUES (?,?,?,?)', [email, name, password, contact],
        function(err, results, fields){
            res.status(201).json(results)
        })
}})

구조분해할당

let { email, name, password, contact } = req.body

sql, 변수

"INSERT INTO users (email, name, password, contact) VALUES (?,?,?,?))", [email, name, password, contact]

→ 여러 변수를 ? 자리표시자를 이용해서 입력할 때는 배열[] 안에 넣기

4. 회원 정보 지우기 DELETE

  router
    .route('/users')
    .delete((req,res)=>{
        let {email} = req.body;

        conn.query("DELETE FROM users WHERE email = ?", email,
            function(err, results, fields){
                res.json({
                    message: `${email}님, 다음에 또 뵙겠습니다.`
             })
        })
    })

5. 로그인 POST

5.1 버전 1(아이디, 비밀번호 분리해서 알려주기)

router.post('/login', (req,res)=>{
    const {email, password} = req.body
    var loginUser = {}

    conn.query("SELECT * FROM users WHERE email = ?", email, 
        function(err, results, fields){
            var loginUser = results[0]
            if (results.length){
                if(loginUser.password == password){
                    res.status(200).json({
                        message: `${loginUser.name}님 로그인되었습니다.`
                    })
                } else {
                    res.status(400).json({
                        message: "비밀번호가 틀렸습니다."
                    })
                }
            } else {
                res.status(404).json({
                    message: "회원정보가 없습니다."
                })
            }
            }
        )
})

loginUser = results[0]

results가 배열 안에 있기에, 첫번째 인덱스를 loginUser에 넣어주기

5.2 버전2(아이디, 비밀번호 통합해서 알려주기) - 요즘 트렌드

router.post('/login', (req,res)=>{
    const {email, password} = req.body
    var loginUser = {}

    conn.query("SELECT * FROM users WHERE email = ?", email, 
        function(err, results, fields){
            var loginUser = results[0]
            if (loginUser.length && loginUser.password== password){
                    res.status(200).json({
                        message: `${loginUser.name}님 로그인되었습니다.`
                    })
            } else {
                res.status(404).json({
                    message: "이메일 또는 비밀번호 정보가 틀렸습니다."
                })
            }
        }
    )
})

6. users.js 리팩토링

• 안 쓰는 코드 제거 (코드로 설명 안되는 부분에만 주석이 달려야 함)
• 변수명
• 메소드명
• 주석 유무, 주석 내용

6.1 리팩토링 전

const express = require('express');
const router = express.Router(); // users.js를 ezpress의 router로 사용가능
const conn = require('../workbench/mariadb')

router.use(express.json());

const db = new Map();
let num = 1;

// (추가) app.route 사용해보기
// .get과 .delete가 path가 동일하니까, route로 동일하게 합쳐서 사용 가능
router
    .route('/users')
    .get((req, res) => {
        let { email } = req.body;

        // 파라미터 바인딩을 사용하여 SQL 인젝션 방지
        conn.query(
            "SELECT * FROM users WHERE email = ?", email,
            function (err, results, fields) {
                // if (err) {
                //     return res.status(500).send({ message: 'Database query error' });
                // }
                console.log(email)
                console.log(results)
                if (results.length) {
                    res.status(200).json(results);
                } else {
                    res.status(400).send({
                        message: '회원 정보가 없습니다.'
                    });
                }
            }
        );
    })


    .delete((req,res)=>{
        let {email} = req.body;

        conn.query("DELETE FROM users WHERE email = ?", email,
            function(err, results, fields){
                res.json({
                    message: `${email}님, 다음에 또 뵙겠습니다.`
             })
        })
    })

// 회원가입
router.post('/join', (req,res)=>{
    if (req.body == {}){
        res.status(400).send({
            message: '다시 입력해주세요'
        })
    } else {
        let { email, name, password, contact } = req.body

        conn.query('INSERT INTO users (email, name, password, contact) VALUES (?,?,?,?)', [email, name, password, contact],
        function(err, results, fields){
            res.status(201).json(results)
        })
}})

// 로그인
// 아이디, 패스워드 각각 검사하는 코드
router.post('/login', (req,res)=>{
    const {email, password} = req.body
    var loginUser = {}

    conn.query("SELECT * FROM users WHERE email = ?", email, 
        function(err, results, fields){
            var loginUser = results[0]
            if (loginUser.length && loginUser.password== password){
                    res.status(200).json({
                        message: `${loginUser.name}님 로그인되었습니다.`
                    })
            } else {
                res.status(404).json({
                    message: "이메일 또는 비밀번호 정보가 틀렸습니다."
                })
            }
        }
    )
})

module.exports = router

6.2 리팩토링 후

const express = require('express');
const router = express.Router(); 
const conn = require('../workbench/mariadb')

router.use(express.json());

// 회원 개별 조회
// 회원 개별 삭제
router
    .route('/users')
    .get((req, res) => {
        let { email } = req.body;
        let sql = "SELECT * FROM users WHERE email = ?"

        conn.query(
            sql, email,
            function (err, results) {
                    res.status(200).json(results)
            }
        )
    })


    .delete((req,res)=>{
        let {email} = req.body
        let sql = "DELETE FROM users WHERE email = ?"

        conn.query(sql, email,
            function(err, results){
                res.json(results)
        })
    })

// 회원가입
router.post('/join', (req,res)=>{
    if (req.body == {}){
        res.status(400).send({
            message: '다시 입력해주세요'
        })
    } else {
        let { email, name, password, contact } = req.body
        let sql = 'INSERT INTO users (email, name, password, contact) VALUES (?,?,?,?)'
        let values = [email, name, password, contact]

        conn.query(sql, values,
        function(err, results, fields){
            res.status(201).json(results)
        })
}})

// 로그인
router.post('/login', (req,res)=>{
    const {email, password} = req.body
    let sql = "SELECT * FROM users WHERE email = ?"

    conn.query(sql, email, 
        function(err, results){
            var loginUser = results[0]

            if (loginUser && loginUser.password== password){
                    res.status(200).json({
                        message: `${loginUser.name}님 로그인되었습니다.`
                    })
            } else {
                res.status(404).json({
                    message: "이메일 또는 비밀번호 정보가 틀렸습니다."
                })
            }
        }
    )
})

module.exports = router

수정 사항

1. db 제거
2. query의 콜백함수의 fields 매개변수 사용하지 않으니 제거(err는 순서 때문에 사용하지 않더라도 유지해야 함)
3. 필요없는 주석 제거
4. query 인수로 들어갈 값을 sql, values로 따로 빼서 변수로 담기

7. channels.js mariadb 사용, 리팩토링

7.1 수정 전 코드

const express = require('express');
const router = express.Router();

router.use(express.json());

const db = new Map();
let id = 1;

router
    .route('/')
    // 채널 생성
    .post((req,res)=>{
        let {channelTitle} = req.body

        if (channelTitle){
            db.set(id++, req.body)
            res.status(201).send({
                message: `${db.get(id-1).channelTitle} 채널을 응원합니다`
            })
            console.log(db)
        } else {
            res.status(400).send({
                message : `요청 값을 다시 확인해주세요.`
            })
        }
    })

    // 채널 전체 조회
    // third - if 고도화 후
    .get((req,res)=>{
        var {userId} = req.body
        var channels = []
        if(db.size && userId){
            db.forEach((x,y)=>{
                if (x.userId == userId){
                    channels.push(x)
                }
            })
            if(channels.length){
                res.status(200).json(channels)
            } else {
                notFoundChannel()
        }} else {
            notFoundChannel()
        }
})

function notFoundChannel(){
    res.status(404).json({
        message: "채널 정보를 찾을 수 없습니다."
    })
}

    // second - userId와 channel 연관성 고려 후, if 중첩 고도화 전
//     .get((req,res)=>{
//         if(db.size){
//             var {userId} = req.body
//             var channels = []

//             if(userId == undefined){
//                 res.status(404).json({
//                      message: "로그인이 필요한 페이지입니다."
//                 })
//             } else {
//                 db.forEach((x,y)=>{
//                     if (x.userId == userId){
//                         channels.push(x)
//                     }
//                 })
//                 if(channels.length == 0){
//                     res.status(404).json({
//                         message: '조회할 채널이 없습니다.'
//                     })
//                 } else {
//                     res.status(200).json(channels)
//                 }
//             }
//         }}
// )

    // first - userId와 channel 연관성 고려 전
            // var channels = []

            // if(db.size){
            //     var channels = []
            //     db.forEach((ch, key)=>{
            //         channels.push(ch)
            //     })

            //     res.status(200).json(channels)
            // } else {
            //     res.status(404).json({
            //         message: '조회할 채널이 없습니다.'
            //     })
            // }

    // })

router 
    .route('/:id')
    //채널 수정
    .put((req,res)=>{
        let {id} = req.params
        id = parseInt(id)

        var channel = db.get(id)
        var oldTitle = channel.channelTitle

        let newTitle = req.body.channelTitle

        if(channel == undefined){
            res.status(400).send({
                message: `${id}가 존재하지 않습니다.`
            })
        } else {
            channel.channelTitle = newTitle
            db.set(id, channel)
            res.status(200).send({
                message: `${oldTitle}에서 ${newTitle}로 변경되었습니다`
            })
        }
    })
    // 채널 삭제
    .delete((req,res)=>{
        let {id} = req.params
        id = parseInt(id)

        var channel = db.get(id)

        if(channel){
            db.delete(id)

            res.status(200).send({
                message:`${channel.channelTitle}가 삭제되었습니다.`
            })
        } else {
            res.status(400).send({
                message: `입력된 id ${id}가 데이터베이스에 없습니다.`
            })
        }
    })

    // 채널 개별 조회
    .get((req,res)=>{
        let {id} = req.params
        id = parseInt(id)

        var ch = db.get(id)

        if(ch){
            res.status(200).json(ch)
        } else {
            res.status(404).send({
                message: "다시 확인해주세요"
            })
        }
    })

module.exports = router;

7.2 채널 개별 조회

router 
    .route('/:id')
    .get((req,res)=>{
        let {id} = req.params
        id = parseInt(id)
        let sql = 'SELECT * FROM channels WHERE id =?'

        conn.query(sql, id, 
            function(err, results){
                if(results.length){
                    res.status(200).json(results)
                } else {
                    notFoundChannel(res)
                }
        })
    })

7.2 채널 전체 조회

router
    .route('/')
    .get((req,res)=>{
        var {userId} = req.body
        let sql = 'SELECT * FROM channels WHERE user_id = ?'

        if(userId){
            conn.query(sql, userId, function(err, results){
                if(results.length){
                    return res.status(200).json(results)
                } else {
                    return notFoundChannel(res)
                }
            }) 
        } else {
                return res.status(404).end();
            }
})

단축평가

userId && conn.query()

userId가 존재할 때, 쿼리 이하 부분 확인

res.end()

userId가 존재하지 않으면, 그냥 400 날리고 끝내기

8. 채널 생성

router
    .route('/')
    // 채널 생성
    .post((req,res)=>{
        let {name, user_id} = req.body
        if(name, user_id){
            let {name, user_id} = req.body

            let sql = 'INSERT INTO channels (name, user_id) VALUES (?, ?)'
            let values = [name, user_id]

            conn.query(sql, values,
                function(err, results){
                    res.status(201).json(results)
                }
            )
        } else {
            res.status(400).json({
                message: "요청 값을 제대로 보내주세요."
            })
        }
    })

name. user_id 가 req.body에 모두 담겨와야 하며, 각 타입도 문자열과 숫자여야 한다.

그런데 위의 코드의 경우에는 타입에 대한 확인이 되지 않아, user_id에 문자열이 담겨져도 201가 뜨게 되다. (db에는 insert 자동으로 걸러져서 업로드 되지 않지만, 위의 코드로는 오류가 발생하지 않는게 문제)

→ 유효성 검사가 필요하다!

1. “게시글” 스키마 생성

    MariaDB [(none)]> CREATE DATABASE Board;
    Query OK, 1 row affected (0.003 sec)
   
    MariaDB [(none)]> USE Board;
    Database changed

2. 사용자 테이블 생성

    CREATE TABLE users
    (
        id INT NOT NULL AUTO_INCREMENT,
        name VARCHAR (30) NOT NULL,
        job VARCHAR (100),
        birth DATE,
        PRIMARY KEY (id)
    );

   id는 숫자, 값이 없으면 안되니까 NOT NULL, 데이터 추가됨에 따라 자동으로 하나씩 오르도록 AUTO_INCREMENT

   name은 글자, 값이 없으면 안되어서 NOT NULL

   birth는 date 타입

   PK는 id

   DESC 테이블; → 테이블 속성 확인

    //결과
    MariaDB [Board]> DESC users;
    +-------+--------------+------+-----+---------+----------------+
    | Field | Type         | Null | Key | Default | Extra          |
    +-------+--------------+------+-----+---------+----------------+
    | id    | int(11)      | NO   | PRI | NULL    | auto_increment |
    | name  | varchar(30)  | NO   |     | NULL    |                |
    | job   | varchar(100) | YES  |     | NULL    |                |
    | birth | date         | YES  |     | NULL    |                |
    +-------+--------------+------+-----+---------+----------------+
    4 rows in set (0.010 sec)
   

3. 사용자 데이터 삽입

    //1
    INSERT INTO users (name, job, birth)
        VALUES ("gongu", "actor", "800123");
   
    //2
    INSERT INTO users (name, job, birth)
        VALUES ("gongu", "actor", "1980-01-23");

   1번처럼 삽입해도 자동으로 birth 형태를 변경해줌

    MariaDB [Board]> INSERT INTO users (name, job, birth)
        -> VALUES ("gongu", "actor", "800123");
    Query OK, 1 row affected (0.010 sec)
   
    MariaDB [Board]> SELECt * FROM users;
    +----+-------+-------+------------+
    | id | name  | job   | birth      |
    +----+-------+-------+------------+
    |  1 | gongu | actor | 1980-01-23 |
    +----+-------+-------+------------+
    1 row in set (0.004 sec)

   하지만, 1900년대인지 2000년대인지 확실하게 구분하기 위해서는(더 나아가 다른 테이블에서도 연도 확실히 해야 하니까) 2번과 같이 풀형태에 맞게 넣는게 더 좋음

4. 게시글 테이블 생성

    CREATE TABLE posts
    (
        id INT NOT NULL AUTO_INCREMENT,
        title VARCHAR (100) NOT NULL,
        content VARCHAR (2000),
        created_at TIMESTAMP DEFAULT NOW(),
        PRIMARY KEY (id)
    );

   
    MariaDB [Board]> DESC posts;
    +------------+---------------+------+-----+---------------------+----------------+
    | Field      | Type          | Null | Key | Default             | Extra          |
    +------------+---------------+------+-----+---------------------+----------------+
    | id         | int(11)       | NO   | PRI | NULL                | auto_increment |
    | title      | varchar(100)  | NO   |     | NULL                |                |
    | content    | varchar(2000) | YES  |     | NULL                |                |
    | created_at | timestamp     | YES  |     | current_timestamp() |                |
    +------------+---------------+------+-----+---------------------+----------------+
    4 rows in set (0.006 sec)

5. 게시글 데이터 삽입

    INSERT INTO posts (title, content)
        VALUES ("title", "content1");

    MariaDB [Board]> SELECT * FROM posts;
    +----+-------+----------+---------------------+
    | id | title | content  | created_at          |
    +----+-------+----------+---------------------+
    |  1 | title | content1 | 2024-05-08 19:19:18 |
    +----+-------+----------+---------------------+
    1 row in set (0.002 sec)

6. 게시글 테이블에 수정일자 추가

   테이블 구조(테이블, 컬럼, 제약 조건 등)을 수정하는데에는 ALTER, 테이블의 데이터를 수정하는데는 UPDATE

   ALTER 이후 확인하려면 DESC

   UPDATE 이후 확인하려면 SELECT

    ALTER TABLE posts
    ADD COLUMN updated_at DATETIME
    DEFAULT NOW()
    ON UPDATE NOW();

• (+) 데이터 삽입

    MariaDB [Board]> INSERT INTO posts (title, content)
        -> VALUES ("title2", "content2");

• 삽입 결과

    MariaDB [Board]> SELECT * FROM posts;
    +----+--------+----------+---------------------+---------------------+
    | id | title  | content  | created_at          | updated_at          |
    +----+--------+----------+---------------------+---------------------+
    |  1 | title  | content1 | 2024-05-08 19:19:18 | 2024-05-08 19:24:57 |
    |  2 | title2 | content2 | 2024-05-08 19:27:13 | 2024-05-08 19:27:13 |
    +----+--------+----------+---------------------+---------------------+
    2 rows in set (0.001 sec)

1. 게시글 테이블 id 2의 content 수정

    UPDATE posts
    SET content = "updated!"
    WHERE id = 2;

   • 결과

     ```sql MariaDB [Board]> SELECT * FROM posts;

   • ----+--------+----------+---------------------+---------------------+ | id | title | content | created_at | updated_at |

   • ----+--------+----------+---------------------+---------------------+ | 1 | title | content1 | 2024-05-08 19:19:18 | 2024-05-08 19:24:57 | | 2 | title2 | updated! | 2024-05-08 19:27:13 | 2024-05-08 19:32:10 |

   • ----+--------+----------+---------------------+---------------------+ 2 rows in set (0.001 sec)

2. 게시글 테이블에 사용자 칼럼 FK 추가

    ALTER TABLE posts
    ADD COLUMN user_id INT;
   
    ALTER TABLE posts
    ADD FOREIGN KEY(user_id)
    REFERENCES users(id);

   • 결과

     ```sql MariaDB [Board]> DESC posts;

   • ------------+---------------+------+-----+---------------------+-------------------------------+ | Field | Type | Null | Key | Default | Extra |

   • ------------+---------------+------+-----+---------------------+-------------------------------+ | id | int(11) | NO | PRI | NULL | auto_increment | | title | varchar(100) | NO | | NULL | | | content | varchar(2000) | YES | | NULL | | | created_at | timestamp | YES | | current_timestamp() | | | updated_at | datetime | YES | | current_timestamp() | on update current_timestamp() | | user_id | int(11) | YES | MUL | NULL | |

   • ------------+---------------+------+-----+---------------------+-------------------------------+

     
     <aside>
     ⭐ MUL vs FK
     
     </aside>
     
     FK인데 여러 키 값 중복해서 사용 가능하면 MUL

   • user_id 추가해보기

     ```sql MariaDB [Board]> SELECT * FROM posts;

   • ----+--------+----------+---------------------+---------------------+---------+ | id | title | content | created_at | updated_at | user_id |

   • ----+--------+----------+---------------------+---------------------+---------+ | 1 | title | content1 | 2024-05-08 19:19:18 | 2024-05-08 19:24:57 | NULL | | 2 | title2 | updated! | 2024-05-08 19:27:13 | 2024-05-08 19:32:10 | NULL | | 3 | title3 | content3 | 2024-05-08 19:57:56 | 2024-05-08 19:57:56 | NULL | | 6 | title3 | content3 | 2024-05-08 20:03:50 | 2024-05-08 20:03:50 | 1 |

   • ----+--------+----------+---------------------+---------------------+---------+ 4 rows in set (0.001 sec)

cf) MySQL 날짜, 시간 타입

1. DATE
   1. 날짜만
   2. YYYY-MM-DD
2. DATETIME
   1. 날짜 + 시간
   2. YYYY-MM-DD HH:MM:SS(24시간제)
3. TIME
   1. 시간
   2. HH:MM:SS
4. TIMESTAMP (자동 입력 기능)(이 부분이 DATETIME과의 다른 점)
   1. 날짜 + 시간
   2. YYYY-MM-DD HH:MM:SS(24시간제)
   3. Default → current_timestamp(), 시스템 시간대 정보에 맞게 일시를 저장함

2. JOIN

테이블 합치는 명령어

• JOIN 종류 4가지

  • Inner join

    • 두 테이블 조인할 때, 두 테이블에 모두 지정한 열의 데이터가 존재해야 함

      SELECT <열 목록>
      FROM <첫 번째 테이블>
        INNER JOIN <두 번째 테이블>
        ON <조인 조건>
      [WHERE 검색 조건]
      

  • outer join

    • 두 테이블 조인할 때, 1개의 테이블에만 데이터가 있어도 결과가 나옴

    • left outer join

    • right outer join

    • full outer join

      SELECT <열 목록>
      FROM <첫 번째 테이블(LEFT 테이블)>
        <LEFT | RIGHT | FULL> OUTER JOIN <두 번째 테이블(RIGHT 테이블)>
         ON <조인 조건>
      [WHERE 검색 조건]

  • cross join

    • 한쪽 테이블의 모든 행과 다른 쪽 테이블의 모든 행을 조인

      SELECT *
      FROM <첫 번째 테이블>
        CROSS JOIN <두 번째 테이블>

  • self join

    • 자기 자신과 조인

      SELECT <열 목록>
      FROM <테이블> 별칭A
        INNER JOIN <테이블> 별칭B
      [WHERE 검색 조건]

      

      SQL 기본 문법: JOIN(INNER, OUTER, CROSS, SELF JOIN)

• 코드

SELECT * FROM posts LEFT 
JOIN users ON posts.user_id = users.id;

• 결과

MariaDB [Board]> SELECT * FROM posts LEFT 
    -> JOIN users ON posts.user_id = users.id;
+----+--------+----------+---------------------+---------------------+---------+------+-------+-------+------------+
| id | title  | content  | created_at          | updated_at          | user_id | id   | name  | job   | birth      |
+----+--------+----------+---------------------+---------------------+---------+------+-------+-------+------------+
|  1 | title  | content1 | 2024-05-08 19:19:18 | 2024-05-08 19:24:57 |    NULL | NULL | NULL  | NULL  | NULL       |
|  2 | title2 | updated! | 2024-05-08 19:27:13 | 2024-05-08 19:32:10 |    NULL | NULL | NULL  | NULL  | NULL       |
|  3 | title3 | content3 | 2024-05-08 19:57:56 | 2024-05-08 19:57:56 |    NULL | NULL | NULL  | NULL  | NULL       |
|  6 | title3 | content3 | 2024-05-08 20:03:50 | 2024-05-08 20:03:50 |       1 |    1 | gongu | actor | 1980-01-23 |
+----+--------+----------+---------------------+---------------------+---------+------+-------+-------+------------+

데이터 삽입이 실패했어도 id가 계속 상승하는 모습을 볼 수 있음

→ AUTO_INCREMENT으로 설정한 것 때문임, 이 경우 디폴트 값을 AUTO_INCREMENT_LOCK_MODE로 하기

데이터 베이스 정의

데이터를 통합으로 효율적으로 관리하기 위한 데이터 집합체

데이터 구조화, 관리함으로써 데이터 중복 막고, 효율적이고 빠른 데이터 연산 가능하게 함

데이터 베이스 장점?

인터뷰에 잘 나오기 생각해보기

1.1 DBMS란?

DBMS 정의

데이터베이스를 운영하고 관리하기 위한 DBMS를 통해서 사용하도록 함

DBMS의 종류

오라클, mysql, maraidb 등

부동의 1위는 오라클

SQL

DBMS 사용하기 위한 언어는 SQL,

CRUD 언어 익숙해지기

2. RDBMS 쓰는 이유?

우리가 검색하고 생각하는 방법은

생각을 꼬리를 물고 진행됨

만약 배우 공유의 이름을 까먹어서 찾으려고 한다면

우리는 공유가 나온 드라마 “도깨비”라고 검색하고 도깨비의 등장 인물을 확인해서 찾을 것

우리 인간 세계의 검색 방법을 데이터베이스에 적용한 게 RDBMS

관계형 데이터 베이스

3. PK, 데이터 중복, 정규화

3.1 PK(primary key)

해당 테이블의 각 행을 유일하게 구별할 수 있는 키 값

각 행을 구별하기 위해서 필요함

3.2 정규화

우리가 게시글 제작을 위한 테이블을 구성한다고 생각해보기

홍길동과 이몽룡의 경우 이름이 중복됨

이 사람들이 과연 동명이인인지 동일인물인지 알기 위해서 직업, 생년월일이 추가적으로 기입된 부분도 테이블에 추가한다면, 매번 직업, 생년월일 등이 게시글 테이블에 추가될 것

같은 인물이라면, 쓸데없이 데이터가 너무 많고 관리하기 어려움

따라서, 작성자와 작성자의 정보를 담은 테이블을 각기 만들기(정규화)

정규화

테이블을 쪼갠다는 뜻

데이터 중복을 없앤다

4. 테이블 분리, 장-단점

4.1 테이블 분리시키기

4.2

장점: 분리해서 데이터 중복을 막는다

단점: 원하는 정보를 한 테이블에서 볼 수 없고 여러 테이블 이동해서 확인해야 한다 → 이건 이미 해결된 문제

4.3 PK

사용자 테이블의 사용자 번호는 PK

게시글 테이블의 사용자 번호는 다른 테이블(사용자 테이블)의 PK이고, 이걸 게시글 테이블에서는 FK(foreign key) 역할을 시킨 것

A 테이블에서 B테이블의 데이터를 찾아가고 싶을 때, 사용하는 key 값

최대한 B 테이블에서 PK 값을 A 테이블의 FK로 쓰는 것이 이상적임

5. 생년월일 바꿔보기, 1-N, 관계의 주인

데이터 베이스 테이블 간 어떤 관계를 가지고 있는지 연관관계는 3가지 종류 1:1, 1:N, N:N

게시글 vs 사용자의 경우 생각해보기

1) 사용자 1명 → 게시글 여러 개 1:N

2) 게시글 1개 당 : 사용자 1명 1:1

게시글 테이블을 보고 사용자 확인 가능 : 연관관계

→ 게시글 테이블을 보고 사용자랑 어떤 관계인지

사용자를 보고는 게시글 테이터 확인 불가능

테이블 간의 연관관계를 확인해야 하면, 양쪽의 관계 모두 생각해보고

테이블 그려보고, 확인

cf) 현업에 계신 분들? 설계 어떻게 잘하나?

DBA분들이 도와주시거나, 하나씩 설계 후, 이걸 기준으로 구현하면, SQL 꼬이거나 너무 길다면 → 설계 뜯어고치기

5. 유튜브 실습

채널 vs 사용자

1) 사용자 1명 → 채널 n명 = 1:n

2) 채널 1개 → 사용자 1명 = 1:1

채널 테이블을 보고 사용자 확인 가능 : 연관관계

→ 게시글 테이블을 보고 사용자랑 어떤 관계인지

사용자를 보고는 채널 데이터 확인 불가능

회고는 처음 해본다. 어색하지만, 여러 방법론 중에서 5F가 나랑 가장 잘 맞는 것 같아서 택했다. 다음엔 좀 더 개발 내용에 집중된 회고 방식을 사용해보고자 한다.

시간이 정말 빠르게 지나가는 것 같다. 벌써 5월이라니,, 거의 1년의 절반의 시간이 흘렀다. 하루하루 밀도있게 살아야겠다는 생각이 강하게 드는 요즘이다!

1. 잘한 것은 무엇인가?

a. 잘한 점은 데브코스를 신청했다는 것 자체가 아닐까싶다. 매일의 과제가 주어지고 그걸 해내가야만 한다는 의무가 주어진 것부터 나를 움직이게 해준다. b. 수업에서 깊게 다루지 않은 부분에 대해서 나름대로 찾아보고 공부한 점은 잘한 것 같다. 객체, express, req, res, params, query 등에 대해서 좀 더 깊게 찾아보려고 노력했다. c. 수업 내용을 여러 번 복습했다. 깃허브 실습 같은 경우도 여러 번 더 진행해서 손에 익히도록 노력했다.

2. 잘못한 것은 무엇인가?

1. 수업을 제때 듣지 못한 점이 역시 가장 아쉬운 부분이다. 원래 스케줄에 맞게 계속 진행해야 의욕도 생기고, 주변 동료분들이랑 활달히 이야기도 가능한데, 하루씩 밀리니깐 의욕이나 자신감도 줄어드는 게 느껴진다. 주말에 힘을 내서 들어야겠다.
2. 데브코스 이외에 하는 활동이 있어서 시간 조율이 어려운 것 같다. 시간 관리를 잘하고 좀 더 바쁘게 살아야 하는데, 체력이 부족해서 그런지 점점 의욕이 사라지는 것 같기도 하다ㅠㅠ
3. 팀 활동이나 스터디에 제대로 참여하지 못했다.

3. 무엇을 배웠는가?

1. 백엔드에 대해서 전혀 몰랐는데, http, express에 대해서 배울 수 있었다.
2. 데브코스 팀원분들은 정말 의욕적이고 에너지 넘치는 것 같다. 많이 부족한 팀원이라서 바쁘게 따라가야겠다는 생각이 들었다.
3. 깃허브는 그동안 제대로 공부해야지 생각만 하고 제대로 공부한 적이 없었는데, 깃허브 개념부터 CLI로 PR하고 branch로 작업하는 것들을 배우니 정말 좋았다. 강사님께서 정말 친절하고 재밌게 설명해주셔서 이해가 정말 쉬웠다.

4. 해결해야할 문제 / 남아있는 의문은 무엇인가?

1. 아직 제대로 깊게 찾아보지 못한 부분도 존재한다. (params, query 좀 더 깊은 내용)
2. 스케줄에 맞게 수업을 듣지 못하고 있다.
3. 코테 공부를 해야한다.
4. 그동안 공부하던 JS 공부가 백엔드 공부로 소홀해지는 것 같다.

5. 어떻게 개선할 것인가?

1. 아무래도 하루 수강 시간이 10시간으로 제한되어있다보니, 평일엔 힘들고 주말에 밀린 부분을 마저 수강해야겠다.
2. 프로그래머스 코테 문제를 하루에 3개씩 푸는 습관을 지속해야겠다. 꾸준히 하다가도 시간이 부족하면 항상 미뤄지는 게 아쉬웠다.
3. 하루에 꼭 JS 공부 시간은 남겨두어야겠다. JS 내용 정리도 다시 진행해야겠다.
4. 체력이 부족한 것 같아서, 운동을 좀 더 해야겠다. 운동 주기가 점점 길어지고 있었는데, 격일에 1번은 운동해야겠다.
5. 팀원분들과 더 긴밀하게 이야기할 수 있도록 적극 참여해야겠다. 정말루,,,

let db = new Map();

let notebook = {
    productName : 'Notebook',
    price: 200000
}

let cup = {
    productName : 'Cup',
    price: 1000000
}

let chair = {
    productName : 'Chair',
    price: 3000000
}

let poster = {
    productName : 'poster',
    price: 5000000
}

db.set(1, notebook) 
db.set(2, cup);
db.set(3, chair);
db.set(4, poster);

db value로 객체 저장

2. express + 객체

const express = require('express');
const app = express();

app.listen(3000);

// data setting
const youtuber1 = {
    channelTitle : 'MBCnews',
    sub : '434만명',
    videoNum : '24만개'

}

const youtuber2 = {
    channelTitle : 'essential',
    sub : '137만명',
    videoNum : '391개'

}

const youtuber3 = {
    channelTitle : '뉴진스',
    sub : '600만명',
    videoNum : '500개'

}

const db = new Map();

db.set(1, youtuber1)
db.set(2, youtuber2)
db.set(3, youtuber3)

console.log(db)

//REST API 설계
app.get('/youtuber/:id', function(req, res){
    let {id} = req.params

    id = parseInt(id)
    const youtuber = db.get(id)

    if (db.get(id) == undefined){
        res.json({
            message: '유튜버 정보를 찾을 수 없습니다'
        })
    } else {
        res.json(youtuber)}
})

1. db에 key, value(객체) 추가
2. youtuber 이하의 id 부분을 동적 변수로 한 url가 1번째 매개변수
3. 구조분해할당으로 id 변수 생성
4. id 변수 숫자로 변경
5. youtuber 변수에 db에서 id 키값으로 얻은 value 할당
6. if문으로, db에 id가 있으면, youtuber(value) 값 띄우고 없으면 없다는 메시지 전달

3. express 구조 이해하기

Expresss는 웹 프레임워크

웹 프레임워크 = 내가 만들고 싶은 웹 서비스를 구현하는데 필요한 모든 일을 틀 안에서 할 수 있는 것

3.1 express generator

application 구조를 다운받기 위해서 express-generator를 사용함

express는 node.js에서 웹프로젝트를 간편하게 만들기 위해서 생성된 프레임워크

express-generator는 웹프로젝트 구조(MVC)를 간편하게 생성해주는 도구

express generator 실행하기

Express application generator

npx express-generator

4. JS 4가지 함수

function add1(x,y){
    return x + y;
}

let add2 = function(x,y){
    return x + y
}

//화살표 함수 1
const add3 = (x,y) => {
    return x + y;
}

//화살표 함수 2
var add4 = (x,y)=> x + y

console.log(add1(1,2))
console.log(add2(1,2))
console.log(add3(1,2))
console.log(add4(1,2))

함수 생성법으로는 리터럴, 선언문, 표현식, 메소드, 화살표함수 등등 존재

화살표 함수는 ⇒ 라는 독특한 방법으로 함수 생성, function 대신에 사용하는 것

const express = require('express')
const app = express()
// express command+클릭하면 파일 확인 가능

app.listen(3000)

app.get('/products/:n', function(req,res){

    if (req.params.n > 10){
        console.log('url로 전달받은 숫자가 10보다 크네요.')
    }
    res.json({
        num: req.params.n
    })
})

이렇게, req.params.n이 숫자 10보다 큰 경우, 콘솔에 url로 전달받은 숫자가 10보다 크네요.라는 문구를 출력하도록 코딩해보자.

req.params.n은 “11”로 문자열인데, 콘솔에는 문구가 출력됨

즉, if 문의 조건을 돌릴 때, req.params.n과 숫자10을 비교하느라, req.params.n의 타입을 문자열에서 숫자로 자동으로 타입 변환을 한 것

이렇게 자동으로 타입 변환하는 건, 편리하지만, 오류나 문제를 일으킬 수 있기에, parseInt를 활용해 명시적으로 변환해줘야 한다.

const express = require('express')
const app = express()
// express command+클릭하면 파일 확인 가능

app.listen(3000)

app.get
('/products/:n', function(req,res){

    let number = parseInt(req.params.n) - 0
    console.log(number)

    res.json({
        num: number
    })
})

2. 유튜브로 req.params 연습하기

2.1 채널 닉네임 불러오기

const express = require('express');
const app = express();
app.listen(3000);

//채널: https://www.youtube.com/@NewJeans_official
//채널: https://www.youtube.com/@essentialme
//채널: https://www.youtube.com/@MBCNEWS11

app.get('/:nickname', function(req,res){
    const param = req.params

    console.log(param);

    res.json({
        channel : param.nickname,
    })

});

1. express 모듈 불러오기

2. app 상수에 express 모듈 할당

3. app.get 메서드를 통해서 url 닉네임 부분 긁어오고 화면에 띄우기

   1. 1번째 매개변수는 Url

   2. 2번째는 콜백함수

      1. 콜백함수의 첫 매개변수인 req의 params 메서드 결과를 param 상수에 할당

         • console.log한 결과

           { nickname: '@newjeansofficial' }
           { nickname: 'favicon.ico' }

      2. res.json으로 param 객체 상수의 값을 channel이라는 키 값에 할당 후 화면에 띄우기

         

2.2 채널 query 사용해보기

const express = require('express');
const app = express();
app.listen(3000);

// 뉴진스 무대: https://www.youtube.com/watch?v=P3HxnZckrEo&t=887s
// /watch 뒤에 ?부터는 query의 영역
// v 키와 P3HxnZckrEo 값, t 키와 887s 값
// 이 두 가지의 값은 req.query 객체로 저장됨

app.get('/watch', function(req,res){
    const q = req.query;

    console.log(param);

    res.json({
        video : q.v,
        time: q.t
    })

});

const q = req.query;에 v=P3HxnZckrEo&t=887s 저장됨

res.json() 으로 video : q.v, time: q.t 객체로 전달됨

(참고) URL 간단 구조

https://www.youtube.com/watch?v=P3HxnZckrEo&t=887s

https://www.youtube.com/watch?v=P3HxnZckrEo&t=887s - URL

https - 프로토콜

www.youtube.com - 도메인

/watch - Path (/)(파일의 경로)

?v=P3HxnZckrEo&t=887s - parameter (?)(key=value 형태로 이루어져있고, & 기호로 구분되어서 여러 개 존재 가능)(req.query로 관리)

(참고) query, params

2.3 구조분해할당

const array = [1,2,3,4,5] 

const [, num2, num3, , num5] = array
console.log(num2) //2
console.log(num5) //5

자바스크립트 배열 비구조화 배열은 인덱스값을 가지기에, 순서대로 구조분해할당이 됨

//구조분해할당 X
app.get('/:nickname', function(req,res){
    const param = req.params

    res.json({
        channel : param.nickname
    })

});

//구조분해할당 O
app.get('/:nickname', function(req,res){
    const {nickname} = req.params;

    res.json({
        channel: nickname
    })
})

2.4 유튜브 실습 2 - 객체 생성 후 테스트

let youtuber1 = {
    channelTitle : 'MBCnews',
    sub : '434만명',
    videoNum : '24만개'

}

let youtuber2 = {
    channelTitle : 'essential',
    sub : '137만명',
    videoNum : '391개'

}

let youtuber3 = {
    channelTitle : '뉴진스',
    sub : '600만명',
    videoNum : '500개'

}

app.get('/:nickname', function(req,res){
    const {nickname} = req.params;

    if (nickname == '@MBCNEWS11'){
        res.json(youtuber1)
    } else if (nickname == '@essentialme'){
        res.json(youtuber2)
    } else if (nickname == '@NewJeans_official'){
        res.json(youtuber3)
    } else {
        res.json('찾으시는 채널이 없습니다.')
    }

})

http://localhost:3000/@NewJeans_official

검색 하면, 다음의 화면 나옴

2.6 네이밍 룰

1. 파스칼(PascalCase) - 첫 글자, 두번째 단어 첫 글자 모두 대문자
2. 낙타(camelCase) - 두번째 단어 첫글자 대문자
3. 케밥(kebab-case) - 단어 사이 연결은 하이픈(-)
4. 스네이크(snake_case) - 단어 사이 연결은 언더바(_)

네이밍 관행

1. 파일, 폴더
   1. 두 개 이상의 단어 합쳐서 쓰면, 첫 번째 단어와 두 번째 단어 사이에 알파벳 소문자, 하이픈 - 사용
   2. 예시) demo-api
2. 변수, 함수
   1. 두 개 이상의 단어 합쳐서 쓰면, 두번째 단어의 첫 글자를 대문자 사용
   2. 예시) channelTitle

3. Map

3.1 map이란

let db = new Map();

db.set(1, "notebook") //key로 value를 찾을 수 있는 한쌍 지정
db.set(2, 'cup');
db.set(3, 'chair');

console.log(db);

console.log(db.get(1));
console.log(db.get(2));
console.log(db.get(3));

Map 생성자 함수로 db 변수 생성

set 메서드로 Map 안에 key, value 추가

get 메서드로 Map 안의 key, value 가져오기

3.2 express + map

const express = require('express');
const app = express();
app.listen(3000);

let db = new Map();

db.set(1, "notebook") 
db.set(2, 'cup');
db.set(3, 'chair');

console.log(db);

console.log(db.get(1));
console.log(db.get(2));
console.log(db.get(3));

app.get('/:id', function(req,res){
    let {id} = req.params
    id = parseInt(id)
    if (db.get(id) == undefined){
        res.json({
            message: '없는 상품입니다.'
        })
    } else {
        res.json({
            id : id,
            productName: db.get(id)
        })
    }
})

1. 구조분해할당으로, id 값을 id 상수에 할당
2. parseInt 함수로 문자열 → 숫자로 변경
3. db에서 id키 값을 이용해서 value값 찾고, 없으면 ‘없는 상품입니다’ 띄우기
4. 있으면, res.json으로 화면에 id 값과, id 키에 해당하는 value 값 객체로 전달해서 띄우기

http는 내장모듈

express는 외부 모듈

둘 다 웹 서버 모듈이지만 express가 좀 더 간결

• http 사용하기(내장 모듈이라 npm 불필요)

let http = require('http'); // 내장 모듈(npm 불필요)

function onRequest(request, response){
    response.writeHead(200, {'Content-type' : 'text.html'});
    response.write('Hello Node.js');
    response.end();
}

http.createServer(onRequest).listen(8888); 
// http 모듈의 createServer 함수에 할일을 다 한 다음에
// onRequest 콜백 함수를 실행시킴

• npm으로 express 모듈 설치 후 사용하기

npm install express

const express = require('express')
const app = express()

app.get('/', function (req, res) {
  res.send('Hello World')
})

app.listen(3000)

1. 내장 메서드인 http랑 형태가 다름, 좀 더 간결
2. app.listen() 이 부분은 어디에 있든지 상관 없음, 순서 상관 없음
3. express를 command클릭하면 세부 파일로 이동 가능

• 추가적인 작업해보기(/test, /test/1 경로 추가해보기)

const express = require('express')
const app = express()

app.get('/', function (req, res) {
  res.send('hello world')
})

// API: GET + "http://localhost:3000/test"
// "test success"
app.get('/test', function (req, res){
    res.send("test success")
})

// API: GET + "http://localhost:3000/test/1"
// "one!"
app.get('/test/1', function (req, res){
    res.send("one!")
})

app.listen(3000)

2. 객체로 작업하자, JSON

app.get('/products/1', function(req,res){
    res.send('Node.js를 배워보자(책)');
    res.send(2000);
})

이렇게 보내게 되면, 첫 번째 코드인 Node.js를 배워보자(책)만 화면에 출력됨.

뒷 줄부터는 출력이 안된다!

따라서, 데이터를 텍스트가 아니라 객체 형태로 보내야 한다

• 객체란?

우리 세상은 다 객체로 이루어져있다

교과서적으로는 0개 이상의 프로퍼티 혹은 메서드로 구성된 집합이라고 볼 수 있다.

좀 다르게 해석하면 주어 자리에 있을 때 문장이 만들어지면 그건 다 객체다.

2.1 JSON

JavaScript Object Notation

즉, 자바스크립트 객체 표기법이다.

임의의 객체 생성해보자

const book = {
    title : 'Node.js를 공부해보자',
    price : 20000,
    description: '이 책 좋음'
}

send 메서드는 객체든, html이든 모든 종류 다 보내주는 메서드이고

    /**
     * Send a response.
     *
     * Examples:
     *
     *     res.send(new Buffer('wahoo'));
     *     res.send({ some: 'json' });
     *     res.send('<p>some html</p>');
     *     res.status(404).send('Sorry, cant find that');
     */

좀 구체적이고 명확하게 객체를 보내고 싶으면, json 메서드 사용하기, 객체 형태로 넣기

const express = require('express')
const app = express()

app.listen(3000)

app.get('/products/1', function(req,res){
    res.json({
        title : 'Node.js를 공부해보자',
    price : 20000,
    description: '이 책 좋음 왜? 김송아가 지음'
})

객체를 따로 빼서 작업하는 게 좀 더 객체 지향적인 모습

const express = require('express')
const app = express()

app.listen(3000)

let nodejsbook = {
    title : 'Node.js를 공부해보자',
    price : 20000,
    description: '이 책 좋음 왜? 김송아가 지음'
}

app.get('/products/1', function(req,res){
    res.json(nodejsbook);
})

3. params

다음의 상황 가정해보자.

product/1 url에서는 1을 프린팅,

product/2 url에서는 2를 프린팅,

product/3 url에서는 3을 프린팅

3개 정도야 하드코딩이 가능하더라도

app.get('/products/1', function(req,res){
    res.send({
        num : 1
    })
})

app.get('/products/2', function(req,res){
    res.send({
        num : 2
    })
})

app.get('/products/3', function(req,res){
    res.send({
        num : 3
    })
})

1000개씩 작업하려면, 불가능함

효율적으로 작업하기 위해서 params이 존재

const express = require('express')
const app = express()

app.listen(3000)

app.get('/products/:n', function(req,res){
    // : -> 어? 나한테 url로 매개변수 전달해주나보다?
    // products/_ 빈칸에 오는 값을 n이라는 변수에 담아줘!
    // req.params
    res.json({
        num: req.params.n
    })
})

app.get() 이 블록 자체가 라우트를 정의하는데 사용되는 매서드. 이 메서드는 HTTP GET 요청을 처리하는 새로운 라우트를 어플리케이션에 추가함.

첫 매개변수는 경로(path, 클라이언트가 서버에 보내는 요청의 URL 일부)이고, 두 번쨰 매개변수는 해당 경로에 대한 요청을 처리하는 콜백 함수이다.

콜백 함수에는 (req, res)라는 두 매개변수 존재

req

req는 HTTP 요청에 대한 전체 정보 포함하고 있음

1. req.url: 요청된 URL전체 경로와 쿼리 문자열을 나타내는 문자열

2. req.params: 라우트의 경로 매개변수에 대한 정보를 담고 있는 객체

3. req.query: 쿼리 매개변수에 대한 정보 담고 있는 객체

4. req.method: HTTP 메서드를 나타내는 문자열

   등등 이외 여러 정보 포함...

/localhost/:n라는 경로가 있으면(:n은 URL에서 동적으로 변경되는 부분) req.params는 객체고, req.params.n은 해당 매개변수 값에 접근하는 방식 req.params.n은 :n에 해당되는 값

예를 들어, /products/123과 같은 URL에서 123은 :n에 해당함.

res

req에서 얻은 이 값을 응답으로 클라이언트에게 JSON 형식으로 전송한다. 요청이 /products/123이라면, 응답으로는 { num: '123' }이 반환된다.

참고로, res도 객체라서, 여러 메서드가 존재함.

1. res.send: 문자열, 객체, 배열 등

2. res.json: JSON 응답

3. res.render: 뷰 탬플릿을 렌더링해서 HTML 페이지 생성

   등등

HTTP에 담아보내는 나의 목적 = HTTP method

HTTP = 규약

따라서, 정해진 용어가 존재하고 적절한 method를 사용해야 함

method

• 생성: POST
• 조회: GET
• 수정
  • PUT(덮어쓰기)
  • PATCH(부분 수정, 바뀐 값만 수정), 마인 페이지에서 이름만 바꾸면 부분 수정
• 삭제: DELETE
• 그외) HEAD, OPTIONS, CONNECT, TRACE

2. Node.js

백엔드에만 쓰이는 게 아니다!(페이팔, 이베이 등은 node.js를 써서 유명하긴 함)

node.js는 여러 자바스크립트를 위해 운동장 깔아주는 역할, 즉, 자바스크립트가 스크립트 언어 이상으로 프로그래밍 언어 역할을 할 수 있도록 지원하는 플랫폼.

Node.js는 넷플릭스, 에어비엔비, 나사, 우버 등에서 사용됨

2.1 Node.js 특징

1. 싱글스레드
2. 이벤트 기반
3. 논블록킹 I/O

세 가지 특징 쉽게 이해하기

주방장이 한 명인 주방이 있다고 가정해보자.

주방장이 한 명이면, 주문이 자꾸 밀려들어와도 혼자서, 한명이서 어떻게든 요리를 해내야 한다.

→ `싱글 스레드`

요리 2개가 동시에 들어왔다고 가정해보자. 하나는 라면, 하나는 볶음밥이다.

라면의 요리 소요 시간은 총 10분이지만 물 끓이는데 5분이 걸린다.

볶음밥은 바로 5분동안 볶아주면 된다. 

그렇다면, 라면이 끓는동안 아무것도 안하고 라면물만 지켜보는 게 아니라, 그 시간에 볶음밥을 볶아야 옳은 선택이다.

→ `논블록킹 I/O`

요리 주문이 안 들어온다면, 요리를 할 필요가 없다.

→ `이벤트 기반` (**이벤트가 있어야만 일을 한다**(즉, 이벤트가 없다면 일을 안 한다))

2.2 실습

노드 버전 확인 명령어

node -v

setTimeout(원하는 시간이 지나고 안의 인자로 받은 것 실행해주는 모듈)모듈 사용해보기

순서상으로는 third보다 second가 먼저 출력되어야 하는데, 모듈 덕분에 third가 먼저 출력된 모습

function first(){
    console.log('첫 번째');
}
function second(){
    console.log('두 번째');
}
function third(){
    console.log('세 번쨰');
}

first();
setTimeout(second, 2000);
third();

2.3 모듈

모듈은 선배 개발자들이 미리 만들어놓은 코드 덩어리.

어디까지를 모듈이라고 칭할지, 덩어리를 어떻게 정의할지 다 내 마음!

하나의 함수를 각자 마음대로 짜는 것처럼 모듈도 마음대로 짤 수 있음

모듈을 가져다가 쓰는 방법 2가지

1. 기본 내장된 것만 쓰기 (마치 앞서 봤던 setTimeout())
2. 외부 모듈 사용하기(npm 명령어 사용)

2.4 라이브러리 vs 프레임워크

우리가 도서관에 가면, 엄청 많은 책들이 세부적으로 분류가 되어있고, 우리는 필요한 기준(작가, 내용, 출판사 등)에 따라서 판별해서 책을 고르게 된다.

모든 책을 다 볼 필요도 없고 본인 기준에서 원하는 책을 볼 수 있다는 장점도 있지만, 너무 방대한 선택지 중에서 고르기 어렵거나 힘들고 찾는데 시간이 오래 걸린다는 단점도 있다.

라이브러리는 모듈과 거의 비슷하다고 볼 수 있다.

모듈처럼 이미 만들어진 코드 덩어리이고 우리는 이걸 편의와 목적에 따라서 가져와 쓸 수 있다.

프레임워크는 틀 안에서 일하는 것이다.

내가 만들고 싶은 서비스를 구현하는데 필요한 모든 일을 틀 안에서 이미 존재하는 것이다.

프레임워크는 서비스 완성을 위해 필요한 라이브러리(모듈)을 다 틀 안에 넣어뒀다.

2.5 npm, figlet 사용해보기

이미 내장된 모듈은 그냥 사용하면 되지만, 외부 모듈을 사용하려면 특별한 명령어가 필요하다.

바로, npm

NPM

외부 모듈을 내 프로젝트에 설치할 수 있도록 해주는 역할 담당하는 NPM

• 이 명령어로 어떻게 쉽게 설치가 가능하지?

우리 입장에서는 간단하지만, npm 입장에서는z 파일 다운받아서 우리 대신에 풀어서 쓸 수 있도록 하는 것

npm이 저장소에 외부 모듈을 설치를 우리가 원하는 프로젝트에 자동으로 해줌

• 설치

npm install 모듈

• 제거

npm uninstall 모듈

• 모듈 설치

npm i 모듈명 -g 

내 컴퓨터에 있는 모든 프로젝트에 해당 모듈 설치하는 것 <추천하진 않음>

유명한 모듈 중 하나인 figlet 사용해보는 실습을 해보자.

npm 사이트에서 찾아서 코드 vscode에서 돌려보자.

npm: figlet

var figlet = require("figlet");

figlet("Hello World!!", function (err, data) {
  if (err) {
    console.log("Something went wrong...");
    console.dir(err);
    return;
  }
  console.log(data);
});

결과물

  _   _      _ _        __        __         _     _ _ _ 
 | | | | ___| | | ___   \ \      / /__  _ __| | __| | | |
 | |_| |/ _ \ | |/ _ \   \ \ /\ / / _ \| '__| |/ _` | | |
 |  _  |  __/ | | (_) |   \ V  V / (_) | |  | | (_| |_|_|
 |_| |_|\___|_|_|\___/     \_/\_/ \___/|_|  |_|\__,_(_|_)

작동 방식

figlet(매개변수1,매개변수2)

매개변수1은 프린팅하고 싶은 문자

매개변수2는 콜백함수

문자열을 받아서, 아스키 아트를 생성한 후 두번째 매개변수 function 콜백 함수를 실행하는 방식

• 왜 익명의 함수를 전달할까?
  • 이 함수를 쓸 일이 다른 곳은 없어서, 일회용으로 사용하려고
• 왜 매개변수로 함수를 받을까?
  • figlet을 만든 사람이 매개변수로 함수를 받기로 해서…

콜백 함수 쪼개보기

let http = require('http'); // 내장 모듈(npm 불필요)

function onRequest(request, response){
    response.writeHead(200, {'Content-type' : 'text.html'});
    response.write('Hello Node.js');
    response.end();
}

http.createServer(onRequest).listen(8888); 
// http 모듈의 createServer 함수에 할일을 다 한 다음에
// onRequest 콜백 함수를 실행시킴

이전에 작업했던 HTTP 서버 파일

http.createServer(onRequest).listen(8888);

이 부분에서 HTTP 모듈의 createServer 함수에 할일을 다 한 다음에

onRequest 콜백 함수를 실행시키는 것 확인 가능

var - 함수레벨 스코프, 전역 변수

let - 블록 레벨 스코프

const - 블록 레벨 스코프, 상수, 초기 할당 이후 변경 불가능

템플릿 문자열 도입 전

console.log(num1 + 'X' + num2 +  "=" + num3);

템플릿 문자열 도입 후

console.log(`${num1} X ${num2} = ${num3}`);

백틱과 ${}를 이용해서 간단하게 문자열 생성 가능, 특히나 변수 삽입이 매우 쉬워짐

2.6 모듈 지우기

npm uninstall figlet

// 결과
// removed 1 package, and audited 12 packages in 535ms

npm uninstall 명령어 사용하면 됨

모듈 객체는 package.json에서 확인 가능

figlet 모듈 설치 전에는 객체 안에 아무것도 없었는데 반해서

설치 후에는 figlet 정보 확인 가능

dependencies는 사용할 것들에 대한 키

package.json vs package-lock.json

후자는 좀 더 구체적인 정보를 담은 파일

웹 서비스는 정적 페이지에 대해 대응(변동이 없음)

웹 어플리케이션부터 동적 페이지 작업 가능(변동이 존재, 데이터 처리와 연산 등이 발생, 매번 페이지 직접 바꾸는 게 아니라 자동으로 변하도록)

1.1 API

API는 application programming interface의 약자

인터페이스란?

중간에서 양쪽에 있는 친구들을 중재/매개체가 되어주는 역할

GUI graphic user interface

컴퓨터(프로그램)한테 명령 내릴 때, 그래픽을 사용해서 명령을 내리는 방식

CLI command line interface

명령어 문장(줄)로 프로그램에게 명령을 내리는 방식

API란?

서울 교통공사의 데이터베이스를 사용하고 싶다고 가정해보자.

데이터베이스를 이용하고 싶은 개인에게 수정 권환 줘도 되나?

어떻게 개인은 어플 만들까?

사용자가 직접 서울 교통 공사 데이터베이스에 접근하는 게 아니라 한겹 씌워진 API라고 하는 곳에 요청

우리는 API라는 인터페이스를 통해서 여러 요청을 하고 응답도 받음

백엔드는 API, 데이터베이스 모두 만드는 직업

1.2 REST API

API 형식

API는 데이터 아무렇게나 주면 되는 거임?

웹은 인터넷망 속의 가상 공간.

웹 백엔드이든 앱 백엔드이든

원격으로 통신하게 된다면, 우리는 무조건 인터넷망의 약속 규약을 지켜야 한다.

웹은 특히나 인터넷을 돌아다니기 위한 규약을 지켜야 한다.

HTTP

HTTP는 마치 편지의 형식같은 느낌

웹 개발자는 HTTP를 지켜야 함 (Hypertext Transfer Protocol)

과거에는 프로토콜 형식을 따르지 않았다.

그러다가 HTTP 창시자가 효율 극대화를 위해 형식 따르는 것 권유

REST API는 HTTP 규약을 잘 따른 API

REST API vs RESTful API

전자는 HTTP 규약 잘 따른 경우

후자는 너무너무 레스트스러운, 즉 HTTP 규약을 매우매우 잘 따른 경우

1.3 HTTP에 담아 보내야하는 것들

인터넷으로 연결된 클라이언트와 서버는 웹 프로토콜인 HTTP를 사용해서 데이터를 주고 받는다.

인터넷 상에서 공유/전달하고 싶은 모든 것들은 다 HTTP에 넣어서 보내야 한다.

목적의 중요성

바디에는 실제로 전달해줄 데이터 값 전달 가능

바디에는 데이터 전달 뿐만 아니라

요청 시에 이 데이터 좀 줄래?라고 말하면서

데이터 달라고 하는 목적도 말할 수 있음

전체 상품보고 싶어 = 전체 상품 리스트를 주겠지 → “조회”의 목적

RESTful스러울려면 목적 밝히는 것이 중요하다.

url

인터넷 상에서 웹 페이지가 어디있는지 “위치”를 알려주는 것 + 데이터 연산 해달라고 서버에 요청 보내는 방법!!!

즉 웹 페이지 주소라고 생각하면 됨

http://localhost:8888

localhost: 내 컴터 주소

세부요청을 할 때 같은 주소를 보내면 안된다.

localhost 뒤의 내용이 달라야 한다. 즉, 내 컴퓨터 주소 뒤로 뭔가를 추가해야 한다.

(예시)

https://www.lotteon.com/p/display/main/lottemart

롯데마트라는 전체 몰에서 롯데마트라는 세부 사항 url

1.4 URL + method 연습 1

RESPapi 스러운 URL 규칙

1. 소문자만 사용
2. 언더바(_) 사용 안함, 대신 하이픈(-) 사용
3. 마지막에 / 포함 안 함
4. 행위를 포함하지 않는다.(⚠️) → 목적을 포함하지 않음. 메소드로 빼낼 수 있는 건 포함하지 않고 따로 method로
5. 파일 확장자 포함하지 않는다
6. 복수형을 쓴다.

수정 전

• 상품 등록 http://localhost:8888/get product
• 전체 상품 조회 http://localhost:8888/select_all_products
• 전체 상품 삭제 http://localhost:8888/DeleteAllProducts

RESTapi스럽게 수정

• 상품 등록 http://localhost:8888 ⇒ “POST” /product
• 전체 상품 조회 http://localhost:8888 ⇒ “GET” /products
  • all-products X, 어차피 products 복수형 안에 all의 의미 포함
• 전체 상품 삭제 http://localhost:8888 ⇒ “DELETE” /products

1.5 API 사용법

세부적으로 API 사용 방법에 대해서 쇼핑몰 예시를 통해서 생각해보자.

1. 전체 상품 조회

   

2. 세부 상품 조회

3. 전체 상품 관리

   

4. 세부 상품 관리

   

API 설계

상품 전체 조회

• 메서드는 GET
• path는 /products

상품 개별 조회

• 메서드는 GET
• path는 /products/{id}
  1. 전체 상품 중에서 개별 상품이라서 products 복수형
  2. 전체 상품에서 개별 상품을 조회하니까, 전체상품 조회하는 부분까지는 통일하고 세부경로만 변수로 설정하는 것이 효율적임

상품 수정

• 메서드는 PUT
• path는 /products/{id}

그림 상단 order list 클릭 시 order list.html로 이동

go home 클릭 시 메인 페이지로 이동

메인 하단의 order 클릭 시 order.html로 이동

2. 백엔드

2.1 백엔드의 구조

클라이언트 ↔ 웹 서버

웹 서버는 정적 페이지에 대응

*정적 페이지 - 화면의 내용/데이터 등의 변동이 없는 페이지

*동적 페이지 - 데이터 처리/연산을 통해 화면의 내용, 데이터가 변하는 페이지

웹 어플리케이션 서버는 동적 페이지 처리 진행

필요한 데이터 연산을 위해 데이터베이스와 연결되어 있고, 데이터 조회/수정/삭제에 대한 처리를 요청함

*데이터 베이스 - 데이터를 통합해 효율적으로 관리하기 위한 데이터 집합체를 칭함

3. Node.js

자바스크립트를 스크립트 언어 이상의 프로그래밍 언어 역할이 가능하도록 지원하는 플랫폼

node js를 이용해 자바스크립트로 백엔드 구현 가능

자바스크립트에게 운동장 제공

node js라는 운동장에서 활동할 수 있게 됨

//server.js

let http = require('http'); // http 모듈은 node js가 가진 기존 모듈 중 하나

function onRequest(request, response){
    response.writeHead(200, {'Content-Type' : 'text/html'});
    response.write('Hello.js'); //writebody 요약
    response.end();
}

http.createServer(onRequest).listen(8888);
// localhost:8888
// 우리가 만든 함수로 서버가 일 할건데, 클라이언트가 그걸 받을려면 8888 주파수로 맞춰야 한다

// 클라이언트랑 서버가 대화하려면 주파수가 같아야 함
// 프로토콜 마치 편지 쓸 떄의 형식처럼
// http 프로토콜 템플릿 존재

작성 후 node.js 실행하려면

터미널에서 node 파일명

중단하려면 ctrl + c

3.1 프로토콜

//server.js

function onRequest(request, response){
    response.writeHead(200, {'Content-Type' : 'text/html'});
    response.write('Hello.js');
    response.end();
}

head에는

1. 통신상태가 어떤지?
   1. 200 - 정상이다
2. 응답이 어떤 형태인지?
   1. text/html이다.
3. 내용은 “Hello.js”이다.
4. 이제 보낼 내용 끝! → response.end();

3.2 모듈화

우리 서버도 모듈처럼 만들기

server.js 파일 외에 index.js 파일 생성 후 다음의 코드 삽입 후 터미널에서 서버 돌리면 작동됨

let http = require('http'); // http 모듈은 node js가 가진 기존 모듈 중 하나

function onRequest(request, response){
    response.writeHead(200, {'Content-Type' : 'text/html'});
    response.write('Hello.js');
    response.end();
 }

http.createServer(onRequest).listen(8888);
}

let server = require('./server');

index.js를 통해서 server.js가 실행됨 서버 모듈을 단순히 불러왔다는 사실만으로 켜지면 맘대로 껐다가 켰다가 유연성이 떨어짐

따라서, server.js에서 start 함수 생성 후 안에 기존의 함수 삽입

함수를 부를 때 코드가 실행되도록 하면 됨

let http = require('http'); // http 모듈은 node js가 가진 기존 모듈 중 하나

function start(){
    function onRequest(request, response){
        response.writeHead(200, {'Content-Type' : 'text/html'});
        response.write('Hello.js');
        response.end();
    }

    http.createServer(onRequest).listen(8888);
    // localhost:8888
    // 우리가 만든 함수로 서버가 일 할건데, 클라이언트가 그걸 받을려면 8888 주파수로 맞춰야 한다

    // 클라이언트랑 서버가 대화하려면 주파수가 같아야 함
    // 프로토콜 마치 편지 쓸 떄의 형식처럼
    // http 프로토콜 템플릿 존재


}

exports.start = start;
// 바깥에서 start를 사용할 수 있도록 함
// 현재 코드 안의 start 함수를 바깥에서도 사용할 수 있도록 만들어줌

let server = require('./server');
// index.js를 통해서 server.js가 실행됨
// 서버 모듈을 단순히 불러왔다는 사실만으로 켜지면 맘대로 껐다가 
// 켰다가 유연성이 떨어짐

server.start();

이렇게 만들고 작동하면 오류가 발생

• server.js 파일에서는 전역 변수, 함수만 존재해서 globalThis 객체의 프로퍼티로 저장되고, 다른 모듈에서도 접근 가능 (이게 최상위 스코프니까, exports 작업 없이 require 해도 다른 파일에서도 globalThis 객체를 통해서 server.js파일의 function에 접근 가능)
• 하지만, index.js 파일의 경우, function onRequest 함수 위에 start 함수가 상위 함수로 추가됨. onRequest 함수는 start의 지역 함수라서 start 함수 내부에서만 접근 가능하고, 다른 모듈에서 직접 onRequest 함수에 접근 불가함. 다른 모듈에서도 사용하려면 module.exports를 통해서 명시적으로 내보내기를 해야 함.
• 전역 함수랑 변수만 존재하는 파일이더라도 혼란스럽게 전역함수가 남용되는 걸 막기 위해서 exports 작업을 명시적으로 진행해줘야 함→ 모듈 간 의존성 명확히하고 코드 가독성과 유지 보수성 높임

3.3 url(uniform resource locator)

url은 인터넷 상에서 웹 페이지가 어디 있는지 위치를 알려주는 주소.

쉽게 말해서 웹 페이지 주소라고 할 수 있음

http://localhost:8888

로컬호스트: 내 컴퓨터 주소(각자의 컴퓨터가 스스로 로컬 호스트라고 칭함)

//server.js

let http = require('http'); // http 모듈은 node js가 가진 기존 모듈 중 하나

function start(){
    function onRequest(request, response){
            let pathname = url.parse(request.url).pathname;
            console.log('pathname : ' + pathname);

        response.writeHead(200, {'Content-Type' : 'text/html'});
        response.write('Hello.js');
        response.end();
    };

    http.createServer(onRequest).listen(8888);

    // localhost:8888
    // 우리가 만든 함수로 서버가 일 할건데, 클라이언트가 그걸 받을려면 8888 주파수로 맞춰야 한다

    // 클라이언트랑 서버가 대화하려면 주파수가 같아야 함
    // 프로토콜 마치 편지 쓸 떄의 형식처럼
    // http 프로토콜 템플릿 존재


}

exports.start = start;
// 바깥에서 start를 사용할 수 있도록 함
// 현재 코드 안의 start 함수를 바깥에서도 사용할 수 있도록 만들어줌

url 모듈은 url을 통해서 입려된 값을 사용할 수 있도록 도와줌

url 모듈 종류 3가지

• parse() - 문자열 입력 → 객체 생성
• format() - 객체 입력 → 문자열 생성
• resolve() → 상대 Url을 절대 url로 변경

3.4 router

어디로 갈지 경로 정해주는 파일

route + er

//router.js

function route(pathname){
    console.log('pathname :' + pathname);
}

exports.route = route;

서버에서 pathname 받아옴

pathname은 서버를 먼저 받아야 하지만

console.log 작업하는 건 route의 역할로 위임

console.log 작업하는 함수 생성 후, 모듈화해서 서버에서 부를 수 있도록 작업

//server.js

let http = require('http'); // http 모듈은 node js가 가진 기존 모듈 중 하나

function start(route){
    function onRequest(request, response){
            let pathname = url.parse(request.url).pathname;
            route(pathname);
        response.writeHead(200, {'Content-Type' : 'text/html'});
        response.write('Hello.js');
        response.end() 
    };

    http.createServer(onRequest).listen(8888);

    // localhost:8888
    // 우리가 만든 함수로 서버가 일 할건데, 클라이언트가 그걸 받을려면 8888 주파수로 맞춰야 한다

    // 클라이언트랑 서버가 대화하려면 주파수가 같아야 함
    // 프로토콜 마치 편지 쓸 떄의 형식처럼
    // http 프로토콜 템플릿 존재


}

exports.start = start;
// 바깥에서 start를 사용할 수 있도록 함
// 현재 코드 안의 start 함수를 바깥에서도 사용할 수 있도록 만들어줌

모듈화된 route 함수를 통해서 console.log 작업을 진행해야 하는데,

server 파일에서 route 데이터 가져올 방법은?

index.js 파일에서 서버 파일로부터의 데이터를 가지고 기동해주는 역할 진행하니까, start에 매개변수로 route 삽입 후 index가 실행하도록 작업

//index.js

let server = require('./server');
let router = require('./router');

server.start(router.route);

3.5 Url에 따라 다른 콘솔 찍기

router가 루트를 분배해서 경로를 지정하면 요청을 처리하는 파일인 requestHandler.js 생성

//requestHandler.js

function main(){
    console.log('main');
}

function login(){
    console.log('login');
}

let handle = {};
handle['/'] = main;
handle['/login'] = login;

exports.handle = handle;

//index.js

let server = require('./server');
let router = require('./router');
let requestHandler = require('./requestHandler');

server.start(router.route, requestHandler.handle);

handle 모듈 소환 후, 서버에 route 모듈과 함께 넘겨줌

//server.js

let http = require('http'); // http 모듈은 node js가 가진 기존 모듈 중 하나

function start(route, handle){
    function onRequest(request, response){
            let pathname = url.parse(request.url).pathname;
            route(pathname,handle);

        response.writeHead(200, {'Content-Type' : 'text/html'});
        response.write('Hello.js');
        response.end() 
    };

    http.createServer(onRequest).listen(8888);

    // localhost:8888
    // 우리가 만든 함수로 서버가 일 할건데, 클라이언트가 그걸 받을려면 8888 주파수로 맞춰야 한다

    // 클라이언트랑 서버가 대화하려면 주파수가 같아야 함
    // 프로토콜 마치 편지 쓸 떄의 형식처럼
    // http 프로토콜 템플릿 존재


}

exports.start = start;
// 바깥에서 start를 사용할 수 있도록 함
// 현재 코드 안의 start 함수를 바깥에서도 사용할 수 있도록 만들어줌

router에서도

//router.js

function route(pathname, handle){
    console.log('pathname :' + pathname);

    handle[pathname]();
}

exports.route = route;

http://localhost:8888/main

http://localhost:8888/login

3.6 URL에 따라 프론트엔드에 다른 response 보내기

//requestHandler.js

function main(response){
    console.log('main');


  response.writeHead(200, {'Content-Type' : 'text/html'});
  response.write('Main page');
  response.end();
}

function login(response){
    console.log('login');

    response.writeHead(200, {'Content-Type' : 'text/html'});
  response.write('Login page');
  response.end();
}

let handle = {};
handle['/'] = main;
handle['/login'] = login;

exports.handle = handle;

각 requestHandler 함수에 response를 처리할 수 있는 기능 추가

//router.js

function route(pathname, handle){
    console.log('pathname :' + pathname);
    if(typeof handle[pathname] === 'function'){
        handle[pathname](response)
    }else {
        response.writeHead(404, {'Content-Type' : 'text/html'});
      response.write('찾으시는 페이지가 없습니다. ');
      response.end();
    }
}

exports.route = route;

1. handle이 객체이고 객체의 프로퍼티 값이 함수(일급객체라서)이니까, 그 값에 대해서 함수처럼 사용 가능 (괄호를 사용해 인자도 넣고)
2. 만약, 없는 주소 입력하면, 에러 표시 날 수 있도록 하기
   1. 입력된 pathname이 함수 타입이면 그대로 requestHandler에게 전달해서 추가적인 기능 이어나가도록
   2. 하지만, pathname이 함수 타입이 아니라면, requestHandler에 가지 못하고, router 선에서, 오류 페이지 뜨도록 코드 작성

//server.js

let http = require('http'); // http 모듈은 node js가 가진 기존 모듈 중 하나

function start(route, handle){
    function onRequest(request, response){
            let pathname = url.parse(request.url).pathname;
            route(pathname,handle);

            //response.writeHead(200, {'Content-Type' : 'text/html'});
        //response.write('Hello.js');
        //response.end(); 
    };

    http.createServer(onRequest).listen(8888);

    // localhost:8888
    // 우리가 만든 함수로 서버가 일 할건데, 클라이언트가 그걸 받을려면 8888 주파수로 맞춰야 한다

    // 클라이언트랑 서버가 대화하려면 주파수가 같아야 함
    // 프로토콜 마치 편지 쓸 떄의 형식처럼
    // http 프로토콜 템플릿 존재


}

exports.start = start;
// 바깥에서 start를 사용할 수 있도록 함
// 현재 코드 안의 start 함수를 바깥에서도 사용할 수 있도록 만들어줌

start() 함수의 response 이하 부분을 requestHandler가 작업하도록

//index.js

let server = require('./server');
let router = require('./router');
let requestHandler = require('./requestHandler');

server.start(router.route, requestHandler.handle);

이렇게 없는 경로를 입력하니 Not found 페이지 제작 가능~

(번외) 내 이름으로 된 경로 페이지 제작하기

function main(response){
    console.log('main');

    response.writeHead(200, {'Content-Type' : 'text/html'});
    response.write('Main page');
    response.end(); 
}

function login(response){
    console.log('login');

    response.writeHead(200, {'Content-Type' : 'text/html'});
    response.write('Login page');
    response.end();
}

function Daeun(response){
    console.log('daeun');

    response.writeHead(200, {'Content-Type' : 'text/html'});
    response.write('Daeun Cho');
    response.end();
}

let handle = {}; //key:value 객체
handle['/'] = main;
handle['/login'] = login;
handle['/daeun'] = Daeun;

exports.handle = handle;

function에 Daeun이라는 함수 하나 추가 & handle 객체에도 프로퍼티로 추가하기

http://localhost:8888/daeun

페이지 방문 시 다음의 페이지 확인 가능

1.1 Inline CSS 속성 찾는 법(검색)

HTML에 CSS를 적용하는 방법 3가지

1. 인라인 - html 태그 안에 같이 작성

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>login page</title>
    </head>
    <body>
        <h1 style = "color: red; text-align: center;">Login</h1>
        <form>
            ID : <input type="text" style="font-size:25px">
            <br>
            PW : <input type="password" style="font-size:25px">
            <br>
            <input type="button" value="login" style="width:100px; height: 30px">
        </form>
    </body>
    </html>

2. 내부 스타일 시트 - html 문서 안에 같이 작성

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>login page</title>
        <style>
            h1 {
                color: red; 
                text-align: center;
            }
            .login_inputs {
                font-size: 25px;
            }
            #btn_login {
                font-size: 30px;
                width: 100px;
                height: 50px;
            }
        </style>
    </head>
    <body>
        <h1>Login</h1>
        <form>
            ID : <input class="login_inputs" type="text">
            <br>
            PW : <input class="login_inputs" type="password">
            <br>
            <input id="btn_login" type="button" value="login">
        </form>
    </body>
    </html>

   1. head에 style 시트 생성
   2. 안에 태그(h1,h2,…), 클래스(.), 아이디(#)를 이용해서 스타일 생성하고, 원하는 html 태그에 지정해주기

3. 외부 스타일 시트 - html 문서 밖에 작성하고 연결

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>login page</title>
        <link rel="stylesheet" href="/style.css">
    </head>
    <body>
        <h1>Login</h1>
        <form>
            ID : <input class="login_inputs" type="text">
            <br>
            PW : <input class="login_inputs" type="password">
            <br>
            <input id="btn_login" type="button" value="login">
        </form>
    </body>
    </html>

   내부 스타일 시트도 한 파일에서 스크립트, 스타일, 인덱스를 다 보기에는 불편해서 따로 css 파일 제작

   파일 제작 후, html 파일에 연결(link)

   rel(relation의 약자)

   href(hypetrext reference)

참고) 주석처리하기: command + /

2. JS

2.1 JS 이해

html 요소 선택 후 제어할 수 있는 스크립트 언어

프로그래밍 언어와 스크립트 언어의 차이?

스크립트 언어는 독립적인 프로그램을 개발할 수 있는 프로그래밍 언어가 아니라, 프로그램 내부의 구성요소 중 하나로 프로그램을 제어하는 스크립트 역할을 하는 언어이다.

최근 빠르게 발전하는 런타임 환경 덕분에 스크립터 언어만으로도 충분히 프로그래밍 가능하며 역할이 확장되는 중이다.

HTML에 JS 적용하는 방법은 3가지

1. 인라인: 사용자와의 상호작용이 있을 때만 가능. ex) 사용자가 버튼 클릭

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>login page</title>
        <link rel="stylesheet" href="/style.css">
    </head>
    <body>
        <h1>Login</h1>
        <form>
            ID : <input class="login_inputs" type="text">
            <br>
            PW : <input class="login_inputs" type="password">
            <br>
            <input onclick="alert('clicked!')" id="btn_login" type="button" value="login">
        </form>
    </body>
    </html>

   onclick="alert('clicked!')"

2. 내부 스크립트

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>login page</title>
        <link rel="stylesheet" href="/style.css">
    </head>
    <body>
        <h1>Login</h1>
        <form>
            ID : <input class="login_inputs" type="text">
            <br>
            PW : <input class="login_inputs" type="password">
            <br>
            <input onclick="myfunction()" id="btn_login" type="button" value="login">
        </form>
   
        <script>
            function myfunction (){
                alert('1');
                alert('2');
                alert('3');
            }
        </script>
    </body>
    </html>

   스크립트에 function 생성 후 html 태그에 삽입

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>login page</title>
        <link rel="stylesheet" href="/style.css">
    </head>
    <body>
        <h1>Login</h1>
        <form>
            ID : <input id="txt_id" class="login_inputs" type="text">
            <br>
            PW : <input class="login_inputs" type="password">
            <br>
            <input onClick="popId()" id="btn_login" type="button" value="login">
        </form>
   
        <script>
            // id란에 입력한 값을 팝업창에 띄우기
            function popId(){
                if (!document.getElementById("txt_id").value) {
                    // = document.getElementById('txt_id').value == ""
                    alert('fill the blank');
                } else {
                    alert(document.getElementById("txt_id").value);
                }
   
            }
   
            // 나만의 함수 만들고, 버튼 클릭하면 호출하기
            function myfunction (){
                alert('1');
                alert('1');
                alert('1');
            }
        </script>
    </body>
    </html>

   document.getElementById

   .은 ~중에서, ~의(of)의 의미를 지님

   따라서, 이 코드는 document라는 파일에서 id를 이용해서 요소를 가져온다라는 것

3. 외부 스크립트

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>login page</title>
        <link rel="stylesheet" href="/style.css">
        <script src="/script.js"></script>
    </head>
    <body>
        <h1>Login</h1>
        <form>
            ID : <input id="txt_id" class="login_inputs" type="text">
            <br>
            PW : <input class="login_inputs" type="password">
            <br>
            <input onClick="popId()" id="btn_login" type="button" value="login">
        </form>
    </body>
    </html>

   

script에 연결

변수

변수는 상자

데이터를 담아놓는 상자

변수 생성하는 법

let 상자 이름 = 상자에 담을 데이터; (숫자, 문자, element, 등등)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>login page</title>
    <link rel="stylesheet" href="/style.css">
</head>
<body>
    <h1>Login</h1>
    <form>
        ID : <input id="txt_id" class="login_inputs" type="text">
        <br>
        PW : <input class="login_inputs" type="password">
        <br>
        <input onClick="popId()" id="btn_login" type="button" value="login">
    </form>

    <script>
        // id란에 입력한 값을 팝업창에 띄우기
        function popId(){
            let userId = ocument.getElementById("txt_id").value;
            if (!userId) {
                // = document.getElementById('txt_id').value == ""
                alert('fill the blank');
            } else {
                alert(userId);
            }

        }

        // 나만의 함수 만들고, 버튼 클릭하면 호출하기
        function myfunction (){
            alert('1');
            alert('1');
            alert('1');
        }
    </script>
</body>
</html>

userId라는 변수 생성

if문 조건, else alert 부분에 변수 넣어서 간단하고 가독성 좋게 코드 변경

var a; // var는 사용 안함, 예전엔 없었음 이건 이제 let, const로 분리됨
let b;// 변수 선언 후 재할당 가능
const c; // 상자 안에 값이 들어가면 재할당 불가, 엄밀히 말하면, 변수 선언 시 undefined로 초기화된 상태, 이후에 런타임 때 변수값이 재할당되는 거긴 함. 근데 그 이후에 재할당 불가능

텍스트랑 함께 변수 출력하는 법 + 사용 or 백틱

1.1 웹의 이해

• 인터넷
  • 전세계의 모든 컴퓨터가 하나의 통신망 안에 연결한다는 의미(international network)
• 월드 와이드 웹
  • 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 공간
  • 간단하게 www, w3 그리고 월드 와이드 웹을 줄여서 웹(web)이라고 부름
  • 인터넷이 있기에 웹이 존재할 수 있는 것
• 웹 시작?
  • 스위스 입자 물리 연구소의 컴퓨터과학자 팀 버너스-리가 신속한 정보교환을 위해 고안하게 됨
• 웹의 특징, 목적
  • 하이퍼텍스트(단순 글자 아니고 . 그이상의 기능을 가진 텍스트, 주로 링크와 참조의 역할을 하는 기술) 형식으로 표현, 이를 통해 다양한 정보와 문서를 연결,제공
• 웹 페이지 vs 웹 사이트
  • 웹 페이지 - 페이지 하나하나, 책 한 장
  • 웹 사이트 - 페이지 모음, 책 전체
• 웹 브라우저란?
  • 브라우즈는 an act of casual looking or reading
  • 웹 브라우저는 어떤 것(웹 페이지 또는 웹 상의 데이터)를 찾거나 읽을 때 사용하는 것

1.2 웹의 구조

식당에서 주문 시 클라이언트(고객)가 서버(웨이터)에게 요청

요청받은 서비스, 음식을 제공

클라이언트: 서비스를 이용하는 컴퓨터

서버: 서비스를 제공하는 컴퓨터

• 클라이언트와 서버 간의 약속, 프로토콜

편지를 보낼때도, 수신인 발신인 내용 끝맺음 등등 구조가 정해져있음

프로토콜이라고 하는 정해진 소통틀이 존재

반드시 이 약속(프로토콜)을 지켜서 통신해야 함

인터넷으로 연결된 클라이언트와 서버는 웹 프로토콜인 http를 사용해서 데이터를 주고 받는다.

웹은 인터넷으로 연결된 사용자들이 정보를 공유할 수 있는 공간

1.3 웹 개발 직무 이해

인터넷 부분을 만지는 일을 잘 없다

• 프론트엔드

웹 서비스 클라이언트 부분을 개발하는 게 프론트엔드

사용자 측면에서 화면(그래픽 사용자 인터페이스)로 사용자와 상호작용을 담당함.

• 백엔드

인터넷이 정해준 요청 처리하고, 그에 맞는 대응을 해주는 것

이 서버에서 프론트엔드에서 전달받은 데이터와 요청을 내부 데이터와 연산을 활용하고 처리해서 프론트엔드에게 결과 전달

2. 프론트엔드

2.1 프론트엔드 3대장

웹은 무엇으로 이루어져있을까?

그 중에서도 웹 프론트엔드는 어떻게 이루어져있을까?

html, css, js

html - 웹 페이지 구성 요소들의 구조

css - 웹 페이지 구성 요소들을 꾸밈

js - 웹 페이지 구성 요소들에게 생명력!

3. IDE, VScode 설치

공방에 가는 이유?

도자기 만들기 위한 프로세스 모두 진행 가능하니까?

한번에 필요한 프로세스를 진행할 환경을 다 제공해주는 역할이 ide

ide는 integrated development environment

통합 개발 환경

vscode는 통합, 확장성 좋아서 인기

4. HTML

hyper text markup lanaguage

웹 페이지들을 연결하는 기능을 가진 텍스트이자 웹페이지의 구조를 명시하는 언어

<>는 태그!

이 태그로 html 구현

이 태그들이 웹 페이지의 구성 요소 하나하나의 역할을 하게 됨

태그와 태그 사이에 글자가 있음

태그 형태

<태그> 감싸진 글자가 그 태그의 역할을 맡습니다. </태그>

*태그 한 쌍일수도 있고 한 개 태그로 이루어질 수도 있음

<!DOCTYPE html>
<!-- 이 문서는 html 입니다라는 뜻 -->
<html>
    <head>
        <!-- html 파일에 대한 내용 -->
        <meta charset="UTF-8">
        <!-- 캐릭터 타입, 한국어를 포함한 영어, 숫자 등을 담고 있는 utf-8을 사용-->
        <title> 첫 번쨰 HTML </title>
    </head>
    <body>
        Hello, html!
    </body>
</html>

자주 쓰는 HTML 태그

1. h
   1. heading의 약자
2. a
   1. Anchor의 약자
   2. href: hypertext reference
3. br
   1. break 약수

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Go</title>
</head>
<body>
    <h2>We Can Go</h2>
    <a href="https://programmers.co.kr">Programmers</a>
    <br>
    <a href="first.html">My First Page</a>
</body>
</html>

a href 태그를 통해, 다른 이미 시중의 페이지로도, 내가 제작한 페이지로도 이동 가능

로그인 화면 만들기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>login page</title>
</head>
<body>
    <h1>Login</h1>
    <form>
        ID : <input type="text">
        <br>
        PW : <input type="password">
        <br>
        <input type="button" value="login">
    </form>
</body>
</html>

form 태그: 입력을 위한 큰 틀

input 태그: 입력 태그, type에 따라서 다양한 입력 받을 수 있음

text가 디폴트

password는 입력시 글자를 가려줌

button은 버튼, value에 버튼 내용을 추가할 수 있음

로그인 페이지 결과물

메인 나뭇가지 이름: main(기존명은 master)

1. 기능 개발(develop)

develop 브랜치를 따고 밑에 feature로 depth를 더 줘서, feature/login, feature/select-product, feature

2. 출시 준비(release)

release-1.3, release-1.4

3. 긴급 수정(hotfix)

hotfix-1.2.1

브랜치 명령어

1. 이전 브랜치로 이동하는 명령어

git checkout -

1. 브랜치 삭제 명령어

git branch -d 브랜치명

*참고로, 내가 현재 머무는 브랜치에서는 해당 브랜치 삭제 불가→ git checkout 명령어로 이동 후 삭제

1. 브랜치 생성 명령어

git branch 브랜치명

1. 브랜치 목록 확인 명령어

git branch

1. 브랜치 이동 명령어

git checkout 브랜치명

2. 브랜치는 “__”부터 진짜다?

바로, commit

브랜치 복사한다고 바로 병렬처리 되는 게 아님

브랜치를 브랜치답게 사용하는 것은 커밋부터

3. 원격 브랜치

원격 브랜치 확인

git branch -r

깃에서 가지는 브랜치는 3개, 원격 깃허브에서 가지는 브랜치는 origin으로 한 개

깃에 만들어둔 브랜치를 원격 브랜치로 복제

git push 깃허브저장소별칭 깃브랜치명

반대로, 깃허브에서 브랜치 먼저 생성 → 깃으로 받아오기

git push 깃브랜치명 깃허브저장소별칭

4. 깃 브랜치 전략

팀플 시, 브랜치 생성하고, 어떤 단위로 브랜치 만들건지 등

git flow

어떻게 워크 플로우 짜는가

다양한 전략 가능

크게 2가지로 분류 (fast-foward, 3ways)

메인 브랜치는 배포할 브랜치라서 안 건드리는 게 국룰

1. fast-forward 전략

A 브랜치에서 B브랜치 생성

A 브랜치에서는 추가 구현 없고, B 브랜치에서 추가 구현

이후, B브랜치를 A브랜치에 붙이는 방식

보통 잘 쓰진 않음

폴더 하나 가지고 개발하는 게 아니기에, 하나의 브랜치가 가만히 있는 경우 희박

2. 3ways

A 브랜치에서 B브랜치 생성

A 브랜치, B 브랜치 둘 다 추가 구현 후, 서로 비교 후 바뀐 거 정리해서 합치는 전략

대부분, 3ways를 진행할 때는 fast-forward도 진행

5. 병합과 충돌

PR(pull request) 전 권고 사항

setting → branches → branch protection rule

*근데, private repo에는 필요없는 듯? 확인 필요

PR

1. pull request 버튼 누르고

2. 마크다운 형식으로 description 작성

   주요 구현 내용, 이슈 등에 대해서 작성(구현내용, 이슈는 필수로 작성하기)

   pr에 대한 내용, 신경써서 작성하기, 협업 시에 소통하기 좋은 사람이라는 것

3. merge pull request 진행

4. delete 진행

   보통 브랜치는 사용이 다 끝나면 머지를 시킴

   머지 다 시키면, 브랜치 없애주는 게 좋음

*머지 푸는 거, 브랜치 삭제한 거 복구하는 거 모두 가능

이후, 브랜치 목록 확인하면 브랜치는 메인뿐

병합이란

브랜치를 생성한다는 건, 협업을 위한 것

그래서 우리는 주로 브랜치 병합(추가 가지 → base 가지로 합침)을 깃허브에서 진행

1. 메인 branch 보호
2. 추가 브랜치 main 브랜치 방향으로 병합 진행(pull request; pr)
3. 충돌 일어나는지 깃허브가 확인(자동으로)
    *PR 메시지 신경써주기(주요 핵심 기능, 이슈)
4. merge 진행(”merge commit”) 병합 시에도 커밋이 발생
5. branch 삭제

6. merge된 깃허브 → 깃에 동기화하기

1. 깃허브 브랜치 목록 동기화하는 명령어

git fetch -p

2. 삭제할 브랜치가 아닌 다른 브랜치로 이동

git branch 브랜치명

3. 동기화 해주기

git pull origin main

merge 깃허브에서만 진행한 것

따라서, 로컬에서 동기화 진행해줘야 함

4. 삭제

git branch -d 브랜치명

7. 충돌 해결하기

깃허브로 브랜치 생성하기

1. 브랜치 검색
2. 브랜치 없으니 create branch __ from main 클릭
3. 생성 완료

깃허브 내의 브랜치 로컬로 받아오기

git branch -t "브랜치명"

브랜치 충돌

A폴더와 B폴더에서 똑같은 폴더를 깃허브에서 받아오고 폴더 내의 test1.txt 파일을 수정했다고 가정

A폴더가 수정본 업로드

이후, B폴더의 수정본도 업로드하면, 충돌 발생

이렇게 같은 부분에 대해서 수정한 것을 확인할 수 있음

이 경우, 확인 후 원하는 코드 남기고 나머지 없애주기

그 다음 상단의 mark as resolved 클릭 후 commit merge하기

깃허브 내에서 회원가입 진행

GitHub에서 계정 생성하기 - GitHub Docs

2. 깃허브 레파지토리 create

레파지토리란 + 필요성?

우리는 프로젝트 단위로 백업하게 될 것

폴더를 레파지토리라고 생각하면 됨

레파지토리가 있어야, 로컬 컴퓨터의 프로젝트 백업이 가능

create repository 버튼으로 생성하기

public은 모두에게 공개

private은 나만보기

readme생성 여부 선택 가능

리드미 없이 하는 게 더 편해서 선택 안하고 추후 추가하는 걸 추천

set up github copilot

추후 사용하게 될 것

생성되면 다음과 같은 화면이 나타남

3. 깃허브에 내 로컬 프로젝트 업로드하기

로컬에서 연결을 시켜주는 것

git remote add origin url (연결)

깃허브와 로컬을 연결해주는 명령어

git remote add 원격저장소(레파지토리)별칭 원격저장소url

• fetch 서버의 코드 가져올 때 쓰는 명령어
• push - 로컬 코드를 깃허브에 업로드(백업)할 때 쓰는 명령어

git remove -v (확인)

git remove -v를 통해서 연동 여부를 확인 가능

git push origin main (업로드)

git push 원격저장소(레파지토리)별칭 원격저장소레포지토리명(main)

git push origin master를 하면 에러가 뜨지만

git push origin main을 하면 정상적으로 업로드가 되는 모습 확인 가능

결과 1

업로드된 걸 확인할 수 있음

결과2

화살표가 main, origin/main 둘 다 가르키게 됨

4. 토큰 생성

아이디: 깃허브 유저 아이디

패스워드: 토큰 (깃허브에서 발급해주는 토큰)

토큰 확인

깃허브 세팅 → developer setting → personal access tokens → tokens → 상단의 generate tokens

용도는 마음대로

expiration은 최대한 no expiration은 말고

5. CLI clone

이전에 했던 작업(push)는 깃허브 레포에 올리는 거였다면,

이번엔 깃허브에 올라온 폴더를 로컬에 받아오는 작업 진행

받아오기 vs 올리기

소스코드 올리기 (로컬 → 깃허브)

1. 연결 → git remote add origin url
2. 소스코드 올리기 → git push origin main

소스코드 받아오기 (로컬 ← 깃허브)

1. 연결 → git clone
2. 소스코드 받아오기 → git clone

즉, git clone 명령어로 연결 + 소스코드 받아오기 한방에 가능

git clone

git clone 원격저장소url

연결된 것 확인 가능

소스코드 받아온 것 확인 가능

4. pull 하다 안되어서 git remote remove origin

받아올 소스코드가 변경되었는데, 현재 깃허브로부터 로컬에 받아온 소스코드는 이전 버전임

이럴 때, pull을 사용해서 수정된 소스코드 받아올 수 있음

git pull 명령어를 사용하니, 깃이 아니라는 오류 메시지가 발생하게 됨

이런 경우는 어떻게 해결할까?

cd devcourse

1. 안쪽 폴더로 이동할 것 (gittestclone안에 pull해온 firstrepository(내건, devcourse)가 있음
2. git remote remove origin으로 연결 끊기
3. 다시 gittestclone 폴더에서 init
4. init 후 git clone으로 연결해주기
5. 그런데, git remote -v로 확인해보면, 연결된 레포가 없음…
6. 왜 그 자체에는 연동 불가하고 하위 폴더로 만들어도 연동되는 걸까…?

5. GUI로 clone하면 사실 맞게 했다는 것을 알게 됨…

왜 GUI로?

폴더 생성 후, 오픈한 상태에서 cli로 클론하게 되면, 상위 폴더와 하위폴더(클론된 폴더) 둘 다 한번에 보이게 됨. 포커싱이 클론된 폴더에만 있는 게 아님.

gui로 하게 되면, 클론한 폴더의 상위폴더는 vscode에 바로 나오는게 아니라서(물론 cli처럼, 폴더 안에 하위폴더로 클론된 거 맞음) 하위폴더(클론 폴더)에 포커싱이 되는 이점이 존재

GUI로 클론해보기

웰컴란에 clone git repository 존재(혹은 왼쪽 바의 소스 컨트롤 란에서)

버튼 누르면 화면 상당에 Clone from github 나옴

클론하기 원하는 레파지토리 url 입력하기

입력하고 나면, 로컬에서 원하는 폴더 선택하게 됨

-> CLI로 한 결과 (상위폴더까지 보임)

-> GUI로 한 결과 (하위폴더(=클론된 폴더)만 보임)

이 두 방법 알아야 하는 이유?

협업 시, 내 방법뿐만 아니라 팀원의 방법도 이해해야 하기 때문

6. 깃허브에 올린 프로젝트 내려받기

gittest, gittestclone 두 폴더 생성해서 깃허브 실습해보기

전자는 코드 업로드, 수정하는 폴더

후자는 깃헙에 올라간 폴더 다운받아보는 폴더

전자에서는 test.txt 파일 생성 후

git status #상태 체크
git add test.txt
git commit -m "first commit"
git remote -v #레포랑 연결 체크
git remote add origin 레포url
git push origin main

다음의 순서로 test.txt 파일을 first commit이라는 커밋 메시지와 함께 레포에 업로드

후자에서는 레포에 올라간 gittest폴더를 내려받기 위해서

git status
git clone 레포url

확인하면, 클론된 걸 볼 수 있음

로컬 폴더 안에서 깃헙 폴더가 클론되어 내려받으면, 클론된 폴더의 상위폴더는 git init도 안되어있기에, 상위폴더에서 깃작업하면 오류 발생

따라서, 추가적인 깃작업은 클론한 하위폴더로 이동 후 진행

7. 브랜치란?

branch == 가지

프로젝트가 한 개가 있었다면, 복사해서 사용하게 됨

용도에 따라서 프로젝트 따로따로 복사해 분리한 게 브랜치

브랜치 생성 및 이동 명령어

• git status로 현재 깃 상태 확인

git status

• git branch로 브랜치 목록을 확인 가능

git branch

(*)가 붙은 브랜치가 내가 현재 있는 브랜치

• 브랜치 생성

  git branch 브랜치명

• 브랜치 이동

git checkout 브랜치명

지금 현재 브랜치에서 체크아웃해서 나가서 브랜치명으로 간다의 의미임

깃, 깃허브

깃은 로컬 시스템 (내 컴퓨터에 설치되는 시스템) 설치되는 프로그램

깃은 내 컴퓨터 안에서 버전을 관리해주는 시스템이자, 깃허브와 소통하는 시스템

깃허브는 원격으로 중앙에서 우리 프로젝트를 백업해두고, 버전 관리 해주고, 협업도 하게 해주는 시스템

깃허브는 원격 컴퓨터에서 백업을 담당하는 시스템이자, 내 컴퓨터와 별도로 버전 관리를 해주는 플랫폼

협업을 위해서는 깃허브라는 중간 장치가 있어야 하고 각각 개개인의 컴퓨터에는 깃이 설치되어야하는 것

깃과 깃허브의 필요성

하나의 프로젝트 내의 여러 폴더가 존재

한 폴더에서 유의미한 수정이 이루어진다? → 폴더 그리고 프로그램 모두 버전이 변화

만약 깃이 없다고 가정?

변화한 폴더 버전을 복붙 후, 이전 파일 저장, 새로 생성된 파일 수정…

무수히 늘어나는 버전들을 저장하려면 똑같은 거 계속 복붙해놓으면 메모리가 아까움

프로젝트 버전 관리를 굳이 컴퓨터에서 안 하고, 깃허브가 대신해주는 것

깃허브는 버전이 몇 개이든 다 가지고 있어줌, 무료로

사용하지 않는 이전 버전들을 깃허브에 올려두거나 현재 버전이 날아가는 것을 방지해 저장

현재 버전(1.0)을 깃허브에 올려두고, 수정을 하면 버전(1.1)이 변경됨(내 컴퓨터에서)

깃허브는 이전 버전과 현재 버전 모두 관리하며, 원할떄마다 버전별로 사용 가능하도록 해줌

깃허브 동기화 이후에는 작업 폴더를 다른 컴퓨터에서도 깃허브에서 다운받아서 사용 가능

2. CLI vs GUI

CLI

커멘드 라인 인터페이스

셀(명령 프롬프트; 창)에서 글자를 입력해서 컴퓨터에서 명령을 내리는 것

터미널, 윈도우 터미널 등은 특정 프로그램을 위해서 만든 것이 아니라 일반적으로 만들어놓은 집합체 같은 느낌

파워셀, 배쉬, cmd

GUI

그래픽 유저 인터페이스

그래픽으로 컴퓨터에게 명령 내릴 수 있도록 사용자에게 화면 제공

3. 자주 쓰는 명령어 ls, cd, mkdir

ls

list segmentation의 약자

폴더 내의 요소들에 대해서 보여줌

폴더 내의 좀 더 많은 요소들을 전부 보여주는 ls -a

ls -a

cd

change directory의 약자

폴더 이동 명령어

명령어 뒤에 이동을 원하는 폴더명을 작성하면 이동됨

cd ..

..는 상위 폴더

따라서 cd ..는 상위폴더로 이동하는 명령어

mkdir

make directory의 약자

폴더 생성 명령어

명령어 뒤에 이름 기입하면

해당 이름의 폴더 생성됨

4. 자주 쓰는 명령어 init, status

init

깃아 너가 관리하는 저장소로 태어날게 초기화 시켜줘라는 의미

깃이 폴더 관리를 하기 위해서 폴더 안에 .git이라는 파일 생성(눈에 보이진 않게)

이후에 status를 확인하면, 아직 커밋이 없다고 하는 문구 확인 가능

초기화로 .git 폴더도 생성되었지만, 따로따로 그 안의 파일에 대해서도 깃에게 관리 요청을 해야 함

status

깃 상태를 보는 명령어

⚠️ fatal: not a git repository (or any of the parent directories): .git

깃에게 버전관리를 해달라고 요청하지 않으면 생기는 오류 문구

깃은 버전관리를 해주지만 컴퓨터에 있는 모든 폴더를 버전 관리하는 것은 불필요하기에 사용자가 요청하는 폴더 단위로 버전 관리를 진행 → 우리가 직접 폴더를 관리해달라고 요청해야 함

5. 자주 쓰는 명령어 add

깃은 시작부터 모든 파일을 다 트래킹해주지 않음

깃이 관리해주길 바란다면, git add 파일명 이라는 명령어를 사용해야 함

.git 폴더 안에 버전 관리 중인 상태를 적어놓음

성공적으로 수행되면, 아무런 멘트도 발생하지 않음

하지만, 버전을 저장하기 전에 관리하는, 더 저장할 건 없는지 기다리는 중

commit 전에 버전 만들기 위해서 파일 모으는 것

6. 자주 쓰는 명령어 commit, log

git commit

버전으로 저장할 것 모으고 있었지?

이제 add 아니고, 지금까지 모은 걸로 버전 만들자

git commit 명령어를 통해서!

git commit은 add로 모은 것으로 버전 만드는 명령어(vim(텍스트 편집기)를 이용해서 커밋 명령어를 따로 작성해줘야 하는 번거로운 명령어로 git commit -m 명령어의 형태가 더 자주 쓰임)

⚠️ vim 명령어

vim에서는 명령모드, 입력모드, 마지막 행 모드로 총 3가지 모드가 존재

명령모드는 처음 vim 모드 실행 들어가게 되는 곳

방향키로 이동 가능

입력모드는 글 작성 가능하며, 다시 명령모드로 돌아오려면 esc를 누르면 됨

마지막 행 모드는 명령모드에서 :를 입력 맨 밑단에 :___ 형태로 입력 가능한 공간 생성됨. 현재까지 작성한 내용 저장하고 vim 저장(wq)할지, 그냥 종료(q, q!)할지 입력 가능

git commit

• cc로 변경(커서가 있는 그줄의 내용 변경)

• 커밋 메시지 작성 후 esc(입력 모드에서 명령 모드로 변환)

• :wq(:는 명령모드에서 마지막 행 모드로 변환, wq는 저장 종류의 명령어)

git commit -m "명령어"

git commit -m 커밋 메시지

git commit보다 간결한 명령어

git log

지난 commit 내용 확인 가능

커밋된 순서, 커밋 메시지, 해시 정보를 얻을 수 있음

7. GUI로 init, add, commit

소스 컨트롤 란에서 gui로 init, add, commit 진행 가능

파일 작성 후, 소스 칸을 가면, U라는 마크 확인 가능

Untracked 즉, add가 되지 않은 상태라는 것

+를 통해서 add 가능

add가 되면, commit 버튼을 눌러서 커밋까지 완료해주면 됨

commit 버튼을 누르면 cli와 마찬가지로, 커밋메시지를 작성할 수 있음

참고사항(추가 파일 옆 마커들)

 **A** - Added (This is a new file that has been added to the repository)

**M** - Modified (An existing file has been changed)

**D** - Deleted (a file has been deleted)

**U** - Untracked (The file is new or has been changed but has not been added to the repository yet)

**C** - Conflict (There is a conflict in the file)

**R** - Renamed (The file has been renamed)

**S** - Submodule (In repository exists another subrepository)

**T** - Typechange (The file changed from symlink to regular file, or visa versa)

8. 깃 히스토리 설치

extension에서 git history 검색 후 설치

소스에서 하단의 버튼 누르면 히스토리 확인 가능

git log처럼 커밋 기록을 확인할 수 있음

커밋 메시지를 확인할 수 있고, 하단의 view를 통해서 버전명도 확인 가능

9. git remote -v, 깃허브 소개

깃허브는 원격으로 중앙에서 우리 프로젝트 백업해두고 버전 관리해주고 협업도 하게 해주는 시스템!

우리는 대기업의 컴퓨터를 중앙에 두고 원격으로 사용하는 것

깃은 우리 컴퓨터 안에서 버전 관리하는 걸 넘어서 깃허브랑 연동도 가능함

자주 쓰이는 명령어 remote, 연동을 위해서는 remote라는 명령어를 사용해야 함

git remote -v 

프로젝트란?

일정 목적을 달성하기 위한 모든 일련의 프로세스

엄청 방대하고 거대한 곳 아님

마무리 되어야만 하는 것 아님

프로젝트는 우리가 범위를 설정하기 나름

기획, 설계 등 모든 단계가 필요함

프로젝트 예시

계산기

노션

카톡

네이버

네이버라는 것도 거대한 프로젝트이지만,

네이버 안의 계산기를 만드는 것도 프로젝트임

협업

협업은 공유하는 것

개인 프로젝트와 팀 프로젝트의 차이는 많이 사라졌지만, 회사 현업에서는 대부분 협업 진행

따라서 협업하는 것 중요

협업을 위해서는 협업 툴 사용 및 공유하는 것이 중요함

코드 공유, 문서 공유, 진행 척도 등등 공유의 중요성

리드미

리드미 역할

1. 완성된 프로그램의 설명서
   1. 프로그램 사용법
   2. 레퍼런스
2. 구현 중인 프로젝트의 현황
   1. 구현된 주요 기능
   2. 구현 현황
   3. 코드가 해결해야하는 문제 등

2. 리드미 작성법(개념)

리드미는 확장자가 마크다운인 파일 (markdown → md)

일반 .txt는 말 그대로 텍스트일 뿐

전혀 특별한 꾸밈이 없음

글의 가독성을 위해서는 단조로운 형식의 텍스트보다는 글자 크기, 형태, 색 등을 변경할 수 있는 것이 중요함

다양한 환경과 사이트에서 제공

일반인들에게는 네이버 블로그 글쓰기 도구 같이 GUI 제공

3. 리드미 작성법(실습)

웹개발자들의 언어

리드미 상의 인용문 - 강조의 의미

마크다운 - 디스코드, 깃허브 등에서 모두 사용

특정 기술 학습하면, 문법 달달 외우지 말고 써보면서 익숙해지면서 체화해나가는 게 중요

4. 버전관리

버전이란?

유의미한 수정(추가되고, 풍성해진 코드)

기능 삭제, 기능 추가 등

버전 네이밍

1.0 > 1.1 > 2.0

1.0, 2.0이 메인 수정

1.1같은 건 좀 더 마이너한 수정

관리란?

버전이 잘 인덱싱이 되고 있나

다운그레이드, 업그레이드 등등

각 버전이 잘 정리되어있고 어떤 걸 의미하는지

원할 때 사용 가능하다면 관리가 잘 된 것

5. 버전 관리의 중요성

처음부터 완벽한 코드 작성 불가능

짜놓은 코드를 고도화해서 다음 버전 만들고, 반복

모든 버전들은 나름대로 그 버전에서의 완성본

버전 1은 버전 1에서는 완성본인 것

버전 관리 시스템

버전 관리를 하기 위해서는 version control system 활용

• 버전 관리
• 백업 복구
• 협업(선택)

6. 버전 관리 시스템의 종류

로컬 VCS

단순하게 말 그대로 로컬에서 버전 관리

버전관리, 백업 복구 가능, but 협업 불가

다른 사람과 협업하기 위해 컴퓨터 연결한다든가하는 것 없음

여전히 혼자 수행

중앙집중식 VCS

버전관리, 백업 복구, 협업 가능

중앙 서버에 버전 파일 모두 저장

로컬에서 중앙 서버에 저장된 파일 일부 가져와서 작업

네트워크, 서로 연결만 되어있고 소통만 가능하다면 중앙 서버를 통해 다른 컴퓨터와도 소통, 협업 가능

분산 VCS

대표적인 시스템이 깃, mercurial, bazaar

버전 1의 시스템을 작업하고 싶다면 중앙집중식에서는 필요한 시스템만 가져와서 작업 진행

분산에서는 프로젝트 통째로 그대로 들고와서 작업함

파일 하나만 가져오면 시스템 꼬일 수 있는데 폴더 통째로 작업한다면, 꼬이기 쉽지 않고 꼬이더라도 수정이 용이함

꼬인다는 것?

A, B 컴퓨터 동시에 같은 파일을 가지고 작업

A 컴퓨터가 파일 작업 후 저장, B 컴퓨터가 이후 작업하려고 할 때, 복잡함

파일이 1개가 아니라 몇십개씩 된다면, 너무 복잡함

단위가 좀 더 크게 폴더, 프로젝트 단위로 관리 포인트를 줄어들 수 있게 관리