분류 전체보기30 Medium 블로그로 옮겼습니다. 티스토리 오랜만이네요. 저는 미디엄에서 활동합니다. https://medium.com/@wj2kim 2024. 5. 14. 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. 절전모드에서 돌아왔을때 크롬 프리징 현상 Window 10에서 chrome 웹 브라우저 이용 시 절전모드에서 돌아오면 브라우저가 프리징 될 때가 있다. 스크롤이 안 먹고 타이핑 및 버튼 클릭이 안된다. 프리징 된 화면을 제외한 테스크바나 탭을 누르면 다시 브라우저가 정상화된다. 알고 보니 Window 10에서 Chromium 기반 웹 브라우저 이용 시 생기는 버그였다. 해결방법 크롬은 현재 Chrome/플래그로 이 버그를 해결할 수 있는 방법을 제공한다. * Chrome/플래그란? 크롬이 추후 업데이트로 안정화 버전에 정식 출시하기 전, 미리 기능을 테스트해볼 수 있는 페이지. 1. 브라우저 주소창에 chrome://flags 치고 들어가기 2. 검색 창에서 occlusion 검색 3. Calculate window occlusion on Wi.. 2021. 3. 31. [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. 이전 1 2 3 4 다음
