생활코딩

Coding Everybody

샘플 앱 세탁

토픽 생활코딩 > WEB > WEB2 - JavaScript > React > Next.js 13

create-next-app을 이용해서 개발환경을 구축하면 샘플앱이 기본적으로 포함되어 있습니다. 이 앱에서 불필요한 내용을 제거하고, 우리만의 앱을 새로 만들어봅시다.

소스코드

 기본앱을 세탁한 후 새출발! · egoing/nextapp@3b4073e (github.com)

레이아웃 세탁

레이아웃은 모든 페이지가 공유하는 HTML 코드가 담겨 있습니다. 이걸 세탁하면서 처음부터 새로 시작해봅시다!

  1. src/app/layout.js 파일을 열어줍니다.

    import './globals.css'
    export const metadata = {
      title: 'Create Next App',
      description: 'Generated by create next app',
    }
    export default function RootLayout({ children }) {
      return (
        <html>
          <body>{children}</body>
        </html>
      )
    }
    

콘텐츠 세탁

레이아웃에 포함될 콘텐츠가 담겨 있습니다. 이 부분을 세탁해서, 우리만의 내용으로 채워봅시다.

  1. src/app/page.js 파일을 열어줍니다.

    export default function Home() {
      return (
        <>Hello, Nextjs!</>
      )
    }
    

global css 세탁

마지막으로, 모든 사이트에 적용된 디자인이 src/app/global.css에 담겨 있습니다. 이것은 마치 책의 디자인과 같은 것이죠. 이 파일의 모든 내용을 지워서, 우리만의 디자인을 적용해봅시다!

  1. src/app/global.css 파일의 모든 내용을 지워줍니다.

이제, Nextjs 앱의 세탁이 완료되었습니다. 이제 출발을 위한 모든 준비가 끝났습니다! 

댓글

댓글 본문
  1. 앱 세탁!
  2. Hoon Ko
    20231018
  3. 어흥
    230813
  4. egoing
    수정했습니다!
    대화보기
    • 정준명
      콘텐츠 세탁(?)은 src/app/app.js 가 아니라 src/app/page.tsx 파일입니다.