next.js

정말 은인이신 분과 프로젝트를 하다가 백단은 어느정도 완성했기 때문에 프론트쪽을 만들어보기로 했다 사용할 언어는 next.js다 처음 들어봤다 공부를 해본다

Next.js

따로 설정이 필요없이 SSR, SEO부터 TypeScript까지 생산에 필요한 많은 기능들을 제공해주는 강력한 React 프레임워크  

ssr 방식을 사용하지만 SPA가 가능하다

처음 사용자가 server에 페이지 접속을 요청하면 SSR 방식으로 HTML을 보내줘서 SEO에 유리하고

이후 사용자와 페이지가 상호작용 할 때는 CSR방식으로 빠르게 화면 전환이 가능하여 SPA의 장점조 포함한다

HMR(Hot Module Replacement)을 지원하는 Webpack 기반 환경과 커스터마이징

HMR은 브라우저를 새로 고치지 않아도 Webpack으로 빌드한 결과물이 웹 애플리케이션에 실시간으로 반영될 수 있게 도와주는 설정을 말한다

HMR은 Webpack이 제공하는 유용한 기능 중 하나라고 할 수 있다. 새로고침을 하지 않아도 모든 종류의 Module을 Runtime시점에 업데이트시켜준다. 이 기능을 활용하기 위해선 webpack-dev-server 구성을 업데이트하고, Webpack에 내장된 HMR 플러그인을 적용해주면 된다.(다른 플러그인도 적용할 수 있다)

이렇게 HMR을 적용하게 되면, 코드를 저장할 때마다 페이지가 실시간으로 반영되기 때문에 생산성이 향상된다. 뿐만 아니라 JavaScript로 모든 유형의 파일을 포함하여 추가적인 build도구의 수를 줄이고 프로그램적으로 파일을 사용 및 수정할 수 있다. 이밖에도 Webpack 기반 환경으로 HMR과 같은 플러그인을 적용하게 되면 다음과 같은 장점이 있다

빠른 실시간 reload 기능을 갖출 수 있다(HMR)
- 디스크에 저장되지 않는 메모리 컴파일을 사용하기 때문에 컴파일 속도가 빨라진다.

내가 생각하는 장점이다
1. SSR/CSR의 기능을 모두 가지고 있다
2. SEO가 가능하다
3. api호출을 편하게 할 수 있다 환경변수 설정시 자동으로 원하는 api로 호출 가능하다
4. API Route를 이용하여 클라이언트가 요청한 api를 서버쪽에서 공급하도록 할 수 있다
5. 리엑트의 문법을 사용하면서 약간의 연장선이 있다
6. 함수로 표현하여 java와 아주 살짝 비슷? 한 느낌이 있다 
7. json 포멧으로 출력값을 확인 할 수 있다
8. npm run dev로 개발환경으로 들어가서 개발을 하고 npm run build를 하면 바로 배포하는 서버를 볼 수 있다
9. api에 파라미터로 id값이 들어오는걸 다 처리 할 수 있다
10. 이미 우리는 api를 다 구현했기때문에 뷰를 만들어서 연동만 하면 된다
(별도의 설치없이 프론트&백의 기능을 다 가질 수 있다)
11. 필요할 경우 컨버팅해서 aws에 올리면 람다로 자동 변환되어서 올라간다