next+ts 3일차

유튜브: https://www.youtube.com/watch?v=gyvwrIV0NZk 
깃허브: https://github.com/qjawns0222/caremaker/tree/next-ts-3 

오늘은 _app.tsx 와 nav바 메인화면을 손봤습니다

app.tsx 에서 이렇게 작성해서 모든 페이지내용이 저기 compnent 에 들어가게 되어서 layout역할을 하게 됩니다. 즉 각 페이지 마다 페이지내용이 _app.tsx에   component로 전달이 됩니다. 그래서 layout역할을 하게 됩니다.

그것을 활용하여서 어짜피 모든 페이지가 _app.tsx를 활용해서 되니까 글로벌css를 저기다 적어서 모든것에 적용되도록 했습니다.

참고로 style은 저렇게 적으면 장점이 클래스이름마다 style.~이런식으로 안해도 되지만 css에서 지원하는 자동완성 이나 색깔 고르는게 없어서 조금 불편하기는 합니다.

import { NextPage } from "next";

import Image from "next/image";

import Link from "next/link";

const nav: NextPage = () => {

  return (

    <div className="header">

      <div className="logo">

        <Image

          src="https://raw.githubusercontent.com/qjawns0222/portfolio/main/img/%ED%8C%8C%EB%9E%80%EB%B6%88-%EB%A1%9C%EA%B3%A0.ico"

          alt="logo"

          width="70px"

          height="70px"

        />

      </div>

      <div className="navbar">

        <div className="home">

          <Link href="/">

            <a>메인화면</a>

          </Link>

        </div>

        <div className="card">

          <Link href="/form">

            <a>카드 고르기</a>

          </Link>

        </div>

        <div className="mypage">

          <Link href="/mypage">

            <a>마이페이지</a>

          </Link>

        </div>

      </div>

      <style jsx>

        {`

          .header {

            background: linear-gradient(

              to left,

              rgb(251, 211, 233),

              rgb(187, 55, 125)

            );

            display: flex;

          }

          .header > .logo {

            width: 10%;

            display: flex;

            justify-content: center;

          }

          .header > .navbar {

            width: 100%;

            display: flex;

            justify-content: center;

            align-items: center;

          }

          .header > .navbar > * {

            margin: 15px;

            font-weight: bolder;

            font-size: 24px;

            color: royalblue;

          }

        `}

      </style>

    </div>

  );

};

export default nav;

이게 nav.tsx 내용입니다. 맨처음에는 img태그를 할려고 썼는데 오류 뜨길래 보니까 Image어쩌고 있어서 검색하니까 저걸써야 된다고 하더라고요. 뭐 loader어쩌고하느데 보닌까 그냥 편의를 위해 쓰는 것 같아서 그냥 없이했습니다. 

그리고 src,alt,width height(or layout)이 필수더라고요 

css는 저렇게 작성하면 해당 컴포넌트에서만 작동하게 됩니다.

그리고 Link태그만 쓰니까 text-decoration:none이 잘 작동이 안되더라고요.Link태그를 쓰고 그안에 a태그를써주셔야 제대로 동작이 됩니다. 

 

메인화면도  조작했는데 위에꺼랑 크게 다를껀 없습니다.