Project12 [Next.js] Next.js의 클라이언트, 서버 컴포넌트 / 렌더링 전략 / Time 클라이언트 / 서버 컴포넌트의 동작 방식 Next.js 어플리케이션에서 페이지를 요청받게 되면, 해당 페이지를 서버에서 렌더링 합니다. 일반적으로 페이지는 클라이언드, 서버 컴포넌트로 이루어져 있으며 각 컴포넌트들은 서버에서 pre-rendering 된 후에 브라우저로 보내집니다. 서버 컴포넌트의 경우 서버에서 모든 코드가 실행된 후 반환된 HTML이 클라이언트로 전송됩니다. 이 컴포넌트는 일반적으로 초기 페이지 로딩 시에 사용되고, 데이터를 가져오거나 SEO(Search Engine Optimization)를 위해 사용됩니다. 클라이언트 컴포넌트도 마찬가지로 서버에서 초기 HTML을 생성하는데, HTML과 함께 브라우저에서 실행될 JS 파일(ex. 사용자 인터렉션)도 생성해서 클라이언트로 전송합니다. .. 2024. 1. 28. [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. [Next.js] Next.js 14 기초 기본 용어 메타데이터(metadata) Next.js는 메타데이터(metadata)로 HTML에서 사용하던 `head` 엘리먼트를 대신합니다. Next.js에서 폴더와 파일의 역할 폴더는 경로를 정의하는 데 사용됩니다. 경로는 루트 폴더(root folder)부터, `page.js` 파일이 포함된 최종 리프 폴더(leaf folder)까지 파일 시스템 계층 구조를 따라가는 중첩된 폴더(nested folder)의 단일 경로입니다. 파일은 경로 세그먼트에 표시되는 UI를 만드는 데 사용됩니다. Next.js에서 서버 컴포넌트를 먼저 렌더링(pre rendering)하여 HTML로 클라이언트에 전송합니다. SPA를 하기 위해 필요한 코드는 따로 js파일을 생성하여 브라우저에 전송합니다.(ex. Link 컴포.. 2024. 1. 4. [React] 프론트엔드 테스트와 의존성 분리 프론트엔드와 테스트 대부분 웹 프론트엔드 개발자들은 테스트 코드의 중요성에 대해서 어렴풋이 알고는 있다고 생각합니다. 다만, 아래와 같은 이야기들로 테스트 코드 관련 담론을 무마하는 경향이 있는 것 같습니다. 프론트엔드는 코드 변경이 빈번하다던데, 웹 프론트엔드에서 굳이 테스트 코드를 짜야하나? (반박) 테스트 코드를 작성하면 변경사항이 기존 기능에 영향을 미치는지 빠르게 확인할 수 있다. (반박) 코드 변경에 따른 예상치 못한 버그를 사전에 방지할 수 있다. 프론트엔드 개발자가 직접 UI를 확인하면서 개발할텐데 테스트 코드를 굳이 작성할 필요는 없지 않나? (반박) 프론트엔드 개발자의 수동 테스트도 중요하지만, 테스트 코드는 자동화된 테스트를 통해 일관된 품질을 유지하는 데 도움이 된다. (반박) 수동.. 2023. 11. 29. 이전 1 2 3 다음
