요즘 왜 프로그래밍은 웹페이지 안에 자바스크립트 양을 극도로 줄이는 걸 목표로 발전하고 있습니다. 그래야 페이지 로딩 속도가

빨라지니까요. 자, 그걸 위해 만들어진 프레임워크들이 되게 많은데요. 그중에 가장 많이 쓰는 게 넥스트JS라고 볼

수 있겠고요. 자, 이번 주에 넥스트JS 13 버전이 출시되었다고 무슨 발표회 같은 걸 하더라고요. 자, 그래서 이제

구성을 보시면 아이폰 신제품 발표회에 그대로 따라해서 만들어 놓은 거 같은데 아무튼 요약을 해 드리자면

이런 것들이 있고요. 넥스트JS 13 버전에서는 아예 이제 핵심 문법들이 바뀌었기 때문에 예전 12 버전으로 넥스트JS를

학습하셨다면 다시 배워야 될 수도 있습니다. 자, 근데 아직은 예전 문법도 병행해서 쓸 수 있으니까 아직은

안심하셔도 되고요, 자, 요 내용들 상세히 살펴보도록 합시다. 가장 큰 건 터보팩이라는 게 출시 같은데, 자, 요즘

웹 개발을 할 때 꼭 번들링 툴이 필요하게 되는데, 웹팩보다 훨씬

빠르게 자바스크립트를 필요한 파일로 컴파일 해준다고 합니다. 웹팩보다 700배, 빛보다 10배 정도

빠르다고 주장하는데, 솔직히 이런 툴은 안정화되면 쓰는 게 낫습니다. 그리고 넥스트JS 핵심

문법 바뀐 걸 살펴보자면, 자, 일단 넥스트JS 모르는 분들을 위해서 10초 정리를 해 드리자면, 자, 그냥

서버에서도 리액트 문법을 쓸 수 있게 도와주는 백엔드 프레임워크예요. 넥스트에 설치하면 이렇게 생겼는데, 자

여기다가는 프론트엔드 기능, 여기다가는 서버 기능 만들면 되는 거예요. 근데 13버전부터는 앱 폴더 안에다가

개발을 하셔야 돼요. 그러면 이제 예전과 똑같이 동작을 하는 데에 여기에는 이제 페이지.js라는 뭐 예약 파일 같은 거를 만들어서

거기다가 웹페이지를 만드시면 됩니다. 그리고 레이아웃.js라는 예약 파일 같은 것도 만들 수 있는데 자 여기다가 넣은 레이아웃은요 하위

컴포넌트에서 그대로 재사용이 가능하고요. 그러니까 여기다가 뭐 내부 바 사이드바 붙어 뭐 이런 거 넣으라는

소리에요. 자 그리고 이제 뭐 서버랑 통신할 때 이제 로딩 중일 때가 많죠. 자 그럴 때 로딩 중 UI 같은 걸 띄우고 싶으면

로딩.js라는 예약 파일을 만들어서 거기다가 HTML 짜 놓으면 알아서 요거가 로딩 중일 때 사용이 되고요. 편리하죠, 그죠? 자 그리고 예전에

데이터를 서버에서 가져올 때 이런 문법들을 써야 되는데 자 지금은 이런 혼란스러운 문법 없습니다. 뭔지도 모르고 어려워 보이잖아요, 그죠?

그래서 이런 거 과감히 삭제를 했고요. 데이터를 가져오고 싶다? 자 그러면은 그냥 데이터 가져와 주세요라고 보드를

짜고요. 자 그 다음에 데이터 가져오는 코드를 그냥 컴포넌트 안에다가 이렇게 작성하시면 끝이에요. 그리고 패스 문법을 써서 데이터를

가져올 때 요걸 기입할 수 있는데, 그러면 예전 문법의 요거랑 되게 유사하게 동작을 하고요. 그래서 서버사이드 렌더링 하고 싶으면 요거

갖다 쓰시면 되는 거고요. 자 그리고 지금 만드는 것들은 다 이제 서버 컴포넌트들이기 때문에 이런 것들을 갖다 쓸 수 있는 거고요. 자

이게 핵심 문법 변동 사항이고요. 자 그리고 이제 자살한 것들은 이미지 컴포넌트도 업그레이드가 됐습니다.

넥스트js로 개발 시에 이미지를 그냥 넣는게 아니라 이미지 컴포넌트를 이용해서 넣는데 자 이러면 이미지가

알아서 최적화가 됩니다 근데 요거 성능이 좀 향상이 됐다고 하고요 특히 이미지 로드가 좀 느린

경우에 웹페이지에 레이아웃 쉬프트라는 나쁜 현상이 생기게 되는데 이게 뭐냐면 이미지 로드가 나중에 되어

가지고 자 이미지 밑에 있던 레이아웃이 이렇게 밀려 현상을 의미합니다 그러면 레이아웃을 다시 그려야 되기 때문에

로딩 시간 지연 같은게 발생하게 되죠 자 이걸 방지하고 싶으면 여러분들이 이미지를 폭과 높이를 미리

설정하거나 그래야 되는데 자 넥스트js는 요걸 알아서 해주기 때문에 좀 편리하구요 자 그리고 폰트가 로드가 또 늦게 되어서

레이아웃 시프트가 발생하는 경우들도 있습니다. 자, 이것도 넥스트js 신버전에선 해결할 수 있는 문법들을 제공해 주고요. 자, 그리고 링크

컴포넌트를 이렇게 쓰도록 이렇게 또 바뀌었고요. 그리고 익스플로러 지원을 종료하겠다 뭐 이런 자잘한 것들이

있습니다. 아무튼 xjs13은 정식 출시는 아직 안 됐기 때문에 문법이 나중에 바뀔 수도 있으니까 일단은 참고하시면 되고요.

근데 아직까지는 봤을 때 넥스트 js의 단점들이 좀 많은 게 자 13 버전부터 예약된 파일을 많이 쓰게

되어 있는데 자, 그럼 파일 구조가 이렇게 더러워질 것 같지 않습니까? 그럴 것 같구요. 자, 그리고 넥스트 js는 실은 아직까지는 정적인 사이트

만들 때 가장 훌륭한 프레임워크이고요. 웹 소켓이라든지 그런 다양한 서버 기능이 많이 필요하다 그러면

서버를 따로 제작을 해야 되기 때문에 자 그래서 완벽한 백엔드 기능은 아직 어쩔 수가 없어 가지고 좀 불편한

점들이 아직 있고요 그리고 서버에서 데이터 가져오는 건 되게 쉽게 할 수 있어요 자 근데 유저가 서버로 데이터를 보내고 싶을 때 있죠 이럴

때 쓰는 문법들은 아직도 좀 불편해요 리믹스 스벨트 킷 이런 거 쓰는 게 훨씬 더 편할 수도 있고요

Next.js 13 신버전 발표회 요약 (웹개발자 비상!!)

코딩애플

웹페이지 자바스크립트 양 최소화를 목표로 발전 중

Next.js가 가장 많이 사용되는 프레임워크 중 하나

Next.js 13 버전 출시, 핵심 문법 변경

12버전 학습자는 재학습 필요, 기존 문법 병행 사용 가능

TurboPack 도입: 웹팩보다 빠른 자바스크립트 컴파일

서버에서 리액트 문법 사용 가능한 백엔드 프레임워크

앱 폴더 내 개발, 페이지.js, 레이아웃.js, 로딩.js 파일 사용

이미지 컴포넌트 업그레이드 및 성능 향상

폰트 로드 지연으로 인한 레이아웃 시프트 해결

예약 파일 증가로 인한 파일 구조 복잡화

정적 사이트에 최적화, 웹소켓 등 다양한 서버 기능 부족

완벽한 백엔드 기능 부족, 서버 데이터 송수신 문법 불편