[NEXTJS] 인트로

NEXT JS란?

• 웹 어플리케이션을 만들기 위한 빌딩 블록을 제공하는 유연한 리액트 프레임워크

웹 어플리케이션의 빌딩 블록이란?

- UI : 유저가 어플리케이션을 소비하고, 상호작용한다.
- Routing : 어플리케이션의 파트들을 돌아다닌다.
- Data Fetching : 데이터가 어디에 있는지, 어떻게 얻어오는지
- Rendering : 정적 또는 동적 컨텐츠를 어디서 그리고 언제 띄울지
- Integrations : 어떤 써드파티 서비스(CMS, auth, payments 등)를 사용하고, 어떻게 연결할지
- Performance : 어떻게 조단 사용자를 위한 어플리케이션을 최적화할지
- Scalability : 프로젝트 크기가 증가하면 어떻게 어플리케이션을 그에 맞게 조정할 것인가
- Developer Experience : 어플리케이션을 유지하고, 만드는 팀의 경험

React란?

• 상호작용을 하는 UI를 만들기위한 자바스크립트 라이브러리
• 
• 리액트라는 라이브러리를 통해 UI를 만들기 위한 유용한 기능을 사용할 수 있다.
  • 하지만, 라이브러리는 이런 기능을 어플리케이션의 어디에서 적용할지를 개발자에게 맡긴다.
• 리액트의 성공은 어플리케이션 빌딩의 다른 측면에 대해서는 상대적으로 유연하다는 것이다.
• 이로인해 써드파티 툴과 솔루션으로 생태계가 번성하고 있다.
• 하지만, 이로인해 리액트만으로 완전한 어플리케이션을 만드는 것은 많은 노력이 따른다.

Next.js란?

• Next.js라는 프레임워크를 통해 리액트에 필요한 도구와 설정을 다룰 수 있고, 어플리케이션을 위한 추가적인 구조, 특성, 최적화를 할 수 있다.

자바스크립트에서 리액트로 넘어가기

DOM이란

• 유저가 웹사이트를 방문하면 서버는 HTML파일을 브라우저에 주게된다.

• 브라우저는 이 HTML파일을 읽어 Document Object Model(DOM)을 구성한다.

• DOM은 코드와 UI를 잇는 다리의 역할을 한다.
• 부모-자식 관계를 이용한 트리구조를 가진다.
• DOM 메서드와 자바스크립트로 UI에서 발생하는 유저 이벤트, 돔 조작 등을 할 수 있다.

Imperative vs Declarative 프로그래밍

• UI의 업데이트를 하나하나 세세히 코드로 구현하는 것을 Imperative 프로그래밍이라고한다.
  • 

• 프로젝트의 크기가 커지면 커질수록 이런식으로 프로그래밍하는 것은 굉장히 어려워지는데, Declarative 프로그래밍은 보여주고싶은 것을 선언할 수 있게해준다.

• 리액트는 Declarative UI library로써, 개발자는 리액트에게 UI에 변화가 생긴다고 말하면 리액트는 어떻게 DOM을 업데이트할지 결정한다.