Видео

RSC (React Server Component)는 React 18 버전에서 추가된 기능으로, React의 CSR (Client-Side Rendering) 방식의 한계를 극복하기 위해 등장했습니다. 기존의 CSR 방식에서는 JavaScript 파일의 크기가 커지면 사용자가 빈 화면을 보는 시간이 길어져 사용자 경험이 저하되는 문제가 있었습니다. 이를 해결하기 위해 SSR (Server-Side Rendering) 방식이 등장했으며, Next.js는 getServerSideProps를 사용해 SSR을 구현합니다. React 서버 컴포넌트의 특징 및 동작 방식 서버 컴포넌트는 서버에서 한 번 렌더링된 후 클라이언트에 전달됩니다. 라우터 변경이 없는 경우 재렌더링되지 않습니다. 데이터베이스 조회, 파일 ...

"Performance Insights"는 Chrome 버전 102에서 개발자 도구에 추가된 실험적 기능입니다. 이 기능은 개발자들에게 웹사이트의 성능을 분석하고 최적화하는 데 도움을 주는 정보를 제공합니다. 특히, 사용 사례 기반 분석을 지원하는데, 이는 웹사이트의 성능 문제를 진단하고 해결하는 과정에서 특정 사용 사례(예: 페이지 로드)에 초점을 맞추는 접근 방식을 의미합니다. 사용 방법 개발자 도구에서 Performance Insights를 선택합니다. 없으면 More tools에서 Performance Insights를 찾습니다. 빨간색 녹화 버튼을 이용해 성능을 기록할 수 있으며, 네트워크와 CPU를 제한하여 기록하는 것도 가능합니다. 분석 영역 파란색 영역: 페이지의 측정 결과를 보여줍니다....

CDN(Content Delivery Network)은 전 세계 사용자에게 빠르고 안전하게 컨텐츠를 전송하는 기술입니다. 이는 지리적 위치에 관계없이 콘텐츠 접근성을 향상시키기 위해 사용됩니다. 요약: 1. 오리진 서버(Origin Server) : 원본 데이터가 저장되는 서버로, 새로운 또는 변경된 콘텐츠를 제공합니다. 2. 캐시 서버(Cache Server) : 오리진 서버에서 콘텐츠를 복사하여 저장합니다. 이는 사용자와의 거리를 줄이고 로딩 시간을 단축시킵니다. 3. 지리적 분산 : 예를 들어, 미국의 오리진 서버와 일본의 캐시 서버가 있을 때, 한국 사용자는 일본 서버에서 더 빠르게 콘텐츠를 받아볼 수 있습니다. 4. CDN의 목적 : 사용자에게 빠르게 콘텐츠를 제공하기 위해 전 세계에 서버를 ...

SSR(Server-Side Rendering)의 한계: SSR 시 디바이스의 크기를 미리 알 수 없어, 브라우저는 초기에 PC버전 또는 Mobile버전으로 렌더링할지 결정할 수 없습니다. 초기 화면 렌더링: 클라이언트에서 JavaScript를 통해 디바이스 크기를 판단할 때까지, 화면의 투명도를 0으로 설정하여 시각적으로 숨깁니다. 이는 body 태그에 opacity: 0을 적용하여 구현합니다. SEO 최적화: HTML 내용은 그대로 유지되어 검색엔진이 정상적으로 내용을 크롤링할 수 있습니다. 디바이스 크기 판단 후 렌더링: 디바이스 크기가 결정되면 투명도를 1로 복구하여 화면을 깔끔하게 렌더링합니다. 구현 이유: 모바일 UI가 잠시 보였다가 PC UI로 변경되는 등의 화면 깜빡임을 방지하기 위함입니...

이 코드는 Firebase Storage를 사용하여 이미지를 업로드하고 업로드 된 이미지의 다운로드 URL을 얻는 React 커스텀 훅을 나타냅니다. 코드를 간단하게 설명하겠습니다. 1. useState 를 사용하여 파일 업로드, 미리보기 URL, 다운로드 URL, 그리고 진행률을 관리하는 상태 변수들을 초기화합니다. 2. handleFileOnChange : 파일 입력(input)에서 이미지를 선택하면 호출되는 이벤트 핸들러입니다. 선택한 파일을 가져와서 미리보기를 위한 Data URL을 생성한 다음, Firebase Storage에 업로드합니다. 3. saveToFirebaseStorage : Firebase Storage에 이미지를 업로드하는 함수입니다. 업로드된 이미지는 현재 시간을 기반으로 고...

이 영상은 React 애니메이션의 개발 방법과 물리 법칙을 기반으로 한 애니메이션 라이브러리인 `react-spring`을 사용하는 방법을 설명합니다. 아래는 영상의 내용을 간략히 요약한 것입니다: 기존의 시간 기반 애니메이션 단점: - 기존의 애니메이션은 시간 기반으로 작동하며, 각 애니메이션 상태를 수동으로 설정해야 합니다. - 디테일한 애니메이션을 표현하기 좋지만, 프레임이 빈 곳에서 끊김 현상이 발생하며, 개발자의 작업량이 증가할 수 있습니다. 물리 법칙 기반 애니메이션: - 물리 법칙 기반 애니메이션은 시간이 아닌 물리적 원리를 기반으로 하며, 현실감 있는 애니메이션을 구현하는 데 도움이 됩니다. - 애니메이션을 더 쉽게 구현할 수 있게 됩니다. React 라이브러리 `react-spring`...

발생한 오류는 M1 맥에서 yarn install 명령어를 실행할 때, sharp 라이브러리의 버전 8.10.0이 M1 아키텍처와 호환되지 않아 발생한 것으로 확인되었습니다. 아래는 오류 메시지와 해결 방법 요약입니다. 에러 메시지 요약: - sharp 라이브러리가 libvips 8.10.0을 사용하고 있으며, 이 버전이 M1 아키텍처와 호환되지 않아 오류가 발생했습니다. 해결 방법 요약: 1. MacPorts를 설치합니다. 2. 필요한 종속성인 pkgconfig와 glib2를 MacPorts를 사용하여 설치합니다. 3. 필요한 이미지 형식에 따라 해당 라이브러리를 설치합니다. 4. libvips의 최신 릴리스를 다운로드하고 설치합니다. 5. libvips가 전역으로 설치되면, 프로젝트의 node_mo...

Excalidraw라는 시각화 도구를 사용하여 지식을 시각적으로 표현하고 옵시디언 노트 앱과 통합하는 방법에 관한 가이드입니다. Excalidraw은 지식을 시각적으로 표현하고 기억하기 위한 유용한 도구입니다. 옵시디언 노트 앱에서 Excalidraw 플러그인을 설치하여 사용할 수 있습니다. Excalidraw 플러그인을 설치하려면 옵시디언 환경설정에서 "커뮤니티 플러그인"을 선택하고 Excalidraw 플러그인을 검색하여 설치 및 활성화하면 됩니다. Excalidraw을 문서에 삽입하는 방법은 다음과 같습니다. ![[Drawing 파일 이름.excalidraw]]: 기본 Excalidraw 파일을 문서에 삽입합니다. ![[Drawing 파일 이름.excalidraw|가로 사이즈]]: 이미지의 가로 사...

Next.js 버전 13의 주요 업데이트 내용을 다음과 같이 요약할 수 있습니다: app Directory: 이전 버전에서는 pages 디렉토리를 사용했지만, 버전 13부터는 app 폴더 내의 pages 파일로 라우팅을 합니다. Routes: 버전 13에서는 page.js 파일이 필수이며, 모든 컴포넌트는 기본적으로 서버 컴포넌트로 간주됩니다. 클라이언트 컴포넌트를 사용하려면 use Client 지시문을 추가해야 합니다. Layouts: 여러 페이지에서 공유되는 UI를 위한 레이아웃 기능을 제공합니다. 이 레이아웃은 재렌더링 없이 중첩될 수 있으며, 루트 레이아웃은 html 및 body 태그를 정의해야 합니다. layout.tsx 파일은 서버 컴포넌트로 작동합니다. Streaming: 페이지의 일부를 ...

1. yarn dlx 개념 2. yarn 4버전 이상 이슈 3. yarn berry