본문 바로가기
728x90

분류 전체보기153

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.
56. 이미지 업로드 프로세스 이해 및 실습 다이나믹 임폴드 클릭할 때 해당하는 함수가 실행하여 다운을 받는다 Network탭에서 이미지 받아오는 순서 이미지 업로드 html을 먼저 가져오고 다음에 css, js를 받아온다 사진은 용량이 커서 따로 사진전용컴퓨터가 있는 곳도 있다 DB에도 가능하다 DB에는 텍스트가 되는데 사진이 가능하다? BLOB으로 가능하다 BLOB = 블랍, 비랍 Binary Large Object 이진 큰 오브젝트 이진 = 0101.. 이렇게 사진 업로드 하고 다운로드 주소 만들어내고.. 그 주소에 접속하면 다운받게 해주고.. 이렇게 만드는게 귀찮다 그래서 이런것들을 서비스 형태로 제공해주는 회사가 aws, acp, azure = 클라우드 = 컴퓨터 빌려두는 역할, 기타 서비스 제공 역할 클라우드 프로바이더(Provider).. 2023. 2. 20.
728x90