오늘 공부한것 & 기억하고 싶은 내용
리액트 마스터 강의까지 다 듣고 nextjs를 간단하게 공부해보려 한다.
리액트는 cra로 설치를 진행했다면 이번엔 수동으로 기본적인 것만 설치해보자.
nextjs를 설치해보자
- 디렉토리 생성(mkdir learn-nextjs14)
- 디렉토리 들어가서
npm init -y을 하면 package.json이 생성된다. - package.json 파일의 "license"를 MIT로 변경
MIT
이 소프트 웨어를 누구라도 무상으로 제한없이 사용해도 됨.
단, 저작권 표시 및 허가표시를 모든 복제물 또는 중요한 부분에 기재해야 함.
저자와 저작권자는 책임을 지지 않는다를 의미 - npm install react@latest next@latest react-dom@latest
react-dom이 필요한 이유: react는 ui와 다른 모든 것들을 구성하는 부분이고, react-dom은 그것을 브라우저의 dom에 렌더하는 역할을 하기 때문
- package.json 파일 "scrips": test는 지우고,
"dev": "next dev"추가
"scripts": {
"dev": "next dev" //명령어 지정, dev 명령어를 실행하면 Next.js 실행
},-
app폴더에 page.tsx or page.jsx 만들기( 확장자는 마음대로 / 타입스크립트로 지정할 경우 nextjs가 알아서 타입스크립트 설치해줌 ;;굿 )
app/page.jsx -> 절대 틀려서는 안되는 경로 -
만든 page.jsx에 테스트 코드 넣고
npm run dev로 실행
export default function Page() {
return <h1>Hello NextJs!</h1>
}
- http://localhost:3000 링크 생성됨
들어가보면 화면에Hello NextJs!출력 부야~
- 오잉 그런데 app 폴더 내에 layout.js 파일이 저절로 생겨있다. 뭐지?(지워도 생김;)
app/layout.js
export const metadata = {
title: 'Next.js',
description: 'Generated by Next.js',
}
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}
배운점 & 느낀점
회사에서 쓰던 nextjs.. ㅣ가그때는 잘 모르는 상태에서 코드를 짜기 급급했는데
이번 기회에 차근차근 배울 수 있는 시간이 생겼다.
nextjs가 그렇게 좋은가? 극찬을 받고 있다!!!!
사실 아직 자바스크립트, 리액트 마스터도 못한 상태이긴 하지만
지금 공부를 해두면 회사 코드에서도 좀 아는게 나오지 않을까 싶은.. 긍정적인 힘이 생겼으면 좋겠다^^
자동으로 설치도 가능하지만 처음엔 수동으로 설치해보는 강의를 들었다.
page.jsx를 만들어서 npm run dev를 했더니 화면이 나왔다. 언제나 신나는 페이지 생성
페이지와 함께 레이아웃이라는 파일도 생겼는데 이건 추후에 공부할 예정이다 ..
오ㅐ 생기는지 궁금궁금.! 얼른 강의를 더 들어봐야겠다.
