인증/인가
인증
유저의 identification을 확인하는 절차
(ex - 아이디와 비밀번호를 확인하는 절차)
로그인 절차
1. 유저 아이디와 비밀번호 생성
2. 유저 정보를 암호화 후 DB에 저장(회원가입)
3. 유저 로그인(아이디, 비밀번호 입력)
4. 유저 입력 정보를 암호화 후, DB에 저장된 정보와 비교
5. 정보가 일치한다면, access token을 서버에서 클라이언트로 전송
6. access token을 받은 클라이언트는,
이를 저장하고 request시 서버에 첨부하여 인증 절차를 생략인가
유저별로 접근 범위를 제한하고, 가능한 범위까지 접근을 승인하는 절차
1. 인증 절차를 통해 acces token을 생성
2. 유저가 access token을 첨부하여 request
3. 서버는 받은 access token을 복호화
4. 복호화된 데이터를 통해 유저를 식별(user id등)
5. 식별된 해당 유저의 권한을 확인
6. 유저의 요청이, 유저의 권한 범위 안이라면 해당 요청을 처리
7. 유저의 요청이, 유저의 권한 밖이라면 에러 코드로 responseJWT(JSON Web Tokens)
access token을 생성하는 방법 중 하나이다
1. 유저가 인증 서버와 통신(회원가입)
2. 인증 서버가 유저에게 JWT를 생성하여 응답
3. JWT가 있는 유저가 어플리케이선 서버에 요청
4. 어플리케이션 서버가 접근을 인가리액트에서의 인증/인가 절차
1. 사용자가 입력하는 정보를 실시간으로 state에 담는다
2. 버튼을 눌렀을 때, 로그인 또는 회원가입 요청을 서버에 보낸다
3. 요청시, fetch를 사용하며, state에 저장된 값을 body에 담아 서버에 보낸다
예시 코드:
fetch('api주소', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
email: "example@wecode.com",
password: "1q2w3e4r",
})
})
.then(response=>response.json())
.then(result=>console.log(result)) Live Share(VSC 익스텐션)
VS Code상에서 실시간으로 페어 프로그래밍을 할 수 있게 해주는 확장 프로그램
관련 노션: https://www.notion.so/wecode/1-VS-Code-Live-Share-Guide-7d50648580ec4d0c96bc163915d91326
조건부 랜더링
부모 컴포넌트가 렌더링하면 자식 컴포넌트도 렌더링한다
이 때, 랜더링 순서에 따라서 입력되기 전의 값을 사용하는 동작이 실행되는 상황이 발생한다
그렇게 됐을 때, 에러가 발생할 수 있다
따라서 에러를 방지하기 위하여, 또는 실행 코드의 분기를 주기 위하여,
삼항 연산자나 단축 평가를 이용하여 조건부로 랜더링한다
(JSX영역에서는 값이 아닌 조건문이나 반복문을 사용할 수 없다)
&&(And) 연산자: 값이 있을 때만 컴포넌트를 랜더링 할 때 사용
삼항 조건 연산자: 값의 유무에 따라 다른 컴포넌트를 랜더링 할 때 사용랜더링 실행 순서
특징1.
컴포넌트는 useEffect로 관리되지 않는 사이드 이펙트와 랜더링 실행으로 한 번,
useEffect로 관리되는 사이드 이펙트의 실행으로 한 번
총 두번의 탑다운 파싱을 가진다
특징2.
자식 컴포넌트를 만나면, 부모 컴포넌트 실행을 중단하고 자식 컴포넌트를 실행한다
<부모 컴포넌트 실행>
1. 부모 컴포넌트의 useEffect로 관리되지 않는 사이드 이펙트 실행
<부모 컴포넌트의 JSX영역 랜더링 실행>
<JSX영역의 자식 컴포넌트 실행>
2. 자식 컴포넌트의 useEffect로 관리되지 않는 사이드 이펙트 실행
<자식 컴포넌트의 JSX영역 랜더링 실행>
3. 자식 컴포넌트의 useEffect로 관리되는 사이드 이펙트 실행
<자식 컴포넌트 종료>
<부모 컴포넌트로 돌아옴>
4. 부모 컴포넌트의 useEffect로 관리되는 사이드 이펙트 실행
<fetch 응답을 받은 후>
5. 부모 컴포넌트의 fetch가 응답을 받아 then의 동작 실행
<fetch의 응답에 의해 데이터가 변경되며 리랜더링 실행>
6. 부모 컴포넌트의 useEffect로 관리되지 않는 사이드 이펙트 실행
7. 자식 컴포넌트의 useEffect로 관리되지 않는 사이드 이펙트 실행
8. 의존성 배열에 의해 재실행되는 자식 컴포넌트의 useEffect로 관리되는 사이드 이펙트 실행
9. 의존성 배열에 의해 재실행되는 부모 컴포넌트의 useEffect로 관리되는 사이드 이펙트 실행props.children
컴포넌트 사이에 들어가는 태그이머, 배열 형태로 저장된다
props.children으로 호출할 수 있다
객체를 제외한 어떤 값이든 사용할 수 있다
return(
<자식 컴포넌트명>
<태그1></태그1>
<태그2></태그2>
</자식 컴포넌트명>
)KodeKata
22.10.24
function romanToNum(s) {
answer = 0;
const romaNum = {
I: 1,
V: 5,
X: 10,
L: 50,
C: 100,
D: 500,
M: 1000,
};
for (let i = s.length; i > 0; i--) {
//접근 순서
//prev < curr: curr-prev값을 더하고, 다음 순회를 생략하기
//prev > curr: 차례대로 계속 더하기
//prev = curr: 차례대로 계속 더하기
//마지막 순회값: 그대로 넣기
let curr = s[i - 1]; // ⚠️ 객체의 프로퍼티를 동적으로 불러올 때는 대괄호 표기법과 변수를 사용해야 한다
let prev = s[i - 2]; // ⚠️ 따라서 순회값을 변수로 할당 후, 객체[변수명]의 형식으로 프로퍼티 값을 호출
if (!prev) {
answer += romaNum[curr];
continue;
}
if (romaNum[prev] >= romaNum[curr]) {
answer += romaNum[curr];
} else if (romaNum[prev] < romaNum[curr]) {
answer += romaNum[curr] - romaNum[prev];
i--;
}
}
return answer;
}
console.log(romanToNum("III")); // 3
console.log(romanToNum("XII")); // 12
console.log(romanToNum("XXVII")); // 27
console.log(romanToNum("XXIX")); // 29
22.10.26
function isValid(s) {
let answer1 = true
let answer2 = true
//객체로 괄호에 숫자값을 부여
let obj = {
"(": 1,
")" : -1,
"{": 2,
"}": -2,
"[": 3,
"]": -3
}
//입력값이 홀수라면 false를 반환
if(s.length % 2 !== 0) return false;
//괄호를 숫자로 변환하여 배열에 담기
let arr = []
for(let i = 0; i < s.length; i++){
let temp = s[i]
arr.push(obj[temp])
}
//answer1 검증
for(let i = 0; i < s.length; i++){
let curr = arr[i]
let post = arr[i+1]
if(curr + post === 0) {
i++
} else {
answer1 = false
}
}
//answer2 검증
for(let i = 0; i < s.length/2; i++){
if(arr[i] + arr[s.length - 1 - i] !== 0) {
answer2 = false;
}
}
//둘 중 하나라도 true라면 true반환
return answer1 || answer2
}
console.log(isValid("({[]}))) // 반으로 잘랐을 때 좌우 대칭인가?
console.log(isValid("[]{}()")) // 순서대로 쌍이 맞는가?
개발 공부 블로그