[next.js] next.js 정의,명령형 프로그래밍과 선언형 프로그래밍

Next.js

 

Next.js의 정의

Next.js는 빠른 웹 애플리케이션을 만들기 위한 빌딩 블록을 제공하는 유연한 React 프레임워크 입니다 .

웹 애플리케이션의 빌딩 블록

최신 애플리케이션을 구축할 때 고려해야 할 몇 가지 사항이 있습니다. 와 같은:

• 사용자 인터페이스 - 사용자가 애플리케이션을 소비하고 상호 작용하는 방법.
• 라우팅 - 사용자가 애플리케이션의 여러 부분 사이를 탐색하는 방법입니다.
• 데이터 가져오기 - 데이터가 있는 위치와 데이터를 가져오는 방법.
• 렌더링 - 정적 또는 동적 콘텐츠를 렌더링하는 시기와 위치.
• 통합 - 귀하가 사용하는 제3자 서비스(CMS, 인증, 결제 등) 및 연결 방법.
• 인프라 - 애플리케이션 코드(서버리스, CDN, Edge 등)를 배포, 저장 및 실행하는 곳입니다.
• 성능 - 최종 사용자를 위해 애플리케이션을 최적화하는 방법.
• 확장성 - 팀, 데이터 및 트래픽이 증가함에 따라 애플리케이션이 적응하는 방식입니다.
• 개발자 경험 - 애플리케이션 구축 및 유지 관리 팀의 경험입니다.

애플리케이션의 각 부분에 대해 솔루션을 직접 구축할지 아니면 라이브러리 및 프레임워크와 같은 다른 도구를 사용할지 결정해야 합니다.

 

 

React

 

React 는 대화형 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리 입니다 .

사용자 인터페이스란 사용자가 화면에서 보고 상호 작용하는 요소를 의미합니다.

 

1. 명령형 프로그래밍과 선언형 프로그래밍

명령형 프로그래밍의 예시

"반죽을 짜고, 돌돌 말아 토마토 소스를 넣고, 치즈를 넣고, 햄을 넣고, 
파인애플을 넣고, 섭씨 200도로 예열된 돌가마에 구워..."

선언적 프로그래밍의 예시

"파인애플 피자 주문이요"

사용자 인터페이스를 업데이트하는 방법 에 대한 단계를 작성하고 있습니다 . 그러나 사용자 인터페이스를 구축할 때 개발 프로세스 속도를 높일 수 있기 때문에 선언적 접근 방식이 선호되는 경우가 많습니다. DOM 메서드를 작성하는 대신 개발자가 표시하려는 내용 (이 경우 h1일부 텍스트가 포함된 태그)을 선언할 수 있다면 도움이 될 것입니다.

즉, 명령형 프로그래밍은 요리사에게 피자 만드는 방법에 대한 단계별 지침을 제공하는 것과 같습니다. 선언적 프로그래밍은 피자를 만드는 데 걸리는 단계에 대해 걱정하지 않고 피자를 주문하는 것과 같습니다. 🍕

개발자가 사용자 인터페이스를 구축하는 데 도움이 되는 널리 사용되는 선언적 라이브러리는 React 입니다 .

 

 

2. props와 state

props는 구성 요소에 전달되는 읽기 전용 정보

state는 시간에 지남에 따라 변경 가능,

사용자 상호 작용에 의한 트리거 가능.

 

 

 

 Next.js에 적용되는 방식

Next.js는 애플리케이션의 개발 및 생산 단계 모두에 대한 기능을 제공합니다. 예를 들어:

• 개발 단계에서 Next.js는 개발자와 애플리케이션 구축 경험을 최적화합니다. TypeScript  및  ESLint 통합 ,  빠른 새로 고침 등과 같은 개발자 경험을 개선하기 위한 기능이 함께 제공됩니다 .
• 프로덕션 단계에서 Next.js는 최종 사용자와 애플리케이션 사용 경험을 최적화합니다. 성능과 접근성을 높이기 위해 코드를 변환하는 것을 목표로 합니다.

환경마다 고려 사항과 목표가 다르기 때문에 응용 프로그램을 개발에서 프로덕션으로 이동하려면 수행해야 할 작업이 많습니다. 예를 들어 애플리케이션 코드는 컴파일 , 번들 , 축소 및 코드 분할이 필요합니다 .