본문 바로가기

Web25

Suspense를 사용하자 *react conf 2021 동영상을 참고했습니다. Suspense를 사용해야하는 이유 리액트는 데이터가 위에서 아래로 즉 단방향으로 흐르기때문에 서비스의 전반적인 흐름을 쉽게 이해 할 수 있습니다. 각 컴포넌트는 데이터를 가공하거나 사용하여 jsx를 반환합니다. 컴포넌트 내부에서도 코드의 흐름은 위에서 아래로 흐릅니다. 하지만 비동기적인 코드가 사용되면 그 흐름은 깨집니다. 코드를 건너 뛰어가며 보고 이해해야하기 때문입니다. // 비동기 코드가 들어간다면 function List({pageId})) { const [items, setItems] = useState(); // useEffect를 사용하여 fetch를 하게 되고 // fullfill 상태가 되면 state가 업데이트 되어 re-rende.. 2021. 12. 14.
Core Web Vitals Core Web Vital Web Vitals은 간단하게 말하자면 웹사이트에 대한 유저의 경험을 정량화 시킨 가이드라인이라고 할 수 있습니다. Core Web Vitals는 Web Vital의 부분 집합니다. 아래 세가지의 지표를 보여주는 역할을 합니다. Largest Contentful Paint (LCP) First Input Delay (FID) Cumulative Layout Shift (CLS) 위의 세개지 지표에서 좋은 점수를 받는다면 좋은 UX를 지닌 웹사이트라 평가될 수 있습니다. 좋은 점수를 받지 못한다면 Core Web Vitals 를 랭킹 지표로 사용하는는 구글에서는 좋은 랭킹을 받을 수 없습니다. Good, Needs Improvement, Poor Core Web Vital은 Go.. 2021. 12. 13.
Rendering 전략 Rendering 종류 Static Site Generation (SSG) HTML 파일을 빌드타임에 생성하는 pre-rendering 기술이다. 이렇게 미리 생성된 HTML 파일이 요청시 사용된다. 가장 많이 사용되는 방식이며 성능적으로 가장 좋다. Server-Side Rendering (SSR) SSG와 마찬가지로 pre-rendering 기술이지만 빌드타임에 생성되는 것이 아닌 요청시 생성된다. SSG와 비교하면 조금 느리지만 요청에 따라 달라질 수 있는 다이나믹한 페이지를 생성할때 필요하다. Incremental Static Regeneraion (ISR) 페이지의 갯수가 많다면 모든 페이지를 빌드타임에 생성하는것은 시간이 오래걸리고 효율적이지 못하다. ISR을 통해 원하는 만큼의 페이지를 빌드.. 2021. 12. 12.
Robots.tsx robots.txt 파일이 무엇인가요? 웹사이트의 정보를 수집하는 'search engine crawlers' 들에게 어떤 '페이지'나 '파일'을 허용/금지 하는지 알려주는 역할을 하는 web standard 파일입니다. 해당 파일은 host의 root에 위치해 있어야 합니다. (보통 public 폴더 안 root directory에 위치한다) robots.txt 파일 예시 //robots.txt # 모든 크롤러 /accounts 경로 접근 금지 User-agent: * Disallow: /accounts # 모든 크롤러에게 공개 (Default 값이며 사실상 명시하지 않아도 된다) User-agent: * Allow: / # 사이트 맵 Sitemap: Sitemap 웹사이트에서 사용하는 url을 가르키.. 2021. 12. 11.
Metadata Metadata 웹 사이트의 컨텐츠를 title, description, image의 추상적인 형태로 보여주는 데이터이다. Title 구글 크롤러가 페이지에 대한 분석을 할때 필요로 하는 중요한 SEO element중 하나이다. 키워드를 사용하면 검색엔진에서 좋은 랭킹을 받을 수 있다. iPhone 12 XS Max For Sale in Colorado - Big Discounts | Apple 해당 타이틀은 유저들이 궁금해하는 수 많은 키워드를 담고 있어 SEO 점수를 높게 받을 수 있는 타이틀이라고 할 수 있다. Description title만큼은 아니지만 중요한 SEO element 중 하나이다. 구글에 의하면 description 은 검색 랭킹에 영향을 주진 않지만 검색 결과에서 클릭률을 높일 .. 2021. 12. 11.
ECMAScript 2021 추가되는 기능들 소개 JavaScript의 스펙을 정의하는 ECMAScript는 모던 자바스크립트의 시작점이라고 불리는 2015년 이후 매해 6월에 Stage 4 단계에 도달한 새로운 기능들을 공식적으로 업데이트한다. 2021년에 업데이트되는 새로운 기능 6가지 String.prototype.replaceAll() Private Methods Promise.any Numeric separator Logical Assignment Operators WeakRefs and FinalizationRegistry 1. String.prototype.replaceAll() replaceAll() 메소드는 어떠한 패턴과 일치하는 모든 값을 replacement와 교체한 새로운 string을 반환한다. 여기서 replacement는 st.. 2021. 6. 14.
[WebRTC API] WebRTC 초보자 가이드 WebRTC 간단 소개 브라우저에서 오디오, 비디오와 같은 미디어 장치를 포착하여 타 브라우저에 스트림 할 수 있을 뿐만 아니라 데이터 통신도 지원하는 기술이다. 별도의 중개 서버 없이 peer to peer 데이터 공유와 화상 회의를 가능하게 한다. 상호 연관된 API와 프로토콜로 구성되어 작동한다. WebRTC API * WebRTC API에는 3가지 주요 구성 요소가 있으며 고유한 역할을 한다. 1. MediaStream (GetUserMedia) MediaStream API는 JavaScript 를 사용하여 카메라 및 마이크 장치에 접근 및 제어를 할 수 있는 방법을 제공한다. 2. RTCPeerConnection 참가자들이 중개 서버 없이 peer와 직접 연결을 생성할 수 있는 방법을 제공한다... 2021. 3. 30.
[STUDY] 커스텀 Hooks 자신만의 Hook를 만들면 컴포넌트 로직을 함수로 뽑아 재사용 할 수 있다. // 채팅 애플리케이션에서 친구가 온라인인지 아닌지에 대한 // 메시지를 표시하는 컴포넌트 import React, { useState, useEffect } from 'react'; function FriendStatus(props) { const [isOnline, setIsOnline] = useState(null); useEffect(() => { function handleStatusChange(status) { setIsOnline(status.isOnline); } ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange); return () => { .. 2021. 3. 27.
[STUDY] Hook의 규칙 Hook는 자바스크립트 함수이다. Hook를 사용할 때 두 가지 규칙을 준수해야 한다. 규칙들을 강제하기 위해 linter 플러그인을 제공하고 있다. 최상위(at the Top Level) 에서만 Hook를 호출해야 한다 반복문, 조건문, 중첩된 함수 내에서 Hook를 호출하면 안된다. 리액트 함수의 최상위 (at the top level) 에서 Hook를 호출해야 한다. 컴포넌트가 render 될 때마다 동일한 순서로 Hook가 호출되는 것을 보장한다. ( 여러번 호출되도 Hook의 상태를 올바르게 유지할 수 있게 해준다) ESLint 플러그인 eslint-plugin-react-hooks 라는 ESLint를 플러그인을 프로젝트에 추가할 수 있다. npm install eslint-plugin-reac.. 2021. 3. 23.

티스토리툴바