TIL 22일차

Durumi Gim·2021년 3월 8일

시작하면서 (2.9/5.0)

아침에 졸린 순간, 자지않고 일어나서 씼으니까 훨씬 맑고 기분좋다.
나는 나에 대한 별점이 정말 짠 것 같다. 3점을 넘을 때가 없어. ㅋㅋ
나에 대한 기준이 엄격하다

스케쥴

할일
[X] 생활코딩 듣고 총정리

11-12 프로젝트 아이디어 : 뱅크샐러드, 코드잇, 트레바리,밀리의 서재, 꾸까, 브런치
12-1
1-2
2-3 인증,인가(손승현 멘토님)
3-4
4-5
5-6
6-7
7-8
8-9
9-10
10-11
11-12 : 좋아요증감 + 하트
12-1 ::
1-2 :::

배운 것

1) 인증, 인가

인증이란
비밀번호 암호화는 어떻게 이뤄져?
단방향 해쉬함수 그리고 레이보우 테이블 어택
설팅과 키스트레칭 그리고 bcrypt
인가란
JWT 에 대해 배워보자
인증이란
: 인증,인가는 API에서 자주 구현되는 기능중 하나.
프라이빗하든 퍼블릭하듯 API에서는 기본적인 인증,인가를 요구해
: 인증(Authentication)은 유저의 identification을 확인절차
(아뒤,비번 확인)
:인증하려면 유저의 아이디,비번 생성기능부터 필요하겠네?

: 로그인 절차 -
(1) 유저 아이디 비번 생성> 비번 암호화해서 DB저장
(2) 유저 로그인(아뒤,비번입력) > 유저 입력한 비밀번호 암호한 한후, 암호화
되서 DB저장된 유저 비번과 비교 > 일치하면 로그인 성공
(3) 로그인 성공시 access token을 클라이언트에게 전송 >
유저는 로그인 성공후 다음부터는 access토큰을 첨부해서 request 서버에
전송함으로서 매번 로그인 안해도 되도록 함.

:유저 비번 암호화
: 유저 비번은 절대 그대로 DB저장 안해 (해킹당하면 노출되잖아. 내부인원이 알고있고)
: 유저 비번은 무조건 암호화!!!
: 비번 암호에는 단방향 해쉬 함수가 일반적으로 쓰여. (one-way hash function)
(1) 단방향 해쉬함수는 원본메시지를 변환하여 암호화된 메시지인 <다이제스트>를 생성.
원본 메시지를 알면 암호화된 메시지를 구하기는 쉽지만, 암호화된 메시지로는
원본 메시지 못구해 >> 그래서 단방향성.

: Bcrypt
단방향 해쉬함수의 취약성
: rainbow table attack - 미리 해쉬값들을 계산해놓은 테이블
: 해쉬함수는 원래 비번저장 위해 만든게 아니야.
짧은 시간에 데이터 검색하려고 설계한거야.
그래서 해시 함수는 본래 처리속도가 최대한 빠르도록 설계.
이런 속성때문에 공격자는 매우 빠른 속도로 임의의 문자열의 다이제스트와
해킹할 대상의 다이제스트를 비교할 수 있다.
이런 방식으로 비번을 추측하면 패스워드가 길거나 단순하면, 빠르게 찾아냄.

: 단방향 해쉬함수 취약성 보완점 2개
:salting : 실제 비번이외에 추가적으로 랜덤 데이터를 더해 해시값 계싼
:key strecching : 단방향 해쉬값 계산 후, 그값을 또 해쉬, 반복
:최근에는 일반장비로 1초에 50억개 이상의 다이제스트를 비교할 수 있어.
키 스트레칭을 적용하여 동일장비에서 1초에 5번 정도만 비교할 수 있게 함
GPU(graphics processing unit)를 사용해도 수백,수천번만 비교가능.
50억 번과는 비교할수 없을 정도로 적은 횟수.

:salting과 key streching을 구현한 해쉬함수 중 많이 쓰는 것 >>bcrypt
이건 처음부터 비밀번호를 단방향 암호화하려고 만들어진 해쉬함수.

:JWT(JSON Web Tokens)
: 유저가 로그인 성고하면 access token이라는 암호화된 유저정보를 첨부해서
request를 보냄.
: 서버에서는 access token을 복호화해서 해당 유저정보를 얻음
복호화해서 얻은 유저 아이디를 통해 유저가 누군지 알수 있음
:이런 절차 목적은 해당 유저가 매번 로긴 안해도 되도록하는 것.

: access 토큰 생성방법 : JWT(Json Web Tokens)이다. 말그대로
유저정보를 담은 JSON 데이터를 암호화해서 클라이언트와 서버간에 주고받는 것.

: 인가 (Authorization)
: 유저가 요청하는 request를 실행할 권한 있는 유저인지 확인절차
(ex: 해당 유저는 고객정보를 볼수있지만, 수정못함)
:Authrization도 JWT을 통해 구현될 수 있다. (엑세스 토큰을 통해
유저정보를 얻음으로 유저가 가진 권한도 확인 가능)

:인가절차
(1) 인가 절차를 통해 엑세스토큰을 생성(유저정보 확인할 정보가 들어있어야지.
user id 같은) >>유저가 request를 보낼때 엑세스 토큰을 첨부해 보냄
(2) 서버에서는 유저가 보낸 엑세스 토큰을 복호화함 >> 복호화된 데이터를 통해 u
user id를 얻음
(3) 유저가 충분한 권한을 가지고 있으면 해당 요청 처리 >> 유저가 권한 가지고 있지 않으면
401(안인가된 응답) 혹은 다른 에러코드 보냄

리액트

이슈해결

1) 속성을 쓰고, 속성값을 쓸때, 이렇게 쓰면 된다.
onClick={this.함수명}

this를 빼먹었다는 것 (그럼 undefined라고 나온다)
{()=>{this.함수명} 으로 써줘도 된다.굳이 비효율이지만.
onClick은 콜백함수여서, 함수명의 함수를 자동실행시킨다
{this.함수명()} 이렇게 ()를 붙이면, 클릭하기도 전에 실행되어버린다.

2) 필요한 변수는 (이번에는 boolean형 조건이었는데)
const x = a&& b 이런식으로, 아래 요기에다가 써주면 된다.
렌더함수 바디에 써주면 된다는 뜻이다.
render(){ 요기}

복습

1) Link 연결방식

<Link to='/main'> 잊지말자 </Link>

진짜 아는 것을 내 언어로 정리하기

상위컴포넌트의 속성= {(인자)=>{}함수}를 넣어주고,
하위컴포넌트의 onClick등에 그 속성을 프롭스로 써주면, onClick 되었을때 그 함수가 실행된다.
onClick= this.props.속성(인자)
하위컴포넌트에에서 프롭스로 받아온 것의 인자를 붙여주면, 그 인자를 가지고 함수의 setState가 상위컴포넌트의 state를 바꾼다.

2) map( => 여기서 중괄호 ? 소괄호?)