다양한 이야기를 공유합니다
UseTransitionstate를 변경시 ui가 변경되는데 해당 ui 랜더가 오래걸리면suspense 처럼 loading표현을 할수있도록 하는 hooksuspense 는 비동기 처리시 사용const [filter, setFilter] = useState(""); const [isPending, startTransition] = useTransition(); const filteredItems = items.filter(item => item.includes(filter));...
https://www.example.com:8443/path/to/page.html?search=apple pie&sort=asc#reviews1. URLhttps프로토콜 , 통신규약http, https, ftp, mailto호스트, 도메인 www.example.com포트 :8443서버의 어떤 프로세스에 연결할지하나의 서버에 여러 어플리캐이션이 존재하면 그 위치를 찾을때 필요서비스 표준 포트 HTTP 80 HTTPS 443 FTP 21 SSH 22 MySQL 3306 Redis 6379경로(path) /path/to/page.html자원 위치 ?search=apple쿼리 스트링 서버에 전달하는 추가 파라미터2. DNS 조회 → IP 획득브라우저가 위 URL을 서버에 연결하려면 IP 주소가 필요. DNS가 그 변환 담당.3. TCP 연결 시도 → 3-Way HandshakeTCP는 “신뢰성 있는 통신”을 제공하기 때문에 양쪽이 "준비됐는지" 확인하는 과정이 필요4. HTTPS 암호화 세션수립HTTPS일때 TCP 위에 TLS(암호화)를 얹는 것.5. HTTP 요청 전송요청 → 응답 수신6. 리소스별 추가요청js, css, 이미지 등
Routingcsr 에서는 div태그하나 + 자바스크립트 번들 응답 path가 하나일수밖에없음ssr에서는 싱글페이지가 아님 ssr 컴포넌트의 자식으누ssr, csr 가능path가 여러개여서 selecting해야함path를 selecting process 가 필요 → routing : next.js의 핵심기능Routing 종류명시적 라우팅 (react)<Route path=”/” component={<Home/>}/>코드기반 라우팅 (express)app.get(’/’, (req,res)⇒{ res.send() })데코레이터 기반 라우팅 (nest.js)@controller(’user’)...
useInfiniteQuery페이지단위로 데이트를 가져오고 다음페이지가 있는지 판단해서 fetchNextPage()로 이어받는 훅 const { data, // 페이지별로 배열을 담음 data.pages[0], data.pages[1] isLoading, //페이지 로딩여부...
정의브라우저가 픽셀을 실제로 그리는 단계HTML dom생성→ CSSom 트리 생성 → Render Tree 그리기 → Layout 계산 (위치, 크기) → Paint 실제로 그리기 → Composite (레이어 합성)Reflow요소의 크기, 위치가 바뀌어서 브라우저가 레이아웃을 다시 계산하는것비용이 큼, 성능 부담Repaint레이아웃은 그대로두고 시각적인 부분만 다시그리는것reflow보다 가벼움Repaint를 고려한 애니메이션Layout 을 다시 계산해서 전단계로 가는 애니메이션transform으로 위치를 옮기지않고 top, left를 다시 지정CSS 속성별 영향 범위Layout, Paint 발생width, height, top, left, margin, padding, font-sizePaint발생background, color, box-shadow, border-radiusComposite발생tranform, opacity—> 애니메이션은 이 두개로 쓰는게 좋음브라우저에서 Paint확인개발자도구 → 도구 더보기 → 랜더링 → paint flashing체크 → 초록색 박스 확인Composite합성페인트까지 끝난 여러 레이어를 GPU에서 하나의 화면으로 합치는 단계어디에 어떻게 겹쳐서 보여줄지 결정하는 단계will-change : transform ←—- 이 요소 transform 바뀔거라고 미리 명시Reflow, Repaint 고려한 최적화 방법style변경은 한번에el.style.width = "100px"; el.style.height = "100px"; el.style.margin = "10px";...
토큰 기반 인증방식json포맷의 데이터를 인코딩한 토큰구성요소Header어떤 알고리즘으로 암호화할지Payload토큰에 담을 유저정보Signatureheader와 payload를 비밀키로 서명한 값 ←— 서버는 이값을 통해서 변조되었는지 판단주의payload는 암호화가 아니라서 중요한 정보를 절대 넣으면 안됨httpOnly Cookie보안목적으로 xss공격방지용으로 만들어진 쿠키브라우저에서 html, javascript로 읽을수 없는 쿠키서버에서 자동으로 저장됨
HTTP브라우저와 서버가 통신하는 규약클라이언트(브라우저)가 url로 서버에게 request, 서버가 클라이언트에 responseRequestMethod (GET/POST/PUT/DELETE)Header (Content-Type, Authorization, Cookie 등)Body (JSON, FormData…)ResponseStatus Code (200, 404, 500…)HeaderBody (HTML, JSON, 이미지 등)HTTPShttp를 더 안전하게 쓰기위함데이터를 암호화했기때문에 패킷을 가로채면 볼수있음
XSScross site scripting웹사이트에 스크립트 추가해서 사용자의 브라우저에서 실행되는 공격게시판 글 등록하는 영역에 스크립트를 추가 하는 경우URL에 스크립트를 추가방어htmlspecialchars DOMPurify로 이스케이프 ( < → < & → & )특정 태그만 허용dompurify 라이브러리 (안전한 html만 남겨주는 라이브러리)CSRFcross site request forgery로그인된 쿠키를 이용해서 서버에 요청을 보내는 공격자동으로 쿠키가 헤더에 붙기때문에 악용다른사이트에 들어갔는데 쿠키가 저장되어있는 사이트의 쿠키를 사용하여서 송금방어CSRF 토큰을 서버에서 보내서 input hidden에 저장하고 서버에서 비교SameSite쿠키 설정
Browser Processrenderer, gpu, plugin을 관리url 파싱,UI관리, 탭 프로세스관리, 네트워크 요청 관리보안 권한관리(localstorage, cookie)Renderer Process웹페이지 하나를 실제로 실행하는 프로세스 dom tree, csssom 생성render tree 생성reflow, paint, js실행브라우저 탭 하나당 renderer process 하나가 실행됨 → 하나가 응답이 없더라도 다른탭은 작동api 네트워크 접근은 하지않음Plugin Processplugin을 별도의 process로 격리pdf, flash 별도 처리Widevine 와이드바인 (넷플릭스같은 영상스트리밍서비스)GPU Processrenderer process 와는 다르게 탭마다 하나씩이 아닌 모든 탭의 그래픽 작업 담당layer 합성 compositetransform, opacity 등 paint작업
react api 사용rendering work → chunk 로 split이 됨기준 ) route segment, suspense boundary서버에서 일어나는 일1. react가 server component 를 rsc payload 로 만들어줌RSC Payload 구성요소server component render된 결과물 ,client component 빈자리위치 , client component javascript 위치client component 의 props2. RSC payload + client component javascript 활용해서 html 랜더Client 에서 일어나는 일3. Html 즉시 보여줌 (preview)4. RSC payload reconcile 단계client, server component tree 를 재조정client component 빈자리위치에 자리채움실제 dom을 update5. hydrate 단계인터렉션 가능하게함javascript
FCPfirst Contentful Paint브라우저가 처음으로 화면에 그린 시점1.8초 이하 좋음1.8초~3초 보통LCPlargest Contentful Paint가장 큰 컨텐츠가 완전히 보이는 시점2.5초 이하 좋음2.5초~4초 보통
1. URL 입력 I/O2. HTML 을 받고 메모리에 저장 (RAM)3. HTML, CSS 파싱 (CPU)dom 트리 생성css 파싱 → cssom 생성render tree 생성 (dom tree + csssom)Reflow (CPU)cpu가 width, height, 부모자식관계 등을 다 계산함 → 무거움Paint (CPU)색칠, 그림자, border 등 비트맵 생성 (아직 화면에 그리는것은 아님)Composite (GPU)layer 합성transform, opacity 처리reflow 보다 무겁지않음4. 화면출력 I/O