🌞 2/1 내배캠 React 67일차 [Next.js]

Next.js

 

Next.js는 웹 개발자에게 필요한 다양한 기능을 제공해주는 리액트 프레임워크이다.

 

특징

• 개발 환경 설정이 쉽고 간단하다.
• SEO(Search Engine Optimization)을 위한 SSR(Server-Side rendering)을 지원한다.
• 초기 로딩 속도 개선을 위한 자동 code splitting(코드 분할)을 지원한다.

npx create-next-app
npx create-next-app 폴더이름 --typescript    // typescript를 쓰고싶을 때
npx create-next-app 폴더이름 --use-npm --typescript //npm을 최신화하고 typescript를 쓰고싶을 때

Library와 Framework의 차이

중요한 차이점 : Inversion of Control : 통제의 역전

library에서 메서드를 호출하면 사용자가 제어할 수 있다.

framework에서는 제어가 역전되어 프레임 워크가 사용자를 호출한다.

 

Library : 사용자가 파일 이름이나 구조 등을 정하고, 모든 결정을 내림

= 개발자가 어떤 프로그램을 가져다 쓰는 것(ex React.js: 랜더링할때 ReactDom.render()를 불러와서 사용한다.)

 

Framework : 파일이름이나 구조 등을 정해진 규칙에 따라 만들고 따름

=  개발자의 코드를 프로그램이 불러오는 것 (ex Next.js : 정해진 규칙에 따라 코드를 작성하면 랜더링 된다.)

 

 

-> 이게 왜 중요하냐?

Next.js는 프레임워크이기 때문에 조금 더 편리한 개발환경을 만들 수 있다. 

프레임 워크를 이해해야 사용하기에 용의하다.

 

Pages 폴더

폴더 안에 있는 파일명에 따라서 route가 결정된다. -> router.js가 필요없어진다.

 

pages/about.js 파일 생성 

-> localhost:3000/about(0) 해당 페이지로 이동가능 파일명이 주소가 된다.

다만, index.js는 예외사항으로 고정적인 시작 파일이라고 볼 수 있다.

localhost:3000/   (0)  -> index.js 안에 있는 파일 실행

localhost:3000/index (X)   -> 에러

 

이러한 소스코드 보는 법

option+command+u

 

 

벌써 시간이 2월이 되었다. 프로그램 막바지로 가고있지만 아직 실력이 너무너무 부족하다고 느끼는 날이 많다 ㅠㅠ

오늘 매니저님이 마지막이 다가오고 있는데 마지막에 열심히 해서 뿌듯할지 후회할지 아직 시간 있으니까 후회하지 말고 열심히 하자는 말에 더욱 동기부여 받고 힘을 내본다. 🔥