NextJS란? 설치하고 알아보기

React ?

• Facebook 에서 만든 Javascript 사용자 인터페이스 라이브러리

개발된 이유

초기에는 Web 개발을 위한 프론트엔드 라이브러리로 DOM조작을 쉽게 해주는 jQuery 라이브러리가 주로 사용되었다.
그러나, 이에 한계를 느낀 개발자들이 컴포넌트 기반 UI 개발을 지원하는 라이브러리가 개발하였다. 대표적으로는 Angular, React, Vue 가 있다.

React 를 사용하는 이유

• 리액트는 자바스크립트 기반의 문법을 사용하기 때문에 자바스크립트에 익숙하다면 보다 쉽게 사용이 가능하다.

특징

1. 가상 DOM(Virtual DOM)
   리액트는 브라우저가 관리하는 실제 DOM이 아닌 가상 DOM을 사용하여 UI 업데이트를 처리한다.
2. 단방향 데이터 흐름
   데이터의 흐름을 단방향으로 유지한다. -> 장점을 아직 이해 못하겠음
3. 컴포넌트 기반 아키텍처
   특정 기능을 수행하는 독립적인 컴포넌트를 이용하여 작은 레고블록으로 큰 건물을 만들어가는 구조이다.

Next.JS

Next.js is a React framework for building full-stack web applications. You use React Components to build user interfaces, and Next.js for additional features and optimizations.

리액트를 위해 만들어진 웹 프레임 워크
참고: https://nextjs.org/docs

Next.js install

1. NodeJS download
   https://nodejs.org/en

2. install

   npx create-next-app@latest
   
   What is your project named? my-app
   Would you like to use TypeScript? No / Yes
   Would you like to use ESLint? No / Yes
   Would you like to use Tailwind CSS? No / Yes
   Would you like your code inside a src/ directory? No / Yes
   Would you like to use App Router? (recommended) No / Yes
   Would you like to use Turbopack for next dev? No / Yes
   Would you like to customize the import alias (@/* by default)? No / Yes
   What import alias would you like configured? @/*

Taliwand CSS

Utility-First를 지향하는 CSS 프레임워크

Turbopack

Rust로 개발된 번들러인 Turbo를 기반으로 하는 차세대 자바스크립트 모듈 번들러

customize the import alias

위에 커스터마이징은 우선 안하는걸로

Directory

Top-level folders

1. app: App Router
2. pages: Pages Router (사용 안함)
3. public: Static assets to be served
4. src: Optional application source folder(사용 안함)

Top-level files

1. next.config.js: Configuration file for Next.js(컨피그 파일)
2. package.json: Project dependencies and scripts(라이브러리 의존성)
3. instrumentation.ts: OpenTelemetry and Instrumentation file
4. middleware.ts: Next.js request middleware
5. .env Environment variables

• .env.local Local environment variables
• .env.production Production environment variables
• .env.development Development environment variables

6. .eslintrc.json: Configuration file for ESLint(ESLint 설정파일)
7. .gitignore: Git files and folders to ignore
8. next-env.d.ts: TypeScript declaration file for Next.js
9. tsconfig.json: Configuration file for TypeScript
10. jsconfig.json: Configuration file for JavaScript(사용 안함)

'app' Routing Conventions

conventions

프레임워크 vs. 라이브러리

프레임워크는 개발을 위한 기본 구조 및 규칙을 제공하여 애플리케이션의 흐름과 제어를 관리하는 도구이다.
반면에, 라이브러리는 개발을 진행하면서 재사용이 가능하도록 한 코드의 집합이라고 볼 수 있으며, 개발자가 필요한 기능을 호출하여 사용한다.
정리하면, 제어의 주체에 따라 두 정의를 비교할 수 있다.