NEXTJS 로 twitter클론 해보기(2)

LeeJaeHoon·2021년 12월 9일

AppLayout 만들기

components폴더 만들기

AppLayout.js

next에선 Link href를 통해 페이지를 이동할 수 있다.

import PropTypes from "prop-types";
import Link from "next/link";
import { Menu } from "antd";

const AppLayout = ({ children }) => {
  return (
    <div>
      <Menu mode="horizontal">
        <Menu.Item>
          <Link href="/">
            <a>노드버드</a>
          </Link>
        </Menu.Item>
        <Menu.Item>
          <Link href="/profile">
            <a>프로필</a>
          </Link>
        </Menu.Item>
        <Menu.Item>
          <Link href="/signup">
            <a>회원가입</a>
          </Link>
        </Menu.Item>
      </Menu>
      {children}
    </div>
  );
};

AppLayout.propTypes = {
  children: PropTypes.node.isRequired,
};

export default AppLayout;

해당 AppLayout을 통해 Layout을 할 수 있다.

으로 감싸준 부분이 children으로 들어간다.

import AppLayout from "../components/AppLayout";

const Home = () => {
  return (
    <>
      <AppLayout>
        <div>index</div>
      </AppLayout>
    </>
  );
};

export default Home;

pages의 공통 부분을 layout하는법

pages폴더아래에 _app.js파일을 만든다.
Component부분에 우리가 만든 Component가 들어간다.
Component에서 App을 import안해줘도 자동적으로 된다. (next가 알아서 해줌)
next에서 head를 고칠려면 import Head from "next/head"를 해줘서 Head를 사용해 고쳐야 한다.

import PropTypes from "prop-types";
import Head from "next/head";
import "antd/dist/antd.css";
const App = ({ Component }) => {
  // pages의 공통 부분
  return (
    <>
      <Head>
        <meta charSet="utf-8" />
        <title>NodeBird</title>
      </Head>
      <Component />
    </>
  );
};

App.PropTypes = {
  Component: PropTypes.elementType.isRequired,
};
export default App;

antd - grid

24칸으로 쪼개짐
xs={24} → 화면이 작을때 각각이 24칸씩
- 100%차지한다는말
md={12} → 화면이 중간쯤 크기일때 12칸 차지
- 50%차지한다는 말

import PropTypes from "prop-types";
import Link from "next/link";
import { Menu, Input, Row, Col } from "antd";
import { useState } from "react";
import UserProfile from "./UserProfile";
import LoginForm from "./LoginForm";

const AppLayout = ({ children }) => {
  const [isLoggedIn, setIsLoggendIn] = useState(false);
  return (
    <div>
      ...Menu
      <Row gutter={8}>{/*gap과 같다.*/}
        <Col xs={24} md={6}>
          {isLoggedIn ? <UserProfile /> : <LoginForm />}
        </Col>
        <Col xs={24} md={12}>
          {children}
        </Col>
        <Col xs={24} md={6}>
				 {/*_blank을쓸때 rel="noreferer noopener"을 써줘야 보안상 좋다.*/}
          <a
            href="https://velog.io/@abc5259"
            target="_blank"
            rel="noreferer noopener"  
          >
            Made By LeeJaeHoon
          </a>
        </Col>
      </Row>
    </div>
  );
};

AppLayout.propTypes = {
  children: PropTypes.node.isRequired,
};

export default AppLayout;

LeeJaeHoon

이전 포스트

NEXTJS 로 twitter클론 해보기

다음 포스트

NEXTJS 로 twitter클론 해보기(2)

NEXTJS 로 twitter클론 해보기

NEXTJS 로 twitter클론 해보기(3. 더미데이터로 Login/Logot 하기)

0개의 댓글

관련 채용 정보