Next.js 많이 쓰는 이유를 알아보자

1. 프론트엔드만 찔끔 안다고 취업시켜주는 시대가 점점 끝나고 있습니다. 

외주개발 맡기면 훨씬 저렴하고

GPT가 단순한 자바스크립트 훨씬 잘 짜주는데

앞으로도 프론트엔드 개발자가 많이 필요해질까요

 

 

 

 

실은 그것들은 호들갑이고

GPT는 검색 + 코드생성을 도와주는 정도라서 별로 상관할 바는 아닙니다.

근데 그거보다 더 큰 문제가 있는데

client-side rendering 말고 server-side rendering이 다시 유행하기 시작한다는게 문제입니다.

2. client-side rendering은 브라우저에서 html을 실시간으로 만드는 방법이고

server-side rendering은 서버에서 html을 미리 만들어 보내줍니다. 

 

 

 

client-side rendering 사용시 이쁘고 부드러운 사이트는 만들 수 있는데 

첫 페이지 로딩속도저하, 검색노출어려움 같은 단점이 있어서 

웹사이트의 bounce rate 이런 지표들이 낮아지고 트래픽 잡으려고 광고비도 많이 들고 

그래서 투자대비 수입 지표가 낮아질 수 밖에 없습니다. 

 

server-side rendering을 사용하는 경우

서버에서 html을 미리 만들어주기 때문에 위의 단점들이 사라지는 경우가 많습니다.

역시 돈벌려고 웹개발하는거지 다른 이유 없지 않습니까

그래서 유행따라 client-side rendering 썼다가 다시 server-side rendering으로 전환하는 곳들이 매우 많습니다. 

3. 그런데 server-side rendering을 쓰는 경우 

useState useEffect react-query redux ajax react-router props 등 

최근 몇년간 프론트엔드의 전문성이라고 부르던 것들이 별로 필요없어집니다. 

 

그리고 GPT에게 지시하는 식으로 코딩하는 시대가 금방 올텐데 

그럼 개발자 1명이서 2인분, 3인분하는 세상이 오면 

그 경우엔 자연스럽게 풀스택 개발자들을 많이 선호하게 될 것 같군요. 

 

그런 이유 때문이라도 프론트엔드만 하던 분들은

일명 백엔드라고 많이 부르는 서버개발 맛보는 것도 나쁘진 않아보입니다. 

다행히 예전과 다르게 어렵지도 않은데 Next.js 쓰면 매우 쉽게 입문가능합니다. 

 

4. 실제로 Next.js 신버전으로 게시판 하나 만들어봤는데

글작성, 조회, 수정, 댓글기능까지 해서 딱 1시간밖에 안걸림

이번 신버전은 매우 쉽게 나와서 우리같은 못난 사람도 풀스택 개발을 매우 쉽게 진행가능합니다. 

 

5. Next.js 이번 버전은 재밌고 유용한 기능 + 더 나은 성능으로 무장했는데 

- 폴더기반 자동라우팅

- 새로디자인한 서버API 기능

- 쉬운 DB연결

- 직관적인 rendering 전략 선택기능 

- hydration없는 server-side rendering

- 파워풀한 캐싱

- 이미지와 폰트 최적화

등 많습니다. 

회원인증기능도 Next-auth 라이브러리 쓰면 10초걸림

 

6. 실은 nuxt, sveltekit, remix 등 '렌더링 프레임워크' 아니면 'meta 프레임워크' 라고 부르는 것들이 많습니다.

다들 Next.js와 비슷한 기능을 제공해주는데

다 문법이 비슷한 느낌이라 하나만 해도 나머지는 쉽게 터득하는 수준입니다. 

 

- 하지만 대부분 취업하려고 배우는 것이기 때문에

기업에서 많이들 요구하는 스택이 nextjs일텐데 그거 하는게 낫지 않겠습니까 

- 리액트 문법을 사용하기 때문에 리액트 해본 개발자들은 특히나 쉽게 입문 가능합니다. 

 

 

 

 

 

 

7. 물론 단점도 있는데

- 리액트 라이브러리의 신문법인 client component, server component를 도입해서 코드를 짜는데

그거 구분해서 코드짜는게 매우 귀찮고 

- 많이 쓰진 않지만 WebSocket, WebRTC같은 기능을 이용해야한다면 직접 Nodejs + express 서버를 하나 더 만드는게 나을 수 있습니다.

- 그리고 14버전인데 아직도 프레임워크 자체 버그가 종종 보임

 

 

 

 

 

 

8. 프로젝트 2개 만들어볼 것인데 

뇌 비우고 제 코드만 따라쳐봤자 개발실력에 아무 도움이 안되기 때문에

이번에도 'Next.js로 혼자 알아서 코드짜는법' 주로 알려드리는 강의로 제작했습니다.

어짜피 세부코드 짜는건 AI가 더 잘하니까 인간들은 큰그림 그리는 법 많이 배워가는게 좋고 

그런 내용 많이 넣느라 10분짜리 강의 하나 만드는데 2~3일 걸렸고

이해에 도움되게 겉치레 제거하고 최대한 심플한 프로젝트 만들어보면서 혼자 코드 잘짜는 법 알려드릴 것임 

 

강의는 html css javascript 기초 (array, object, function, if, for) 아는 분들 대상으로 진행합니다.

하지만 여러분들 실력에 대한 기대치가 매우 낮기 때문에 걱정안해도 되고 

리액트문법 그딴거 몰라도 됩니다. 그거 먼저 배울 것임