728x90 c.c46 65. 암호화와 JWT 토큰 양방향 암호와 단방향 암호화 보안과 해킹의 관계는 창과 방패와 같다 임의의 문자열 = salt 소금 이 증표가 있는 사람만 로그인이 가능하다 Accept-Encoding: 압축 상태 Content-Length: 용량 content-type: 안에 내용(json을 포함하고 있다~) Host: 백엔드 도착지 Origin: 출발지 User-Agent: 지금 요청하는 브라우저 토큰이 들어온다 Bearer = 관례 jet.io Local Storage = 다시 켜도 로그인이 되어있다 Sessing Storage = 로그아웃이 된다 Cookies = 만료시간이 있다 = 백엔드와 주고 받고가 가능하다 2023. 2. 23. 64. 로그인 프로세스 로그인하기를 클릭하면 백엔드로가서 DB로 가서 해당하는 아이디가 있는지 보고 있으면 다시 백엔드로 가서 메모리세션에 저장한다 다음 브라우저에 세션ID를 어딘가에 저장을 해야한다 변수 localStorage sessingStorage cookie 변수에 저장을 하면? fetchUser에 저장을 한다 저장을 하고 인가에 검증을 한다 인증 - Authentication 인가 - Authorization 다음 DB에서 확인한다 저장을 많이 해야되기 때문에 메모리를 늘린다 = scale up 효율적인 방법은 컴퓨터를 더 구매한다 least connection round robin scale out stateful이므로 어려움 = stateless로 변경 필요 = 상태를 없앤다 DB에 sessin을 만든다 그럼 D.. 2023. 2. 23. 63. global state의 이해와 fetchpolicy react-query와 apollo/client는 fetchPolicy가 내장되어있음 미니 리덕스 = recoil redux가 망하면 안되는데! 해서 나온것이 redux-toolkit cache-and-network = cache에서 한번 가져오고 그 다음 cache에 있든 없든 api는 한번 요청해. 그리고 2개를 비교해봐 cache-first = 기존꺼 있으면 가져오고 없으면 새걸로 받을래 = 디폴드 기본값 cache-only = cache에서만 가져와, 없으면 가져오지마 network-only = 새걸로 받고싶어, 매번 api요청해 no-cache = 아예 cache하지마 cache-first으로 했을 때, 아무것도 뜨지 않는다 network-only로 하면? 처음에 한번 가져오고 저장을 했지만, .. 2023. 2. 22. 60. 검색 - 디바운싱과 쓰로틀링의 이해와 적용 검색이 되지만 쓰고 지울때마다 계속 나타난다 마지막 글자만 보내고 싶다면? 디바운스 - 디바운싱 쓰로틀 - 쓰로틀링 디바운싱 마지막 입력을 기준으로, 특정 시간 이내에 추가 입력이 없으면 1번 실행하는 것 쓰로틀링 최초 입력을 기준으로, 특정 시간 이내에 발생한 추가 입력을 무시하는 것 스크롤을 내릴 때 무수히 많은 이벤트가 발생한다 그럼 패치모어가 많이 발생하기 때문에 쓰로틀링을 사용한다 lodash의 디바운싱 검색에 적용하기 yarn add lodash yarn add -D @types/lodash 검색 결과 표시 알고리즘 구현 검색한 것에 color넣기 이런 구조를 만들어야 한다 사용자가 #을 넣으면 문제가 발생하기 때문에 시크릿코드(또는 uuid)를 사용한다 el은 key가 안된다 uuid yar.. 2023. 2. 21. 59. 검색 프로세스 이해 및 구현 실습 철수라고 검색을 하면 철수만 가져오도록 한다 검색은 데이터베이스에서 한다 문장 검색 = 풀텍스트 검색 테이블 풀스캔 = 풀 테이블 스캔 역인덱스 = 역색인 = inverted index Elasticsearch 토크나이징 시간이 오래걸린다 = 디스크 I/O = 성능이 느리다 메모리기반 DB - Redis 브라우저에서 점심을 검색해서 백엔드로 가서 Redis에서 찾고 있으면 다시 백엔드로 가서 브라우저로 온다 Redis에 없으면 Elasticsearch가서 찾고 브라우저로 가는게 아닌 다음을 위해서 Redis에 저장을 한다 임시캐싱 cache aside pattern 이렇게 알아야 백엔드와 커뮤니케이션이 좋아진다 검색 기능 구현 2023. 2. 21. 57. 이미지 검증 실습 및 게시글에 등록하기 실습 useRef = 레퍼런스를 참조한다 click이 빨간줄인 이유 = qqq가 뭔지 모르겠다는 뜻 ref가 빨간줄인 이유 = 초기값 = null로 시작해~라는 뜻 qqq = fileRef라고 사용한다 이미지 용량, 확장자 검증하기 용량이 너무 크면 백엔드에 문제가 생길 수 있다 jpeg가 jpg도 되는 이유 = 예전에 확장자 저장을 할 때 3글자만 된 적이 있다. 그래서 jpg도 가능 여기도 jpeg를 넣을 수 있다 넣으면 jpeg에 해당하는 것만 가능하다 선택 자제 못하게 하려면 input태그에 하면 된다 다른 페이지에서도 사용할 수 있어서 공통으로 사용할 수 있는 폴더에 넣는다 여기에 넣고 파일을 받아와야 되니까 file을 적는다 나눴으니 실행될 수 있도록 file에 타입이 없다고 빨간줄이 뜨는 것 파일.. 2023. 2. 21. 이전 1 2 3 4 5 6 7 8 다음 728x90
