정규
CSRF / token based authentication
스프린트-토큰
스프린트-flow
-기본세팅 .env(db연결변수, 액세스/리프레시 토큰에 쓸 시크릿키)/ 인증서 경로설정 (cert.pem등)
-서버 login / accessTokenReq/ refreshTokenReq
-클라 login/ Mypage (각각, 받은 토큰을 스테이트 등으로 쓴다든지, 상태끌어올리기_ 클래스형 복습)
jwt 사용법
const jwt = require('jsonwebtoken');
//토큰 생성 예시 .sign(담을값, 솔트, 옵션)
const payload = { id: data.id, username:data.username }
const token이름 = jwt.sign(payload, SECRET_KEY, {ExpireIn: '1d'} )
//토큰 확인 -decode .verify(문자열, 생성 할 때 쓴 솔트)
const token = '요청 안의 해시된 문자열'
const decoded = jwt.verify(token, SECRET_KEY)
// 4번째 인자로 콜백함수 쓸 수 있다는데 어떤때 유용히 쓸지 용도가..음?Q.jwt.sign(), jwt.verify() => 필수 옵션이 있는지?(만료같은 관념적 아닌 물리적?) 옵션 안쓰면 생성이 안되는건지?
에러 기록
server파트 refreshTokenRequest.js
에서 조건문에 따라서 나누어 적절한 응답을 줄 때,
응답 주기전, findOne() 이나 verify() 등 함수/ 비동기 요청 의 개수에 따라(하나만 쓰면 ok, 2개이상 바로 에러) 테스트 통과가 안되던데, 모카 설정의 문제인지, async/await try,catch 를 해주지 않아서인지, 아님 그 어떤 다른 이유인지??
토큰기반인증 클라- 서버 간 workflow
개인
코딩애플
SASS 10분컷 강의 (검색하다보니, sass가 아닌 scss문법이라는데?!)
+시작전, npm i node-sass node-sass는 css밖에 읽지 못하는 브라우저에게 scss파일을 다시 css로 컴파일해주는
how to use Sass
$변수명 = #000000
자주 쓰는 값 변수로 담아 쓸 수 있음@import ('./_reset.scss')
자주 쓰는 형식을 파일로 저장, 해당 경로에서 import해서 쓸 수 있음
css {} 안에서- 셀렉터 대신 쓰는 nesting (자식태크들 스코프마냥..)
/* css 방식 */
div.container h4 { color: -- }
div.container p { color: -- }
/* sass 방식 */
div.container {
h4 { color: -- }
p { color: -- }
}@extend
.my-div-basic { 다시쓸 형식 좌라락 }
.my-div-red {
@extend .my-div-basic
color: red;
}
/* basic의 형식다 그대로 복붙하듯 쓰고, 색만 레드인! */@mixin / @include
@mixin 이름() {
color: --;
}
/* 함수 선언하듯 위에 있어야하고, 쓸 땐 @include */
.random {
@include 이름()
}React-Lifecycle / Hooks
컴포넌트의 Lifecycle : 말그대로 컴포넌트의 인생~
컴포넌트 ----등장------업데이트-----퇴장----->
그리고 이런 컴포넌트 라이프사이클 사이사이에,
hook을 걸어서 씀 (말그대로 후크, 찝어서 이 때 ㅇㅇ하자)
이전 방식은
컴포넌트가 처음 생길때 (렌더 되자마자) ~~하자
componentDidMount( ~~ )
컴포넌트가 사라지기 직전에
componentWillMount( ~~ )
등을 썼음(지금도 쓰니까 알아는 두자)
비교적 신문법인 useEffect
React-useEffect
function Mycomponent(){
useEffect(() => {
// 여기에 쓰면,
// 1 맨처음 화면이 렌더될 때
// 2 이 컴포넌트에 업데이트가 있을 때 (화면에 재렌더가 일어날 때)
// 실행된다
// 예를 들어,
let timer = setTimeout(() => {
//특정 state를 setState로 변환
}, 2000)
})
useEffect(() => {
// 할게 많고 길다면 이렇게 여러번 사용도 가능
// 단, 쓴 순서대로 됨
})
//그럼, componentWillMount 같이, 컴포넌트 사라지기 전?
useEffect(() => {
return () => {
// 여기 실행코드를 쓰면, ok
}
})
// 마지막, useEffect가 실행될 조건을 설정하고 싶다면?
// 1 딱 한 번만 쓰고싶다든지(예: 페이지 실행되자마자 ajax요청 한번만)
// 2 특정 state가 변할때 쓰고 싶다든지
useEffect(()=>{}, [] )
// 두번째 인자에 아무것도 쓰지 않으면 첫 예시처럼,
// 처음 컴포넌트가 생성되자마자 + 업데이트가 있을 때 마다 실행되고
// [] 빈배열을 쓴다면, 컴포넌트 생성직후 한번만
// [state1, state2] 특정state1,state2에 변화가 있을 때 실행됨
}언더더씨
(캐러셀 살펴보다)
@keyframes : 브라우저가 자동으로 애니메이션을 처리하는 것 보다 더 세밀하게 중간 동작들을 제어할 수 있다, 키프레임을 사용하려면 @keyframes 룰을 애니메이션과 키프레임 리스트를 매칭시킬 animation-name (en-US) 속성에서 사용할 이름과 함께 생성한다keyframes MDN
에러
ㅅㅇ님 서버 구현시, Network Err
findOne is not defined sequelize의 메소드인데, 왜 req 에러가 난다고 해서 메소드 자체를 인식하지 못하는건지? -> 아고라 각
해결
=> 알고보니, db의 테이블명을 user라고 지었는데, sequelize에서 migrate 하면서 자동 복수 users가 되는 것 관련, 건들여 놓은 부분이 있어서, 잘못된 변수명으로 findOne이 동작하지 않던 거였고, 그래서 차례로 서버가 동작하지 않으니, 네트워크 에러가 난 상황이었음ㅜ;
역시 에러 코드를 있는 그대로 받아들여야..
네트워크 에러가 난다고 왜 sequelize문법이 영향을 받지? 가 아니라
에러 코드 그대로, fineOne이 동작하지 않으니, 그 코드 부터 잘못된게 없는지 살펴봤어야했는데,,ㅎㅎ 에러핸들링-에러코드부터 왜곡하지 않고 가설을 세우는게 중요하다(add 09.14)
내일은
- OAuth
- 리액트 useEffect 실습
- 캐러샐, 스르륵, 로딩
- CORS / withCredential 두루뭉술한 것들 재정리
- 코테 lv2 풀다만거 2개
- 코딩애플 이어서 (ajax)
All right!