웹에디터, 다이나믹 임포트, 웹 공격, react-quill
8/10 작성한 내용의 앞 뒤로 등의 태그를 붙여서 데이터베이스에 저장했을 뿐이었다. 이 내용들이 문자열이 아닌, 태그의 기능 그 자체로 인식하게 만들기 위해 dangerouslySetInnerHTML 이라는 속성을 사용해서 해결했다. 여기서 한가지 호기심이 생길 수 있다. 태그처럼 자바스크립트로 해킹 기능을 작성하면...? 이 때, 누군가 글 상세보기를 클릭하면, 작성된 자바스크립트 코드가 실행될 것이고, 해킹(예, 토큰 탈취, 탈취된 토큰으로 유해 게시물 생성 및 중요 게시물 삭제 등)을 당할 수 있다. react-quill 라이브러리에서는 이를 사전에 차단해 준다. (태그를 의미하는 단어인 '' 등을 <, >와 같이 변경하여 차단) 하지만, react-quill만 믿고 방심 했다가는, 다른 ..
2021. 10. 23.
브라우저 저장소, 저장소 특징 비교, 비회원 장바구니, 오늘 본 상품
8/9 오늘은 브라우저 저장소에 관해서 배웠다. 변수에 데이터를 넣어 놓았더니, 새로고침시에 저장된 데이터가 날아가는 현상이 있었다. 이유는 HTML, CSS, JS 를 다시 다운로드 받아서 화면에 새로 그리기 때문이다. 따라서, 데이터를 유지하기 위해 브라우저 저장소에 저장한다. 브라우저 저장소는 크게 쿠키, 로컬스토리지, 세션스토리지가 있다. 각각의 특징을 보면 쿠키: 저장된 데이터가 Backend-API 요청시에 함께 보내짐 로컬스토리지: 브라우저를 껐다가 다시 켜도 저장 정보가 남아있음 세션스토리지: 브라우저를 껐다가 다시 켜면 저장 정보가 사라짐 여기서 브라우저 저장소로 무엇을 할 수 있었나요? 비회원으로 장바구니 담기 => 비회원은 아직 로그인 하기 전이므로, Backend에서 어떤 유저가 장..
2021. 10. 23.
props data prev?, 정규표현식, 글로벌 스테이트, context API
8/2 이번주는 로그인과 권한분기가 진행되는 아주 중요한 주간이다. 이를 다루기 위해 밑바탕이 되는 글로벌 스테이트를 오늘 배웠다. 여기에 ContextAPI라는 것을 활용할 수도 있고, Redux 또는, ApolloClient의 ApolloCacheState를 활용할 수도 있다고 했다. (여기서는 ContextAPI를 배우고, 사용합니다.) 함수와 props, data, prev 그리고, 정규표현식도 함께 배웠다. 프로그래머스 props data prev?, 정규표현식, 글로벌 스테이트, context API 원래는 props는 관례일 뿐! 철수는 무엇일까요? 영희는 무엇일까요? 훈이는 무엇일까요? prev map prev가 아닌 아무거나 아무거나 써도 됨 정규표현식 홈페이지 확인 방법 @가 있으면 ..
2021. 10. 22.
