Next.js로 리액트를 시작해본다
![Next.js로 리액트를 시작해본다](/content/images/size/w2000/2023/08/476949_reactjs--nextjs--start-project-_xl-1024-v1-0----------1.jpg)
Vue로 회사 프로젝트를 끝내고, 여유있게 ‘넷플릭스에 어떤 신작이 나왔나~’하면서 살펴봤다. ‘셀러브리티’
오, 뭔가 재미있어 보이는데? 일단 시작해봤다. 인스타그램의 셀럽들의 이야기로 나마저 인스타그램을 설치하게 만들었다. 설치할 때만 해도 셀럽이 될 것 같은 느낌이 들었는데, 설치하고 나니 할께 없었다. 외삼촌의 일상 피드가 약간 반가웠지만.. 뭐 결론은 할께 없더라. 차치하고, 인스타그램을 웹으로 접근했는데 보통은 꺼져있는 리액트 판별기가
![](https://birdspring.com/content/images/2023/08/DraggedImage.jpeg)
활성화 되었다.
![](https://birdspring.com/content/images/2023/08/DraggedImage-1.jpeg)
‘아, 인스타그램도 리액트를 사용하는구나.’
얼마전에 리뉴얼된 네이버 포털 메인 페이지에서도 리액트가 활성화 되서 리액트를 많이 사용하나보다 라고 생각했었는데, 다시 한번 리액트가 마려워졌다.
Next.js로 시작한다.
next.js의 공식 홈페이지로 가면 인스톨가이드가 있다.
https://nextjs.org/docs/getting-started/installation
기본적으로 Node.js 16.8이상이 설치되어 있어야 한다.
macOS, Windows 그리고 리눅스를 지원한다는데, 그럼 다 지원하는거 아닌가? ㅋㅋ
설치
npx create-next-app@latest
요즘은 이렇게 명령어 한방이면 그냥 개발환경설정이 다된다. 실행하면 약간의 질문들을 하지만 뭐 내 상황에 맞게 답변만 잘해주면 나에게 꼭 맞는 프로젝트 환경이 구성된다.
나는 아래처럼 답변해서 프로젝트를 생성했다.
![](https://birdspring.com/content/images/2023/08/DraggedImage-2.jpeg)
프로젝트명만 타이핑하고 나머지는 그냥 엔터,엔터,엔터~(반복)
구동
![](https://birdspring.com/content/images/2023/08/DraggedImage-3.jpeg)
폴더로 들어가서 혹시 몰라 npm install을 해줬는데 이미다 설치된 상태로 프로젝트가 생성 완료된 것으로 보인다.
npm run dev
위 명령어를 바로 실행하니 서버가 구동되었다.
![](https://birdspring.com/content/images/2023/08/DraggedImage-4.jpeg)
개발 시작!
서버까지 구동되었는데 당연히 바로 개발이 가능하다.
먼저 컨트롤(커맨드)+c로 서버를 중단하고
code .
커맨드를 입력하여 VSCODE를 실행한다. (이건 아마 커맨드로 입력할수 있게 사전에 설정을 해놔야 될 것 같다. 혹시 code . 가 안된다고 난리치지말고 검색해보면 있을듯.)
![](https://birdspring.com/content/images/2023/08/DraggedImage-5.jpeg)
딱봐도 느낌이 app에 페이지 소스가 있을 것 같다.
![](https://birdspring.com/content/images/2023/08/DraggedImage-6.jpeg)
page.tsx 찾았다.
사실 Next.js 가이드를 보면서 하나하나 해도 되지만, 그냥 대에에에에충 보면 이정도는 아마 느낌이 올 것이다.
토이프로젝트
여기까지 따라해보니 자신감이 생겼다. 토이프로젝트를 진행하면서 리액트를 연마해봐야겠다. 그래서 정한 토이프로젝트는 모임관리앱!
처음부터 하나하나 만들면서 기록해봐야겠다. 레츠고! 레고레고!!