TIL - 0724
[프로젝트 개발] Spring Security - OAuth 인증서버, JWT
액세스토큰과 JWT
- 액세스토큰 : 인증서버에서 발급해주는 토큰으로 해당 서버에서 발급했다는 증명과도 같은 String값 즉, 아무런 데이터가 들어있지않음
- 인증 작업을 인증서버에 어플리케이션 서버가 위임한 것
- JWT(json web token) : 어플리케이션 서버는 클라이언트에 대한 정보를 가지고 있지않고, 클라이언트가 자신이 인증받은 사용자임을 알리려고 토큰을 준다고 할 때 인증서버가 발급해준 액세스토큰만으로는 클라이언트의 정보를 알 수가 없기때문에 액세스토큰을 가진 클라이언트에 한 해 json 형식을 빌려 필요한 최소한의 정보를 담고 암호화 시켜 만들어서 발급해주는 토큰
- 최초 1회 인증서버에 필요한 정보를 콜해서 받아온 뒤로는 인증서버에 다시 콜하지 않아도 됨
- JWT 토큰도 만료기간을 정할 수 있으므로 만료기간이 다되었을 때 클라이언트에 다시 인증 받고 오라고 시킬 수도 있을 것 같음
JWT 발급
- 액세스토큰을 받자마자 ajax 콜로 서버에 가서 JWT를 받도록 하는 것이 어떨까? 그렇다면 클라이언트는 액세스토큰을 가지고 있지않아도 됨
- JWT를 발급하기 전에 서버에서는 클라이언트를 기록해두기위해 데이터베이스를 사용함 : JWT를 발급 받은 후에 데이터베이스, 인증서버 액세스 하지 않는다는 장점(리퀘스트 횟수를 엄청 줄일 수 있음)이 있는 것이지 유저의 사용 연속성(예를 들어 기초 권한에서 레벨업된 권한을 가졌을 때)을 고려하면 데이터베이스에 기록은 해두어야함
react.js
특징
- View build library
- virtual dom 사용 : dom을 가지고 있고, date-set을 받으면 dom에 채워서 리턴해주는 방식?
- 리얼 DOM을 선택해서 데이터를 추가해주는게 아니라 가상의 DOM(컴포넌트)를 만들어두고 데이터를 먼저 채워두고 리얼 DOM에 붙이는 형식인듯
- 재사용할 수 있음
- 서버 & 클라이언트 사이드 렌더링 둘 다 지원
- 초기 렌더링을 서버가 하게해서 빠르게 되어 보이는 것처럼
라이브러리
- react : 컴포넌트 담당
- react-dom : 렌더링 담당, 15버젼 이상부터 2개의 파일로 분리됨
컴포넌트
- 모든 컴포넌트 클래스는 render() 메소드를 가짐 : 컴포넌트가 어떻게 생길지를 정의하는 메소드
- 어플리케이션의 최상위(root) 컴포넌트 : App
- 컴포넌트는 정의를 해두면 다른 컴포넌트에서 ‘<컴포넌트이름>‘과 같이 사용할 수 있음
- 마지막에는 리얼 DOM에 붙여주는 작업을 하면 됨 : ReactDOM.render(붙여줄 가상의 DOM, 대상인 리얼 DOM)
class Jinbro extends ReactComponent {
render() {
return(
<div>Jinbro</div>
);
}
}
class App extends ReactComponent {
render() {
return(
<Jinbro/>
);
}
}
ReactDOM.render(<App/>, document.getElementById('root'));
props
- 컴포넌트 내에서 immutable data를 처리할 때 사용
- 상위 컴포넌트가 하위 컴포넌트를 사용할 때 propsName=”value” 으로 사용하면 됨, 하위 컴포넌트에서는 {this.props.propsName} 으로 사용할 곳에 선언하면 됨
- 하위 컴포넌트 사용 시 <태그>여기 내용 태그 사이 내용의 값을 정의해주면 하위 컴포넌트에서는 {this.props.children}으로 꺼내쓰면 됨
- 객체(defaultProps)의 필드를 설정해주는 것일 것 같음
class PropsExample extends React.Component {
render() {
return(
<div>
<h1>Hello {this.props.name}</h1>
<p>{this.props.children}</p>
</div>
);
}
}
class App extends React.Component {
render() {
return(
<div>
<Example/>
<PropsExample name="jinbro">children으로 들어갈 텍스트</PropsExample>
</div>
);
}
}
- 기본값 설정 : Component.defaultProps = {…}
- 컴포넌트 선언이 끝난 후 설정해줘야함
class PropsExample extends React.Component {
render() {
return(
<div>{this.props.value}</div>
);
}
}
PropsExample.defaultProps = {
value: 0
}
- (default)props의 값(필드명 - 값)을 선언 후 타입 검증할 수 있음
- 타입에 맞지않거나 값에 대한 선언을 하지않을 경우 콘솔에 로그를 띄울 수 있는 방법 : propTypes 선언 후 defaultProps에서 선언?
class PropsExample extends React.Component {
render() {
return(
<div>{this.props.value}</div>
);
}
}
PropsExample.defaultProps = {
value: 0,
secondVal: '
}
PropsExample.propTypes = {
value: React.PropTypes.string
secondVal: React.PropTypes.any.isRequired
}
- props 선언 방법 정리
- 상위 컴포넌트에서 defaultProps의 값을 선언해주는 것
- 컴포넌트 선언 후 외부에서 defaultProps 객체를 만들어주는 것
JSX
- 자바스크립트 코드에서 html 형식을 그대로 작성할 수 있는데, 리액트 JSX는 그런 태그를 자바스크립트로 변경해줌
- Babel에서 JSX 로더를 사용해서 자바스크립트 코드로 변환해줌 : document.createXXX와 같은 API로 변경해줄 것으로 생각됨
var a = (
<div>
</div>
),
- 태그들은 컨테이너(div> 태그 안에 감싸줘야함
- 루트 컴포넌트를 포함한 모든 컴포넌트가 해당 규칙을 지켜야함
class Example extends ReactComponent {
render() {
return(
<h2>ㅎㅇ</h2>
가 아니라
<div>
<h2>ㅎㅇ</h2>
</div>
여야 함
<div>1</div>
<div>2</div>
가 아니라
<div>
<div>1</div>
<div>2</div>
</div>
여야 함
);
}
}
- JSX에서 자바스크립트 코드 사용가능 : ‘{ }’ (javascript expression)로 감싸서 사용
render() {
let greet = 'ㅎㅇ';
return(
<div>{greet}</div>
);
}
- JSX에서 CSS 코드 사용가능 : CSS의 style key는 카멜케이스(첫글자는 소문자 뒤부터는 구분되는 단어의 첫글자마다 대문자)로 작성되어야함
- 스타일 지정은 자바스크립트 변수로 지정해두고 {}로 불러옴
render() {
let style = {
color: 'pink',
backgroundColor: 'black'
};
let greet = '안녕하세요';
return(
<div style={style}>
{greet}
</div>
);
}
ES6
class
- 생성자 메소드 존재
- 클래스부터 선언하고 뒤부터 사용가능
- 메소드만 선언가능, 변수는 메소드의 지역변수
- 상속도 가능
let
- var와 비슷하게 변수를 선언할 때 사용됨
- var는 함수 스코프라면 let은 블록( ‘{ }’ ) 스코프임
- 변수의 스코프란 변수가 유효한 범위를 말함
- 한번 선언하면 똑같은 이름의 변수를 선언할 수 없음 : 값 덮어쓰기는 됨
- ES6에서는 스코프 이슈가 발생을 막기위해 let을 사용하자
기타
Babel
- 구버젼 브라우저에서 지원하기위해 ES6 문법을 ES5로 변환해주는 역할