저는 교수님이 Nest.js를 이용해서 블로그를 만들어볼거라고 하셨습니다.
그래서 Blog라는 폴더를 생성하고 그 안에 back,front 폴더를 만들어줬습니다.
1) npm init
2) npm install next react react-dom
그러면 기본적인 webpack을 포함한 React관련 개발환경이 모두 설치가 됩니다.
3) . package.json 수정기존코드의 scripts 부분
"scripts":{ "test": "echo \"Error: no test specified\" && exit 1" }
수정코드
"scripts":{ "test": "echo \"Error: no test specified\" && exit 1", "dev": "next dev -p 3001 -H 0.0.0.0" "build":"next build" "start":"next start" "lint":"next lint" }
"dev": "next dev -p 3001 -H 0.0.0.0" => 데브서버
-p: [포트번호] -H 0.0.0.0 : 같은 와이파이를 사용하고 있으면 핸드폰으로 확인 가능
"build":"next build" => 실서버에 빌드해서 올렸는데 그때의 빌드명령어
"start":"next start" => Next자체적으로 웹서버를 가지고 있음, 그 서버를 실행하는 명령어
lint에 대해서는 향후 설명을 들을 예정
이제 기본적인 환경 세팅은 끝났습니다.
Next.js를 이용하여 Hello next를 찍어보겠습니다.
먼저, front 안에 pages라는 폴더를 만들고 그 안에 index.jsx파일을 만들어줍니다.
📄 index.jsx 코드
const Index =() =>{ return( <> Hello Next.js </> ) } export default Index
그리고 터미널에서 npm run dev를 입력하여 데브서버를 실행시키고, 3001포트로 들어가보면 Hello Next.js가 잘 뜨는 것을 확인할 수 있습니다.
그런데 리액트를 쓸때와는 코드에 다른점이 있다는 것이 보입니다.
바로! ⭐import React from 'react'를 적지 않아도 된다는 점입니다
예시를 바요 보여드리겠습니다.
pages폴더 안에 join.jsx 파일과 login.jsx 파일을 새로 만듭니다.
📄 join.jsx 코드
const Join = ()=>{ return( <> Hello Join </> ) } export default Join
📄 login.jsx 코드
const Login = ()=>{ return( <> Hello Login </> ) } export default Login
그리고 localhost:3001/join을 입력해보면 놀랍습니다!
Hello Join이 페이지에 나옵니다!!
배우면서 페이지 만드는게 엄청 편리할거같다는 생각이 많이 들었습니다!!
다음포스팅에는 넥스트를 활용하여 프론트를 더 꾸며보겠습니다ㅎㅎ