Link6 next+ts 4일차 form 화면 만들기 유튜브: https://www.youtube.com/watch?v=8o12adBFbnk 깃허브:https://github.com/qjawns0222/caremaker/tree/3%EC%9D%BC%EC%B0%A8-form-%ED%8E%98%EC%9D%B4%EC%A7%80 오늘은 form화면을 만들었습니다. import { NextPage } from "next"; import Image from "next/image"; import Link from "next/link"; const make: NextPage = () => { return ( 원하는 양식을 선택해주세요 친구 약속 만들기 친구와 간단한 약속 설명보다는 한번의 링크로 해결하세요 친구 약속 만들기 친구와 간단한 약속 설명보다는 한번의 링크로 해.. 2022. 4. 15. 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.~이런식으.. 2022. 4. 14. next Link a next에서는 a태그를 안쓰고 Link를 쓰는지 알아보겠습니다. pages/_app.js import Nav from "../components/nav"; export default function App({ Component, pageProps }) { return ( ); } components/nav.js import Link from "next/link"; export default function nav() { return ( 메롱 메롱1 ); } 이렇게 하고 한번 동작 시켜 보겠습니다 이렇게 css는 제대로 동작이 됩니다 하지만 저렇게 로딩창이 생기는것을 볼수있습니다. 즉 여기서는 다시 페이지를 처음부터 로드 하는거라서 로딩창이 생기게 됩니다. 그럼 Link를 사용해보겠습니다 componets.. 2022. 3. 25. React 마지막 간단한 프로젝트 2일차- order화면 완성본:https://github.com/qjawns0222/hompage.git 자 이제 시작입니다 두번재로 어렵습니다 나 저번 강의처럼 Buy.module.css Buy.jsx Buycontainer.jsx 세개를 추가해주세요 pages/Buy.jsx import React from "react"; import Buycontainer from "../container/Buycontainer"; export default function Buy() { return ( ); } 작성 Buy.module.css .orderboxs { border: 1px solid black; border-radius: 20px; background-color: rgb(180, 230, 247); min-height: 7.. 2022. 3. 1. 이전 1 2 다음
