# diffing

10개의 포스트

23day - Diffing, Hydration, HOC, HOF

변수에 accessToken을 넣고 새로고침을 하면 로그인 정보가 모두 날아간다. 새로고침은 브라우저에서 해당 주소로 다시 엔터를 친 것과 같아서 이전에 그려졌던 state 변수들이 사라진다. 브라우저에 저장해야 새로고침을 해도 사라지지 않는다. 브라우저 저장공간은 여러 가지가 있고 브라우저 저장소라고 한다. 브라우저 저장소의 종류에는 localStorage, sessionStorage, cookie가 있다. localStorage와 cookie는 브라우저를 껐다가 켜도 로그인 정보가 살아있고, sessionStorage는 브라우저를 껐다가 켜면 사라져있다. 보안을 중요시 한다면 새로고침할 때마다 accessToken을 받아오는 방식, 속도를 중요시 한다면 브라우저 저장소에 저장을 하게 된다. accessToken을 새롭게 받기 위해서는 어떻게 해야 할까? 로그인을 다시 한다. accessToken을 재발급 받는다. (refreshToken으로 재발급)

2022년 12월 3일
·
0개의 댓글
·
post-thumbnail

23일차) [React/JS] 브라우저 저장소(cookie, localStorage, sessionStorage)

새로고침과 재접속의 과정 이해 > 기본적으로 새로고침을 하거나 재접속을 하게 되면 리렌더링이 된다. 그 말은 브라우저에서 html, css, javascript를 새롭게 다운로드 받아서 그려지기 때문에 기존 데이터는 전부 초기화되게 된다. 그럼 저번에 배웠던 accessToken이 초기화가 안되게 하려면?!? ➡ html, css, javascript와 상관없는 공간에 저장해야 한다. 브라우저 저장소(Browser Storage) > 브라우저에 저장하는 공간 쿠키(COOKIE): 영구 저장 가능, 만료시간 지정 가능 localStorage: 영구 저장 가능, 브라우저 껐다 켜도 유지 sessionStorage: 브라우저 껐다 키면 사라짐 localSt

2022년 8월 6일
·
0개의 댓글
·
post-thumbnail

코드캠프 FE 23일차 - TIL(Diffing/ Hydration,Closure,HOC/HOF)

next.js 렌더링? >> Diffing/ Hydration 자바스크립트에도 이런것이? >> Closure 먼저 실행해줘! >> HOC/HOF 로그인 토큰 유지시키기 권한분기를 어떻게 전환시키는지 브라우저의 로컬 스토리지에 넣어놓을거임 \ 로컬스토리지에 넣으면 새로고침 해도 사라지진 않음 그러나 보안에 취약함 원래 state에 넣어놓는게 맞음 스토리지에 넣는건 임시로! 리프레시 토큰 배우기 전까지 임시로 ~ 그럼 토큰이 왜 사라졌던 것인지? 토큰이 변수에 담겨있다 = 자바스크립트에 담겨있다 새로고침(=주소를 입력하고 재접속)하고 나면 기존에 받아놓은 데이터랑 스테이트들이 초기화 되버림 그래서 기존에 저장되어있던 토큰은 사라졌던 거임 그럼 어떻게 해야 하

2022년 6월 9일
·
0개의 댓글
·
post-thumbnail

Day-23,26 권한분기(Diffing, Hydration, HOC vs HOF)

_ 어제 로그인의 전체적인 흐름에 대해서 알아보았고 백엔드에 login api를 요청하여 로그인을 해봤는데 그 과정에서 문제점을 하나 발견했다. 로그인하고나서 새로고침을 하는 순간 로그인된 정보가 사라지게 되는 것이었다😱 내 정보 돌려내.. 심각한 문제이기 때문에 로그인을 유지하기 위한 방법을 공부했다!_ Local Storage vs Session Storage vs Cookies 로그인을 하고 새로고침을 하는 순간 정보가 사라지는 이유는 결론부터 말하면 토큰을 변수에 담아놨기 때문에 새로고침을 하는 순간 초기화가 되면서 프론트엔드에서 html, css, js까지 전부 처음부터 받아와지기 때문에 토큰도 사라지게 된다. 따라서 html, css, js 등과 관련이 없는 브라우저 저장소에 토큰을 저장해야 하는데 로컬스토리지, 세션스토리지, 쿠키에 저장을 해야한다. > * 로컬스토리지: 브라우저를 껐다가 켜도 정보가 남아있다.(보안에 취약) 세션스토리지:

2022년 6월 9일
·
0개의 댓글
·
post-thumbnail

23) 목요일

React 새로고침과 재접속의 차이 지난시간에 accessToken을 변수에 넣어두고 사용했었는데, 새로고침을 하면 로그인 정보가 다 날아가서 다시 로그인을 해야 했다 새로고침을 하면 왜 정보가 모두 날아가는지???? 새로고침은 브라우저에서 해당 주소로 다시 enter를 친 것과 같음(새로운 html, css, js를 다시 받아온다는것) 따라서, 이전에 저장되어있었떤 state변수들이 다 날아가기 때문에 accessToken이 날아가게 되는 것 사라지지 않게 하려면?? => html, css, js와 관련이 없는 곳에 저장을 하면 된다 ! 브라우저 저장소 브라우저에는 저장할 수 있는 공간이 여러개가 있는데, 브라우저 저장소라고 부른다 ![](https://velog.velcdn.c

2022년 6월 9일
·
0개의 댓글
·
post-thumbnail

27일) 언제까지 Input type="text"쓸꺼야! 예쁜 웹에디터를 쓰자 ! /react-quill/ dynamic import/ XSS 크로스사이드스크립트 / 제가 개발자인데도 무서워요 잘 막아볼게요 OWASP TOP 10 / Code Camp FE 6기 / 코드캠프

오늘 수업의 요약 ! 오늘은 웹에디터에 관해 배웠습니다. 웹 에디터는 많은 종류가 있었죠! React-draft-wysiwyg와 React-quill 이 대표적이였고, 그 중 우리는 React-quill을 사용했습니다! React-quill을 설치하고 연결시켜주는데 중요한 포인트가 있었죠! React-quill의 css 부분도 함께 import 시켜주어야했던 점! 그리고, dompurify 또는 react-quill 등의 라이브러리를 사용하기 위해 react와 next의 구조적인 차이를 이해해야할 필요가 있었습니다. Next의 작동 특성! Browser에 화면을 그려주기 전 Front-end 서버에서 한번 그려준다고 했었죠! next는 서버사이드렌더링(SSR)을 지원하는 react 전용 서버사이드 프레임워크이기 때문에, 프론트엔드 서버에서 먼저 한 번 그려지고, 브라우저에서 다운로드 받은 html, css, javascript를 다시 한 번 그리게

2022년 4월 20일
·
0개의 댓글
·
post-thumbnail

23일) 브라우저에도 저장공간이 있대!.. localStorage/Next.js 렌더링의 Diffing / Hydration/권한분기/Closure/HOC / HOF code camp fe 6기

- 오늘의 알고리즘 문제 '어려움' 문제를 내가 스스로 생각해서 처음 맞췄다!!!!!!!!!!!!!!! 오늘 등원할때 궁둥이에 찝찝한게 묻어서 기분이 안좋았었는데 문제 잘푸려고 그랬나보다. 너무너무 행복하다 ! 알고리즘 풀이접근법을 잘 몰랐던 내가 이렇게 발전할 수 있는 이유는 세준멘토님이 알려주신 정답에 접근하는 법을 적용했기 때문이다. **1.RunJS를 켜서 실시간으로 값을 확인하며 풀것 2.주어진 값들을 확인하고 어떻게 가공해야하는지 콘솔로 계속 찍으며 생각할것 3.도출하는 값의 타입을 확인하면서 적절한 메서드를 쓸것** 이 전에는 사실 귀찮아서(?) 콘솔도 잘 안찍어가며 runjs만 겨우 돌렸는데, 알고리즘 마스터가 될거야 !!!!!!!!!! -오늘의문제 -아름이의 기특한 풀이 ![](https://velog.velcdn.com/images/kimareum/post/ec95d4c9-6c6f-4ac3-b869-2ec3be151520/imag

2022년 4월 13일
·
0개의 댓글
·
post-thumbnail

리액트, 커튼 뒤에서 과연 무슨일이??

color palette - navbar를 만들던 도중, 컴포넌트에 있는 state가 유지 되지 않는 걸 발견했다. 도대체 뭐가 문제여...??? 구글링 하던 도중 리액트가 dom을 어떤식으로 출력하는지 까지 딥하게 알아보았다. 리액트 동작원리를 제대로 알아두면 좋겠다 싶어서 이렇게 아티클로 남긴다. state가 유지 되지 않는 이유! 리액트가 실행되는 원리와 연관이 깊다. 리액트는 리랜더링이 일어날때 마다(setState, componentDidMount etc) diffing이라는 걸 한다. > Diffing: The process of checking the difference between the new VDOM tree and the old VDOM tree 그렇다 예전 DOM TREE(이하 ODT)와

2022년 3월 28일
·
0개의 댓글
·
post-thumbnail

React, diffing 알고리즘

👍 글을 쓰게 된 계기 리액트를 배우다 보면 '가상돔'이라는 개념을 마주하게된다. 가상돔이란 말 그대로 가상으로 만들어진 돔을 뜻한다. 실제로 돔 API를 계속 호출하면 리페인팅, 리플로우로 인해 렌더링이 계속 발생하고, 성능이 떨어지게 된다. 이런 문제를 해결하기 위해 리액트에서는 가상돔을 사용하여 바뀐 부분만 변화시킨다. 최근에 알고리즘 공부에 푹 빠져있기도 하고(존잼...) 페이스북뿐만 아니라 인스타그램등 성능이 중요한 빅테크 기업에서도 리액트를 사용해 성능을 개선하고 있어, diffing 알고리즘의 실체가 너무 궁금해져 글을 쓰게되었다. ✌️ Diffing Algorithm이란? > In React, displaying 1000 elements would require in the order o

2021년 12월 5일
·
0개의 댓글
·
post-thumbnail

리액트는 어떻게 작동할까 Diffing - 3주차 회고

2번째 후기 리액트 따라하려다 바짓가랑이 찢어진 이야기의 연계 후기로 3번째 가계부 프로젝트의 해당 Wooact를 어떻게 손봐서 조금 더 쓸 만한 수준으로 만들었는지 적어보려고 합니다. 지난 글을 요약해보자면, JSX 비스무리하게 만들기, Props를 이용한 컴포넌트화, state 변경에 따른 re-render가 wooact를 만들게 된 주요 원인이었습니다. 그리

2020년 8월 25일
·
0개의 댓글
·