28일)

- 오늘의 알고리즘 문제

나의 뿌듯한 풀이

function solution(s, n) {
    let bigger= ["A","B","C","D","E","F","G","H","I","J","K","L",
                 "M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"]
    let small=["a","b","c","d","e","f","g","h","i","j","k","l","m",
               "n","o","p","q","r","s","t","u","v","w","x","y","z"]
    let result =""
 for(i=0; i<s.length; i++){
   if(bigger.includes(s[i])){
     if(bigger.indexOf(s[i])+n >25 ){
       result += bigger[bigger.indexOf(s[i])+n-26]
     }else{
       result += bigger[bigger.indexOf(s[i])+n]
     }
   } else if (small.includes(s[i])){
     if(small.indexOf(s[i])+n>25){
       result += small[small.indexOf(s[i])+n-26]
     }else {
       result += small[small.indexOf(s[i])+n]
     }     
   }else if(s[i] === " "){
            result += " "
            }
   
 } return result
    
    }

- 웹에디터 이해 ( 그냥 input text는 너무 안예뻐!)

• npm의 react-draft-wysiwyg, react-quill을 찾아 들어가보자
  -> react의 유명한 폼 라이브러리이다 !
  -> wysiwyg 에디터를 만들 수 있는 사람 !
  -> toast ui editor (노션처럼 만들수 있는 에디터)
• 우리는 react quill 써보자 임포트해서!
  -import 사이트 긁어올때 commonjs는 옛날방식이야 !
  
  저 onchange는 quil 자체의 함수이름이라, event가 함수에 들어오는것이 아니라, value가 바로 들어온다고 쓰여있는걸 확인할 수 있다 !
  (그러니 라이브러리 사용할때 설명서를 잘읽자)

그래서 나는 이렇게하면 reactquil이 될 줄 알았는데 안돼!
document~가 없다고 한다
이유는, 역시 프리렌더링 할때 프론트엔드서버에서는 react quill을 읽을수 없어서 !
{typeof window !== "undefined" && (어라 얘도 안되네 !
다이나믹 임포트를 해보자 !
react 전용 프레임워크가 nextjs 그래서 프리렌더링같은게 진행이되는거야
순수한 react 쓰면 프리렌더링 없음 거기서 쓰면 이런 오류가 생기진 않겠지만,
우리는 nextjs를 쓰니까 .. 다이나믹 임포트를 해야한다 !
그래서 reactquill의 임포트 방식을 바꿔봤다!

const ReactQuill = dynamic(()=> import("react-quill"),{ ssr : false})
다이나믹 임포트 방법 !

• react hook form을 써보자 !
  (배웟는데 생소하네...)
  import {useForm} from 'react-hook-form'
  const {register, handleSubmit} = useForm({
  mode:"onChange"
  })
  콘솔에 value찍히는거 보면 우리의 value값이 태그안에 감싸진채 찌히는걸 볼수 있다 !
  -onChangeContents를 react-hook-form에 연결해보자
  강제로 1
  -왜 아무것도 안썼는데 빈값이 아니게 나오지 ?
  
  -> 그래서 저기 적혀있는 값이면 ! 빈값으로 인식해주자라고 코드에 지정을 해준다
  
  ->mode:"onChange"입력해서 에러 실시간 체인지띄워준건데, react quill의 라이브러리는 강제로 onchange를 시켜줘야한다(저기적힌이름만온체인지..!)
  ->리액트 퀼을 입력했지만, 컴텐츠라는 키를 온체인지할거다를 추가해줘야한다
  useform에서 trigger가져와서 trigger("contents") 추가해주자
• form 태그 써서 handlesubmit쓰는 부분 익히자 !
• if~else if~else 복잡해서 우리 배웠던거가 ealry exit
  있을때 있을때 말고 없을때로 조건지정 !
  -> React quill을 써서 등록하고 조회하는 부분 다시 복습해보자
  -콘솔에 찍어봤던 value자체가 그냥 그 data로 들어가 버리는건 어쩌지 ?
  태그를 태그로 인식하게 해주자 ! 모든걸 문자열로 인식하게 말고 !
  
  ->dangerouslySetInnerHTML의 등장....!
  ={{ __html:data?.fetchBoard.contents}}이렇게 적어주니까 되네 ?
  -> 태그자체로 인식하도록 해주는 방법이다 ! (presenter에 적는 부분) 근데 뭔가 덴져러스,,,,위험해보이네 왜 ?

  - 크로스사이드스크립트(XSS) (localstorage는 위험햇)

  
  콘솔에 보면 react quill이 onchange에 막아놓긴했다
  그래서 이렇게 텍스트로 나오도록 해줬어 요거까지는
  
  얘는 근데 reactquill에서만 해당하고 백엔드에 직접 들어가서 뮤테이션을 보내보면..!(자주사용되는 해킹기법을 사용하여(이미지태그사용)..원두멘토님은 모르는게 뭘까?)
  
  이렇게 등록을 하고 !
  
  마우스 사러 들어왔는데 토큰을 탈취당하는 현장....
  -> 아무튼 setinnerhtml이 굉장히 위험하다!
• npm에 dompurify라는데가 있어 !
  -> 얘네를 사용하면 태그가 있는 문장이 자동으로 차단이 된다 !
  yarn add dompurify 해주자, 타입스르비투도
  -데이터를 조회하는 페이지에서 임포트해주자
  dangerouslySetInnerHTML={{
  __html:Dompurify.sanitize(data?.fetchBoard.contents)
  }
  아까 적었던 부분을 이렇게 코드를 작성해주니 보안완료!
  인줄 알았는데 우리 next쓰니까 프리렌더링할때 프론트 서버에서 dom못읽으니까 태그를 브라우저 일때만 화면에 보이게끔 해주ㅏㅈ
  -> Cross-Site-Script(XSS)
  사이트를 가로질러서 스크립트를 삽입하는 공격을 막아주는법!

- OWASP TOP 10

https://ko.wikipedia.org/wiki/OWASP
여기에 다양한 웹 애플리케이션 취약점 중에서 빈도가 많이 발생하고, 보안상 영향을 크게 줄 수 있는 것들 10가지가 있다!
이러한 컴터공학 정보들은 개발자로서 알아둘것 !

• SQL인젝션은 아직도 일어나고 있다 (qqq || 1===1 똑똑해 아주~)
  

- hydration-issue(하이드레이션에서 css문제발생!)

• 나는 분명 이렇게 썼는데

 <div style={{color: "indianred"}}>작성자: {data?.fetchBoard.writer} </div>
        <div style={{color: "pink"}}>제목: {data?.fetchBoard.title}</div>
        {/* <div>내용:{data?.fetchBoard.contents} </div> */}
        {typeof window !== "undefined" && (

            <div  style={{color: "red"}} dangerouslySetInnerHTML={{
                __html:Dompurify.sanitize(data?.fetchBoard.contents)
            }}>

        </div>
            )}
            <div style ={{color: "green"}}>상품가격 : </div>

왜 색깔이 이렇게 나오지 ?

서버에서 프리렌더링할때 자바스크립트, 함수바인딩..이런거 안하고
태그의 위치들만 확인하고,

서버에서 최종적으로 그릴때 (하이드레이션 할때)한다그랬지!
아까 window아니면 그려주지 않은 dompurify빼고 렌더했었지
그래서 그 div는 인식하지 못하고, 브라우저와서
갑자기 조건 생겨서 dompurify div를 그리려 하는거지
그래서 내가 정한 색깔을 읽지못하거 나오는거!
이러한 문제들을
hydration 이슈라고 한다
해결은 간단하다 서버에서 그릴때도 div개수를 맞춰주면 된다

• 동기의 코드리뷰 시간

-자주뜨는 에러에 관한 부분

-400에러(보통은 graphql 오류)
-> gql확인 쿼리확인하자 ! 잘못된 문법을 나타낸다
-나머지 에러에 관한 부분

-이번주배운내용 정리부분
컴포넌트 prev, recoil, closure, HOC,react-form, yup 잘 정리해주셔따
내가 헷갈리던 부분 클로져랑 hoc ...