React
concat 과 push
react에서 array 에 데이터를 추가할때는 push를 쓰면 좋지 않다
push를 쓰면 값이 추가되기는 하지만 결국 가리키고 있는 배열은 똑같기 때문에 react 가 업데이트를 비교할 수 없다 그래서 새로운 배열을 만드는 concat 을 사용하는 것이 좋다
key
key는 react가 항목의 변경 추가 삭제를 할 때 구분하는 것을 도와준다
key를 통해 기존의 항목과 이후 항목이 일치하는지 확인한다
useState
함수형 컴포넌트에서도 state 를 쓸 수 있는데 useState 를 사용하면 된다
import React, { useState } from 'react';기본 구성은 이렇게 되어있다
const [message, setMessage] = useState('')useStae 함수의 인자에는 상태의 초기값을 넣어주고 첫번째 요소는 현재 상태, 두번째 요소는 상태를 바꾸어 주는 함수로 구성되어 있다 값의 형태는 자유이다(숫자, 문자열, 객체, 배열 등)
위의 코드에서는 setMessage 로 상태를 바꾸어 준다
const [message, setMessage] = useState('');
const onClickEnter = () => setMessage('Hi');
const onClickLeave = () => setMessage('Bye');useState 는 한 함수에서 여러번 사용해도 상관없다
state 를 사용할 때 주의할 점이 있는데 바로 state 값을 바꿀때이다
state 값을 변경할 때는 setState 또는 useState 를 통해 전달받은 세터 함수를 사용해야 한다(직접적으로 바꾸면X)
배열이나 객체를 업데이트할때는 해당 객체나 배열의 사본을 만들고 그 거기서 업데이트를 한 후 사본의 상태를 setState 또는 useStae 를 통해 업데이트 한다
map
map 연습 코드 리스트 추가
const MakeList = () => {
const [names, setNames] = useState([ // 배열 기본값 정하기
{ id: 1, text: '눈사람' },
{ id: 2, text: '얼음' },
{ id: 3, text: '눈' },
{ id: 4, text: '바람' }
]);
const [inputText, setInputText] = useState(''); // input 창 기본값
const [nextId, setNextId] = useState(5); // 기본 항목이 네개가 있으니 5부터 시작
const onChange = e => setInputText(e.target.value); // 지금 위치의 인풋 value 를 가져와 inputText에 담기
const namesList = names.map(name => <li key={name.id}>{name.text}</li>); // names 배열을 돌면서 리스트 생성
// 클릭 이벤트 만들기
const onClick = () => {
const nextNames = names.concat({ // names 에 새 배열 추가하기 함수
id: nextId, // id 는 nextId 로
text: inputText // text 는 inputText 로 값 주기
});
setNextId(nextId + 1); // id 값 추가
setNames(nextNames); // setNames 함수 실행 nextNames 값 가져오기
setInputText(''); // input 창 비우기
}
return(
<>
<input value={inputText} onChange={onChange} />
<button onClick={onClick}>add</button>
<ul>{namesList}</ul>
</>
);
}fetch
class App extends React.Component{
constructor() {
super()
this.state = {
users: []
}
}
componentDidMount() {
// Data loading 데이터를 가져온다 = 로딩한다
fetch('https://jsonplaceholder.typicode.com/users') // 이렇게 호출하면 무조건 GET
.then((res) => res.json()) // 패치한 데이터가 들어왔을 때 무엇을 하겠다(안에 이름은 알아서 지으면 된다) res.json() 데이터를 자바스크립트에서 쓸 수 있게 변환 res.json() 또한 비동기함수
// .then((res) => console.log(res)) 자바스크립트화 된 데이터를 일단 console.log() 에서 확인
.then(res => this.setState({ users : res})) // 데이터를 state 에 저장
// .then(res => this.setState({ data : res[3] })) // 3번째 데이터를 state 에 저장
}
render() {
console.log("this.state : ",this.state)
// 여기서 console.log() 로 값 미리 확인 가능
return(
<div>
{this.state.users.map(user => {
return <Card key={user.id} name={user.name} phone={user.phone} /> // key 값은 고유한 값을 주어야 한다 예를 들어 email
})}
</div>
);
}
}Data Structure. Set, Dictionary, Hash
Set
array 나 list 같은 자료구조이다
하지만 순서라는 개념이 없어 특정한 순서를 기대할 수 없다
set 의 특징
데이터를 비순차적으로 저장할 수 있다
삽입 순서대로 저장되지 않는다 순서가 없기 때문에 indexing 도 없다
수정이 가능하다
동일한 값을 여러번 삽입할 수 없다 여러번 삽입되면 하나의 값만 저장된다
fast Lookup 이 필요할 때 쓰인다
set 에서 요소들이 저장될 때 순서
- 저장할 요소의 값의 hash를 구하고 해쉬값에 해당하는 공간에 값을 저장하는 순서로 진행된다
해쉬값을 기반으로 저장하기 때문에 Look up(특정 값을 포함하고 있는지 확인하는 것) 이 빠르다
set 의 총 길이와 상관없이 단순히 해쉬값 계산 후 해당 bucket을 확인하면 된다
hash 는 단방향 암호화이기 때문에 복호화(암호화된 문자열을 다시 원래 문자열로 돌려놓는 것을 말한다)가 안된다
홈페이지의 비밀번호 같은 경우는 복호화할 필요가 없다 비밀번호를 암호화해서 DB에 저장한 후 로그인 등 필요할 때 입력받은 비밀번호를 같은 알고리즘으로 암호화해서 DB에 저장된 문자열과 비교하면 된다
실제 값의 길이와는 상관없이 hash 값은 일정하다
var shasum2 = crypto.createHash('sha1') // Hash 생성
shasum2.update('1234') // 이 문자열이 해싱된다
var hash_value_1234 = shasum2.digest('hex')
console.log(hash_value_1234);
console.log(hash_value_1234.length);
console.log(shasum2)
//결과
Hash {
_options: undefined,
writable: true,
readable: true,
[Symbol(kHandle)]: {},
[Symbol(kState)]: { [Symbol(kFinalized)]: false }
}
//40
//'7110eda4d09e062aa5e4a390b0a572ac0d2c0220'
//
const a = require('crypto') //크립토 모듈을 불러와서 createHash 메소드를 실행한다
const b = crypto.createHash('sha1').update('wewewe').digest('hex')
console.log(b)
//결과
//'8008d8c59116c134be545698aded1ef36069b8dd'createHash(사용할 인자), update(암호화할 문자열 예를들어 비밀번호), digest(어떤 인코딩 방식으로 암호화된 문자열을 표시할지 정하는 것)
언제 set 을 사용?
중복된 값을 골라야 할 때
빠른 look up 을 해야 할때
순서는 상관 없을 때
로그인 시 중복된 비밀번호 확인 등에 사용된다
Dictionary
dictionary 는 key-value 형태의 값을 저장할 수 있는 자료구조이다
set 과 같이 순서대로 값을 리턴하지 않는다
key 의 값이 중복될 수 없다 중복된다면 먼저있던 key 와 value 를 대체한다
수정 가능하다
dictionary 도 마찬가지로 key 값의 해쉬값을 구한 후 해당 bucket 에 값을 저장한다
데이터베이스처럼 키와 값을 묶어서 표현해야 할 때 사용한다
- set는 list 보다 멤버쉽 연산을 할 때 빠르다
인증, 인가
인증은 회원가입과 로그인을 말한다
서비스를 누가 쓰는지 어떻게 사용하는지 추적이 가능하도록 하기 위해 필요하다
비밀번호, 아이디 등 제일 중요한 것은 비밀번호이다(비밀번호를 저장할 때는 암호화를 해야한다)
법규상의 강제 개인정보보호법에 규정되어있음
DB에 저장시 개인정보를 해싱하여 복원할 수 없도록 함
통신시 개인정보를 주고받을 때 SSL 을 적용하여 암호화 (HTTPS <- 일반 http 에 security 가 붙은 것)
단방향 해쉬란?
본래 해쉬는 자료구조에서 빠른 자료의 검색, 데이터의 위변조 체크를 위해서 쓰이지만, 복원이 불가능한 단방향 해쉬함수는 암호학적 용도로 사용한다
MD5, SHA-1(둘은 보안에 취약), SHA-256 등이 있다 숫자가 높을수록 높은 레벨이다
결과만 봐서는 당장 식별이 불가능하다
