[POSCO x Codingon] 클라우드, JWT, 암호화 | 웹개발자 풀스택 과정 12기 9주차 회고 2

 

 

9주차 회고

 

이전 글에 이어서 9주차에 클라우드 사용법, JWT, 암호화에 대해서 배웠고, 실습도 진행해볼 수 있었다.
네이버 클라우드와 Putty를 사용해서 파일을 실행시키는 실습을 진행했고, 로컬 스토리지를 이용해서 카트 페이지도 만드는 연습을 했다.

 

 

---

 

 

1. 클라우드

 

: 클라우드는 언제, 어디서든 인터넷을 통해 사이트에 접속할 수 있는 환경을 만들어준다.

: 서버, 네트워크 등의 인프라를 임대해주는 서비스라고 할 수 있으며, 가상화 기술을 사용해 서버를 마음대로 구축하고 운영할 수 있다.

 

• 가상화 : 물리적인 장치를 소프트웨어로 대체하는 것을 의미. ex. 물리적 컴퓨터 1대 - 서버 여러개 운영 가능

 

• 클라우드 서버 : 실제 물리적인 컴퓨터 1대로 서버를 운영하는 게 아니라 VM으로 서버를 운영한다.

장점	예시
짧은 생성 시간, 저장공간 무한대, 접속량 폭주에도 다운X 서버	퍼블릭 클라우드 / 프라이빗 클라우드 / 하이브리드 클라우드

 

 

---

 

 

2. 네이버 클라우드

 

• VPC : 퍼블릭 클라우드 상에서 제공되는 고객 전용 사설 네트워크이며, 계정마다 최대 3개 VPC를 생성할 수 있다. (네트워크의 주소 공간을 제공해 논리적으로 분리되는 것일 뿐 물리적으로 분리되는 것은 아님)
• subnet : VPC가 구성된 후에는 용도, 서비스 목적에 따라 서브넷을 생성해 네트워크를 분리한다. 할당된 VPC 공간을 세분화해 사용이 가능해진다. (퍼블릭 / 프라이빗 서브넷) ==> 서브넷 주소의 범위는 VPC 주소 범위 내에서만 지정 가능하다.

 

 

이론에 대해 배운 후 본격적으로 네이버 클라우드를 활용해 서버를 생성해 파일을 실행하는 실습을 진행했다.

 

네이버 클라우드에 생성한 우분투 테스트 서버를 활용했고, Putty에서 apache2도 설치를 진행해주었다.

Putty에서 공인 ip로 접속 후 filezilla를 이용해 네이버 클라우드 플랫폼으로 접속할 수 있었다.

 

 

filezila에서 브라우저에 접속했을 때 만들었던 페이지를 보여주기 위해 파일을 올리고 동료들과 실행할 수 있는 사이트 주소를 공유하며 확인하는 실습을 했다.

 

filezilla 구조, 실습 공유 링크

 

 

 

filezilla를 이용해서 js파일 실행도 가능하다는 것을 알았고, index.html 이외의 파일을 실행하려 한다면 url/파일이름.확장자로 연결해야한다는 것도 확인할 수 있었다.

 

실습을 마치고 만약의 경우를 대비해 네이버 클라우드 서버 반납까지 완료하면서 실습을 마무리 했다.

 

네이버 클라우드 서버 반납

 

 

---

 

3. JWT 인증

 

: json 형태의 웹토큰을 사용하는 인증

: 세부분으로 구성됨 Header . Payload . Signature

• Header : 암호화 방식과 타입 나타냄
• Payload : 전송할 데이터가 담긴
• Signature : 토큰 검증을 위한 서명 - 위의 2가지가 있어야만 할 수 있다.

: 토큰은 매번 인증할떄마다 보냄 vs JWT는 한번만 발급하면 그 뒤로는 보낼 필요 없음

 

 

Secret key는 공개적으로 깃허브에 올리지 않고 실행할때마다 app.js에 추가해 실습을 진행했다.

 

 

토큰은 헤더의 형식 때문에 다음과 같은 방법으로 토큰을 분리해주었다.

 

 

• "Bearer" : 인증 방법을 나타내며 주로 JWT를 사용한 Bearer Token 방식을 나타냄. "Bearer"는 사용자가 제공하는 토큰이 서버에서 리소스에 접근하기 위한 것임을 의미
• "<토큰 문자열>": 실제로 인증을 위해 사용되는 JWT 토큰. 사용자 정보와 만료 시간 등의 데이터가 포함되어 있다.

 

실제 토큰의 형태

 

 

const authorization = req.headers.authorization.split(' ');

• Authorization 헤더의 값을 'Bearer'와 실제 토큰으로 분리, 결과는 배열 형태

const token = authorization[1];:

• 분리된 배열에서 실제 JWT 토큰 추출

const result = jwt.verify(token, SECRET);:

• jwt.verify 메서드를 사용하여 추출한 토큰을 비밀 키(SECRET)로 검증

 

app.post('/token', (req,res)=>{

    console.log('token > ', req.headers.authorization);

    if(req.headers.authorization){

        // Bearer 형태에서 토큰만 가져오기 위해 헤더값 분리해줘야함 ['Bearer', '토큰 스트링']

        const authorization = req.headers.authorization.split(' ');

        console.log('authorization-->', authorization);

        const token = authorization[1];

        try{

            const result = jwt.verify(token, SECRET);

            console.log('verify result >', result);

            if(result.id===userInfo.id){

                res.send({isVerify: true, name: userInfo.name})

            } else{

                res.send({isVerify: false, msg:'잘못된 접근입니다.'})

            }

        } catch(err){

            console.log('verify Error', err);

            res.send({isVerify:false, msg: '인증된 회원이 아닙니다.'})

        }

    } else {

        res.redirect('login')

    }

})

 

 

---

 

4. 로컬스토리지

 

: 브라우저가 키-밸류 쌍으로 저장할 수 있도록 하는 매커니즘

: 만료기간 없이 웹 브라우저에 키-밸류 쌍으로 저장가능

: 브라우저가 닫힌 후에도 저장된 데이터는 지워지지x

 

---

 

5. 암호화

 

비밀번호를 안전하게 해싱하기 위해  bcrypt 라이브러리를 사용하여 비밀번호를 암호화하고 검증하는 연습을 진행했다.

 

bcrypt

: 비밀번호를 암호화하는 알고리즘 중 하나

: 주로 강력한 보안 필요할 떄 사용

: blowfish 암호를 기반으로 설계된 단방향 암호화 함수

 

암호화할 원본 비밀번호를 설정해주고 해시를 생성할 때 사용하는 솔트의 라운드 수를 설정해주었다.

 

주어진 비밀번호를 해싱하여 반환하는 함수로 bcrypt.hashSync를 사용해 동기적으로 해시를 생성하였고,

원본 비밀번호와 해시된 비밀번호가 일치하는 지 확인하기 위해 bcrypt.compareSync를 사용하여 두 비밀번호를 비교했다.

 

// 비밀번호 해싱함수

function hashPW(password){

    return bcrypt.hashSync(password, saltRounds)

}

// 원본 비밀번호와 해시된 비밀번호 일치하는 지 확인하는 함수

function comparePW(password, hashedPW){

    return bcrypt.compareSync(password, hashedPW)

}

 

 

Buffer

: 파일을 읽어들이는 방법 중 하나

: 버퍼링은 파일을 준비하는 과정으로 생각하면 된다.

: 버퍼는 최소한의 데이터를 모아놓는 장소

: spinner 등을 이용해 버퍼링 중임을 알려주기도 한다.

 

• Buffer에 사용되는 메소드
• alloc() : 빈 버퍼 생성
• toString() : 버퍼를 문자열로 변환
• from() : 문자열을 버퍼로 변경

 

crypto

: 단방향 암호화 구현

: createHash() : 지정한 해시 알고리즘으로 해시 객체를 생성하는 암호화 방식

: password를 sha512 방식으로 암호화하고,

: base64 방식으로 인코딩해 리턴하는 함수

 

const crypto = require('crypto'); // 모듈 불러오기

const createHashPW = (password)=>{

    return crypto.createHash('sha512').update(password).digest('base64')

}

 

 

---

 

클라우드부터 암호화까지 학습하고 실습해보면서 클라우드 서비스와 보안 기술에 대한 이해를 높일 수 있었다. 클라우드 환경에서 개발을 하고 배포를 하는데 도움이 많이 될 것 같다는 생각이 들었고, 앞으로 진행할 프로젝트에서 배운 내용을 활용해보고 싶다고 생각했다.

암호화에 대한 내용은 연습이 많이 필요할 것 같다. 많이 접해보지 않은 내용이라 익숙해지는 데 시간이 걸릴 것 같고 안전한 데이터 관리를 위해 암호화를 적용해 실제 로그인 회원가입 기능을 구현해보고 싶다는 열정이 생겼다.