전체 글36 [네트워크] CSR, SSR CSR (Client Side Rendering) CSR은 사용자의 브라우저, 즉 클라이언트 사이드에서 모든 렌더링이 이루어지는 방식입니다. HTML 파일이 존재하지만 일반적으로 이 HTML 파일에는 id를 가지는 하나의 HTML 엘리먼트를 가지고 있고, 이 HTML 엘리먼트를 기준으로 생성된 JS 파일들이 브라우저로 전송된 이후에 렌더링이 일어나게 됩니다. 대부분의 로직이 클라이언트 측에서 처리되기 때문에 서버의 부담이 줄어드는 장점이 있습니다. 대표적인 라이브러리/프레임워크로 React, Vue, Angular와 같은 것들이 있습니다. 장점 풍부한 인터렉션 CSR은 동적인 사용자 경험을 제공하기에 적합합니다. 페이지 전환 없이 UI를 업데이트할 수 있다는 장점이 있습니다. 서버 부하 감소 초기 로드 .. 2024. 2. 4. [Next.js] Next.js의 클라이언트, 서버 컴포넌트 / 렌더링 전략 / Time 클라이언트 / 서버 컴포넌트의 동작 방식 Next.js 어플리케이션에서 페이지를 요청받게 되면, 해당 페이지를 서버에서 렌더링 합니다. 일반적으로 페이지는 클라이언드, 서버 컴포넌트로 이루어져 있으며 각 컴포넌트들은 서버에서 pre-rendering 된 후에 브라우저로 보내집니다. 서버 컴포넌트의 경우 서버에서 모든 코드가 실행된 후 반환된 HTML이 클라이언트로 전송됩니다. 이 컴포넌트는 일반적으로 초기 페이지 로딩 시에 사용되고, 데이터를 가져오거나 SEO(Search Engine Optimization)를 위해 사용됩니다. 클라이언트 컴포넌트도 마찬가지로 서버에서 초기 HTML을 생성하는데, HTML과 함께 브라우저에서 실행될 JS 파일(ex. 사용자 인터렉션)도 생성해서 클라이언트로 전송합니다. .. 2024. 1. 28. [CSS & TailwindCSS] cheat sheet 기억해두어야 할 용어 정리 @media (min-width: ___px) & @media (max-width: ___px) min-width를 이해하고 기억하는 데 도움이 되는 방법으로는 "최소한 ~일 때까지" 라는 개념으로 기억하는 것입니다. 즉, min-width는 "화면의 너비가 최소한 이 값일 때 까지" 적용되는 스타일 규칙을 정의합니다. min-width: 600px이라고 하면, 화면의 너비가 최소한 600px이 될 때까지 적용되는 스타일이라고 기억하면 됩니다. 화면의 너비가 600px을 넘어가는 순간부터 미디어 쿼리의 스타일이 적용되기 시작합니다. max-width는 반대로 기억하면 됩니다. max-width를 기억하는 방법은 "최대한 ~일 때까지" 라는 개념으로 기억하는 것입니다. 즉, ma.. 2024. 1. 22. [Next.js] OAuth 인증 매커니즘 사전 지식 OAuth (Open Authorization) 2.0 OAuth는 인터넷 사용자가 웹사이트나 어플리케이션에 특정 정보를 제공할 수 있게 해주는 표준 인증 프로토콜입니다. 이 프로토콜은 사용자가 자신의 정보를 공유하는 데 있어 별도의 로그인 정보를 제공하지 않고도 서비스 제공업체(ex. Google, GitHub, Facebook, etc.)를 통해 안전하게 인증할 수 있도록 해줍니다. (OAuth 2.0은 기존 OAuth 1.0 프로토콜을 대체하는 프로토콜입니다.) OAuth 2.0 프로토콜은 사용자의 자격 증명을 직접 공개하지 않으면서 안전하게 서드파티 어플리케이션에 리소스 접근 권한을 제공해줍니다. OAuth 매커니즘 1. 권한 요청 (Authorization Request) 클라이언트 .. 2024. 1. 15. 이전 1 2 3 4 5 6 7 8 9 다음
