<Next.js-TypeScript-React> - 1 기본 개요

Next.js 와 typeScript

Next.js 는 리액트의 기능성을 살리면서 리액트만으로는 다룰 수 없는 영역을 포함하는 실전적인 웹 프레임워크

TypeScript 는 자바스크립트에 정적 타입 기능 등을 탑재한 프로그래밍 언어이다.

 

SPA 의 등장과 SSR 그리고 CSR

서버 사이드 랜더링(SSR)과 클라이언트 사이드 랜더링(CSR)은 웹 애플리케이션을 렌더링하는 방법에 대한 차이점을 가지고 있습니다. 이를 이해하기 위해 먼저 SPA (Single Page Application)에 대해 설명하겠습니다.

SPA (Single Page Application):

SPA는 단일 페이지 애플리케이션으로, 초기에 모든 정적 리소스(HTML, CSS, JavaScript)를 한 번 로드한 후, 페이지 전환 시에 서버로부터 새로운 페이지를 받아오지 않고 클라이언트에서 JavaScript를 이용하여 동적으로 페이지를 업데이트하는 방식입니다. 즉, 첫 페이지 로딩 이후에는 서버와의 통신이 필요 없으며, 사용자 경험이 더욱 빠르고 부드러워집니다. React, Vue.js, Angular 등의 프론트엔드 프레임워크를 이용하여 SPA를 구현할 수 있습니다.

서버 사이드 랜더링 (SSR):

서버 사이드 랜더링은 클라이언트 요청에 대해 서버에서 초기 HTML을 생성하고, 이를 클라이언트에 전달하는 방식입니다. 사용자의 요청에 따라 서버가 페이지를 렌더링하여 HTML을 구성하므로, 브라우저에서 최초로 로딩하는 컨텐츠가 완성된 HTML을 바로 보여줄 수 있습니다. 이후 클라이언트 측에서 추가적인 JavaScript 파일이 로드되고, 페이지는 CSR 방식으로 동작합니다.

장점:

• 초기 렌더링이 완료된 HTML을 바로 보여주기 때문에 초기 로딩 속도가 빠릅니다.
• 검색 엔진 최적화(SEO)가 용이합니다. 검색 엔진은 렌더링된 HTML을 읽어 내용을 파악할 수 있으므로, 페이지의 검색 노출이 개선될 수 있습니다.

단점:

• 서버에 부하가 발생할 수 있습니다. 매 요청마다 서버에서 페이지를 렌더링해야 하므로 서버 자원이 많이 소모될 수 있습니다.
• 클라이언트 측 JavaScript가 로드되기 전까지 인터랙션이 제한될 수 있습니다.

클라이언트 사이드 랜더링 (CSR):

클라이언트 사이드 랜더링은 서버에서 초기 HTML을 보내는 것이 아니라, 비어있는 HTML 페이지와 함께 필요한 JavaScript 파일을 브라우저에 전달합니다. 브라우저에서 JavaScript 파일을 실행하고, 동적으로 컨텐츠를 생성하여 페이지를 구성합니다. 이 방식은 초기 로딩이 빠르고, 이후에는 페이지 전환이 부드러워 사용자 경험을 향상시킵니다.

장점:

• 초기 로딩 속도가 빠릅니다. 빈 페이지와 필요한 JavaScript 파일만 로드하면 되므로, 빠른 첫 인터랙션을 제공합니다.
• 서버에 부담이 줄어듭니다. 서버는 정적 파일만 제공하면 되므로, 동적인 처리가 필요하지 않습니다.

단점:

• 초기 빈 페이지를 보여주기 때문에 인터랙션이 바로 가능하지 않습니다. JavaScript 로딩 이후에 페이지가 동적으로 구성되기 때문에 일시적인 화면 깜박임이 발생할 수 있습니다.
• 검색 엔진 최적화가 어려울 수 있습니다. 검색 엔진이 JavaScript를 실행하지 않고 HTML만을 분석하기 때문에, SPA의 컨텐츠를 파악하기 어려울 수 있습니다.

서버 사이드 랜더링과 클라이언트 사이드 랜더링은 각각의 장단점을 가지고 있으며, 프로젝트의 특성과 요구사항에 따라 적절한 방식을 선택하는 것이 중요합니다. 또한 두 방식을 혼합하여 사용하는 것도 가능합니다. 예를 들어, 초기 페이지 로딩 시에 SSR로 첫 컨텐츠를 보여주고, 이후에는 CSR 방식으로 동작하도록 구현할 수 있습니다. 이를 통해 초기 렌더링 성능과 사용자 경험을 최적화할 수 있습니다.

 

 

인터렉션이란??

인터랙션이란 두 개 이상의 요소가 서로 작용하고 영향을 주며, 서로에게서 응답을 받는 것을 말합니다. 웹 디자인이나 애플리케이션 개발에서 인터랙션은 사용자와 상호작용하는 요소들을 가리킵니다. 이를 통해 사용자는 웹페이지나 앱을 더 쉽게 이해하고 조작할 수 있습니다.

인터랙션의 예시:

1. 버튼 클릭: 사용자가 버튼을 클릭하여 어떤 동작을 실행하도록 할 수 있습니다. 예를 들어, "확인" 버튼을 누르면 어떤 액션이 실행되거나, "닫기" 버튼을 누르면 모달창이 닫히는 등의 인터랙션입니다.
2. 입력 폼: 사용자가 텍스트를 입력하는 입력 폼에서 인터랙션을 사용할 수 있습니다. 사용자가 텍스트를 입력하고 엔터키를 누르거나 "제출" 버튼을 클릭하면 해당 정보가 서버로 전송되는 등의 동작이 발생합니다.
3. 드래그 앤 드롭: 사용자가 요소를 클릭하여 드래그하고 다른 위치로 끌어다 놓을 때 인터랙션을 구현할 수 있습니다. 이를 통해 정렬이나 파일 업로드 등을 쉽게 할 수 있습니다.
4. 마우스 호버: 사용자가 마우스를 요소 위로 올리면 해당 요소에 대한 효과가 발생하는 인터랙션입니다. 예를 들어, 메뉴에 마우스를 올리면 하위 메뉴가 나타나거나 이미지에 마우스를 올리면 확대 효과가 발생하는 등입니다.
5. 애니메이션: 움직이는 요소나 변화하는 요소를 이용하여 사용자와의 인터랙션을 구현할 수 있습니다. 페이지 로딩 시에 로딩 바가 나타나는 등의 애니메이션을 사용하여 사용자에게 시각적 피드백을 제공할 수 있습니다.

인터랙션은 사용자 경험(UX)을 개선하는데 중요한 역할을 합니다. 적절한 인터랙션은 사용자가 애플리케이션을 쉽게 사용하고 이해하는데 도움을 주며, 만족스러운 사용자 경험을 제공할 수 있습니다. 따라서 디자인과 개발 단계에서 인터랙션을 고려하여 사용자 중심의 웹사이트나 애플리케이션을 만드는 것이 중요합니다.

TypeScript 

MS 가 중심이 되어 개발을 추진하고 있는 오픈 소스 프로그래밍 언어

타입을 정의하여 컴파일 과정에서 에러를 찾아 낼 수 있다.