일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- 실행컨텍스트
- FP 특징
- 리덕스
- 리액트 메모
- Js module
- 항해99 미니프로젝트
- 함수형 프로그래밍 특징
- jwt
- 항해99 부트캠프
- 리액트 렌더링 최적화
- 타입스크립트
- 리액트
- 테스트 코드 툴 비교
- 항해99 사전스터디
- v8 원리
- chromatic error
- js배열 알고리즘
- next js
- 자바스크립트 엔진 v8
- 리액트 메모이제이션
- JS module system
- this
- 웹 크롤링
- 웹팩 기본개념
- toggle-btn
- 렌더링 최적화
- 알고리즘
- 코어자바스크립트
- 항해99
- gql restapi 차이
- Today
- Total
목록전체 글 (160)
Jaeilit
특징 pre-rendering SSR + SSG 지원 간편한 라우팅 코드 스플리팅 Hot Code Reloading 1. pre rendering 사전렌더링 이 개념은 카테고리와 같이 큰 틀로 방식이라는 단어로 접근을 해야 이해하기 쉽다. 사전렌더링이 무엇이냐? 각 페이지마다 html을 미리 그려놓고(생성) 렌더 시에 최소한의 자바스크립트(스플리팅) 된 코드만 실행되어 페이지를 반응성 interactive, 인터랙티브) 있게 한다. 이런 과정을 hydration 이라고 함 쉽게 이야기해서 그려 둔, 또는 그려진 html 을 클라이언트로 내려준다. 리액트의 기본개념 spa, csr의 html 빈 걸 내려주고 거기에 js,css 를 입힌다는 개념과 상반됨. next js 에서는 pre-rendering 의 ..
Apollo Client Apollo 란 GraphQL 의 클라이언트 라이브러리 중 하나로 GraphQL을 사용 한다면 거의 필수적으로 사용하는 상태 관리 플랫폼입니다. 소개 1. Query 및 Mutation 직접 전송 API 서버에 데이터를 가져오기 위해 번거로운 네트워크 단의 HTTP 요청을 신경 쓸 필요가 없어진다. (axios, fetch 사용 할 필요가 없다.) 2. 전송받은 데이터 캐싱 클라이언트의 반복요청을 줄이며 서버 부하를 줄일 수 있을 뿐만 아니라 서비스를 이용하는 사람들에게 더 나은 사용자 경험을 제공 할 수 있다. 3. Local state 관리 클라이언트만의 Local State 를 만들어 Query, Mutation, Resolver의 사용이 가능하다. 4. Overfetchi..
최근 리덕스 대체제로 많은 라이브러리들이 언급되고 있는데 React Query 와 SWR 에 대해서 비교 기본 개념 React Query React Query 는 리액트 애플리케이션에 서버 상태를 가져오고, 캐싱하고, 동기화, 업데이트 하는 것을 쉽게 해준다. SWR SWR 은 먼저 캐싱 된 데이터를 반환하고, 서버 데이터를 가져오는 요청을 보내고 마지막으로 최신 데이터를 제공하는 전략 1. Provider SWR은 별도의 Provider 없이 컴포넌트에서 바로 사용 할 수 있지만, React-Query 는 Provider로 컴포넌트를 감싸줘야한다. 2. Fetcher useSWR, useQuery 모두 두 번째 인자로 fetch 를 받는다. SWR 은 useSWR 의 첫번째 인자로 fetch url 을..
https://react-query.tanstack.com/overview Overview Overview React Query is often described as the missing data-fetching library for React, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your React applications a breeze. Motivation Out of the box, React a react-query.tanstack.com 리액트 쿼리가 리덕스를 따라 잡은 모습(2022.02) React query 소개 대부분의 기존상태관리 라이브러리는 ..
SWR 이란? stable-while-revalidate 의 약자, 해석) 캐시가 가지고 있는 stable response 이 유효한지 백그라운드에서 재검증 하는 동안 해당 stable response를 즉시 리턴하여 네트워크 지연시간을 숨기는 전략 캐싱 된 데이터가 있으면 먼저 가져오고, 서버 데이터를 가져온 후 마지막으로 최신의 데이터를 리턴한다. SWR 의 특징 1. 전역상태 관리 기능 (리덕스 대체 가능) SWR 사용 예시로 리덕스 대체 가능성을 가장 많이 언급하고 있다. 이유는 기본적인 리덕스는 액션타입 정의부터 액션함수, 리듀서 그리고 비동기 로직에 필요한 미들웨어 thunk액션 또는 saga 함수 등 방대한 작업량과 다소 반복적인 작업이 있을 수 있다. 이런 문제를 SWR은 아래 코드로 줄여..
s3 업로드시 이미지 리사이징을 위해서 imageKit 라이브러리를 사용했다. 동작은 s3에서 업로드 된 이미지를 가져올 때 imagekit 라이브러리를 통해서 webp 확장자로 변환해주면서 이미지 사이징을 줄여줘서 로딩속도 향상 효과를 불러온다. 실제 사용 후기 이미지 확장자를 webp로 변경하고 이미지 용량을 90% 이상 줄임 응답속도 약 16% 향상 정리 확장자를 크롬에서는 webp, 사파리에서는 jpeg 로 자동으로 변경해준다. webp 란 웹피라고도 불리며 손실/비손실 압축 포맷이다. 현재 프로젝트에서 확인해보지 못했으나 예시 자료에서는 용량이 500kb -> 300kb 로 약 30% 줄었다고 볼 수 있다. 예시 자료 https://post.naver.com/viewer/postView.nhn?..
영상 https://www.youtube.com/watch?v=y0xMXlOAfss 인증 서비스 사용 할 수있게 권한을 주는 것 1. 인증하기 - Request Header 2. 인증 유지하기 - Browser (쿠키 등 클라이언트 저장) 3. 안전하게 인증하기 Server 4. 효율적으로 인증하기 Token (JWT) 5. 다른 채널을 통해 인증하기 (OAuth) 클라이언트 -> HTTP 통신 -> 서버 통신은 무상태성(Stateless) 서버는 클라이언트가 보낸 요청과 이 다음 요청에 대한 연관관계가 없다. id, pwd 를 url에 담아서 보내는데 그 url 부분을 파싱을 한 후에 base64 인코더를 통해서 인코딩을 하고 요청헤더 Authorization에 담아서 서버로 보낸다. 하지만 이 방식은..
알고리즘 할 때 또 써먹을일이 있을거같아서 포스팅합니다. 시간 계산 함수 함수로 만들어서 사용 가능 function toMinute(time){ //time[0]은 시, time[1]은 분 return time[0] * 60 + time[1] * 1 } 2. 정규식 치환 함수사용하는건 처음알았다. str.replace("지금 문자", 바뀔문자) str.replace("지금문자", (match, p1) => p1 p1 에 대한연산 함수로 진행 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/replace String.prototype.replace() - JavaScript | MDN replace() ..
라이트 하우스에서 우리 프로젝트가 Performance 16점이 나왔다. 번들 용량이 많다.. spa 경우 이 번들 패키지를 한번에 다운로드받고 그게 완료되면서 렌더링을 하는데그렇기 때문에 초기 로딩속도가 느리다고 하는 것임.. 우리 번들은 용량이 꽤 되보인다. 구글링 이후 16점 짜리 퍼포먼스를 끌어올리려면 필요한 번들만 가져오게끔해야한다고 했다. 리액트 공식홈에도 있듯이 lazy를 사용하는 방법인데 사실 어젯 밤에 다 일일이 바꿔주었음에도 16점이 나왔다.. 그전에도 16점이였고 변화가 없었다.. 직접 번들패키지를 눈으로 보고싶어서 webpack-bundle-analyzer 를 사용했다. cra에서 웹팩을 수정하는 방법도 있지만 수정하려면 웹팩을 꺼내기위해서 eject를 해야해서 패키지 통일성?이 깨..