본문 바로가기

Next.js9

Next.js 앱 처음으로 수정해보기

첫번째 Next.js 앱만들기는 잘 했어?

 

첫번째 Next.js 앱 만들기

자 오늘 첫번째 Next.js앱을 만들꺼야. 먼저 환경설정부터 해야겠지? 환경설정 Node.js설치는 필수 노드 홈페이지에 가서 설치해 https://nodejs.org/ 버전은 10.13 이후 버전이면 돼! 자 시작 해볼까? 일단

ppsu.tistory.com

Photo by  Howard Bouchevereau  on  Unsplash

이번엔 요걸 수정해볼꺼야!

pages 디렉토리에 index.js파일이 있을꺼야.

13번째 줄에 <h1> 태그 사이에 "Welcome to" 보여?

요걸 지우고 "안녕하세요"로 한번 바꿔봐!

 

저장한 다음에 아까 열어뒀던 브라우저 창을 다시 볼까?

오잉?!?

뭐지? 새로고침도 안했는데 메시지가 변했네?

한번 파일을 수정하고 저장만 해봐! 역시나 브라우저가 잘 바뀌네.

왜그럴까?

Next.js 개발서버는 핫리로딩(Hot Reloading) 기능을 가지고 있어. 요게 머냐면, 이미 경험했듯, 브라우저 새로고침 할필요 없이 파일만 수정해도 자동으로 브라우저에 반영되는 기능이야 완전 멋지지? 수정할때마다 브라우저 새로고침 누를 필요 없다는 사실! 키한번 안누르는 건데 하루에 누르는 횟수를 생각하면 요거 완전 생산성 최고 꿀기능 아니겠어? 

다음 시간에는 페이지를 하나 만들어보고 페이지 이동하는 기능을 배워볼께!

 

Next.js 페이지 추가하기

앱 처음으로 수정은 잘 했지? Next.js 앱 처음으로 수정해보기 첫번째 Next.js 앱만들기는 잘 했어? 첫번째 Next.js 앱 만들기 자 오늘 첫번째 Next.js앱을 만들꺼야. 먼저 환경설정부터 해야겠지? 환경설

ppsu.tistory.com