[취업준비일지] - 27

1.React Context를 통해서도 상태 관리가 필요하지만
앱의 규모가 커질 경우 다수의 프로바이더에 감싸진 컴포넌트가 생길 수 있기 때문에 다른 방식의 상태관리 도구가 필요하다.

또한 고빈도의 데이터 변경에 사용되는 상태값에는 Context를 추천하지 않기 때문에 사용을 권장하지 않는다는 공식 의견도 있었다.


2.Redux를 사용할 때는 npm install redux를 통해서 가능하지만
리액트에서 사용하고 싶은 경우에는 npm install redux react-redux를 통해 리액트에서 사용하고 있다는 것을 알려 해당 패키지를 받아야 한다.

또한 index.js에서 
import {Provider} from 'react-redux'를 통해 import한 다음 
App태그를 <Provider>로 감싸고(<Provider><App /></Provider>)
import store from './store/index'를 통해 store를 가져온 다음
Provider에 props로 넘겨준다.(<Provider store={store}> 형태)

사용하기 위해서는 컴포넌트에서 import를 해야 한다.
import {useSelector} from 'react-redux'로 받은 다음 
함수 내부에서 const StateName = useSelector(state => state.StateName)형태로 받을 수 있다.

또한 state를 변경하기 위해서는
import {useDispatch} from 'react-redux'로 가져오고
const dispatch = useDispatch()로 함수 내부에 가져온 다음
동작들과 연동시킬 function을 생성해 아래와 같이 dispatch를 보낸다.
const functionName = () => { dispatch({ type : 'actionName' }) }

또한 이런 작업들을 받아주기 위해서는 store가 당연히 필요하고
아래와 같은 느낌으로 action에 대응할 분기를 만들어야 한다.

import { createStore } = from 'redux'

const `${anyFunctionName}Reducer` = (state = { state1 : condition }, action) => {
 if(action.type = "work1"){
  return{
   state1 : anyvValueChangedBy"work1"( ex. state.state1**2) 
  } 
 }
 if(action.type = "work2"){
  return{
   state1 : anyvValueChangedBy"work2"( ex. state.state1*2) 
  } 
 }
 if(action.type = "work3"){
  return{
   state1 : anyvValueChangedBy"work3"( ex. state.state1/2) 
  } 
 }
 
 return state
}

const store = createStore(`${anyFunctionName}Reducer`)

export default store

고정된 작업 수행이 아닌 변경되는 수치만큼의 변동이 필요한 경우
payload에 추가적인 값을 넣어 사용할 수 있다.
(dispatch({ type : 'actionName' , value : anyNumberOrData}}

물론 reducer에서 type을 확인 후 value를 체크하거나
value가 들어있는 type을 따로 생성해 관리할 수 있다. 


3.메일 헤더 인젝션은 
공격자가 폼에 개행 문자를 이용해 메일을 보낼 때 
바이러스 등을 임의의 주소에 발송할 수 있게 된다.

%0D%0A의 개행문자가 들어간 내용 뒤 원하는 주소 또는 첨부 등을 넣는 방식이다.


4.디렉토리 접근 공격은 비공개 디렉토리에 접근하는 공격으로
패스 트래버설이라고 부르기도 한다.

파일 경로 등의 처리가 취약한 경우 ../ 또는 /etc/password 등의 경로를 지정해 디렉토리에 엑세스하여 변조 또는 삭제되거나 정보유출의 문제가 될 수 있다.


5.리모트 파일 인클루션은 사용자가 스크립트를 실행할 때
공격자가 지정한 URL을 읽게 함으로 다른 파일이 실행되게 만드는 방법이다.


6.강제 브라우징은 공개 의도가 없는 파일을 열람할 수 있게 만든 취약성 등을 말한다.

일반적인 UI로 접근은 되지 않지만
사용자가 추측해 주소를 입력할 경우 데이터 또는 페이지에 접근이 가능한 경우가 대다수이며 내부 파일(특히 이미지)의 url 등은 외부 페이지에서도 접근할 수 있는 등의 문제가 있다.


7.부적절한 에러 메세지 처리는 에러 메세지를 사용자에게 노출하는 문제다.
에러 코드 등으로 신고를 할 수 있게 처리하는 경우까지는 괜찮지만
날것 그대로의 에러를 전송할 경우 내부 구조를 파악할 수 있는 문제가 발생할 수 있다.

로그인의 경우에도 부적절한 정보라고 표기하는 것과
등록되지 않은 이메일이라는 것은 이메일 등록여부를 알 수 있다는 차이가 있어
정보 여부를 파악할 수 있다.

국가기관에서도 비슷한 예가 있는데
개인정보를 확인할 때 특정할 수 있는 사람의 주민번호를 입력할 경우
맞는지 틀린지에 대한 답신이 오며 시행횟수의 제한을 두지 않기 떄문에
주민등록번호 생성 규칙에 따라 시도하면 금방 주민번호를 찾을 수 있다는 문제점이 있다.(성별, 출신지)

또한 데이터베이스 등의 에러 메세지의 경우
어떤 포인트에서 문제가 생성되었는지를 알려줄 때
문장의 일부가 포함되어 있기 때문에 내용을 유추해 공격의 도구로 사용할 수 있다.


8.힙은 우선순위 큐를 위해 만들어진 구조이며
우선순위 큐는 우선순위가 높은 순서대로 나가는 구조라고 할 수 있는데
일상에서는 프린터, 응급실, 작업 스케쥴 등 여러 곳에서 볼 수 있다.

배열, 연결리스트, 힙으로 구현이 가능하지만
배열은 O(N)의 시간복잡도가 필요하지만
힙은 O(logN)의 시간복잡도로 훨씬 효율적이다.

완전 이진 트리로 구현하며
최대힙, 최소힙으로 표기한다.
(루트 노드가 최대인지 최소인지의 차이가 있다)

최대힙 기준으로 데이터를 설명하자면(최소힙은 최대가 아닌 최소로 보면 된다)

-최대값을 추출하고 싶은 경우 
루트노드의 값을 추출한 다음 트리 맨 마지막 값을 루트노드로 옮긴다.
자식들 중 큰 값과 교체하는 방식을 반복한다.

-새로운 값을 추가하고 싶은 경우
마지막 노드에 값을 추가한 다음
부모노드와 비교해 부모보다 큰 경우 값을 교체하는 방식을 반복한다.





(1).백준 3053 택시 기하학은 말 그대로 택시 기하학을 적용한 문제였다.
택시 기하학이라고 부른다는 것을 모른 상태에서 무슨 소리를 떠드는지 잘 모른 채 input, output을 보고 문제를 풀었지만
택시 기하학을 검색해보니 격자무늬의 도로인 것을 가정하고
거리를 구하는 방식이었기 때문에 유클리드의 원형이 아닌
마름모꼴의 원형(은 아니지만)이 나오는 것이었다.
그래서 유클리드의 원의 넓이는 ㅠ*r^2이지만
택시 기하학의 원의 넓이는 2*r^2가 된다.

let input = 10000**2

console.log(input*3.14159265358979)//조건떄문에 12자리 이상을 넣어야 했다.
console.log(input*2)