-
4. 로그인, 회원가입 폼 만들기MERN Stack ChatApp 2024. 7. 31. 19:42
https://www.youtube.com/watch?v=5QcAcfEf-CI&list=PLKhlp2qtUcSZsGkxAdgnPcHioRr-4guZf&index=7
리액트, 자바스크립트를 => 넥스트, 타입스크립트로 변환, css 와 tailwindCss 미숙으로 꽤 오래 걸렸다.
그냥 단순한 로그인/회원가입 화면이다.
여기서 배웠던 점은 일단 css, tailwind css를 사용하며 익숙해져가고 있고,
background image등을 파일로 넣어서 사용하고 싶다면 public 폴더에 이미지 파일을 넣고
bg-[url('/background.png')]이런식으로 사용해주면 된다는 것.
// app/layout.tsx import type { Metadata } from "next"; import { Inter } from "next/font/google"; import "./globals.css"; import { Providers } from "./providers"; const inter = Inter({ subsets: ["latin"] }); export const metadata: Metadata = { title: "Create Next App", description: "Generated by create next app", }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( <html lang="en"> <body className={`${inter.className}, bg-[url('/background.png')] bg-cover bg-center min-h-screen`} > <Providers>{children}</Providers> </body> </html> ); }그리고 마진을 이용해 화면 가운데 정렬을 하려면 width가 있어야 된다는 것을 상기했다는 점이다.
w-10 mx-autogithub : https://github.com/Wunhyeon/ChatApp-MERNStack/tree/4.LoginSignupFormPublishing
GitHub - Wunhyeon/ChatApp-MERNStack
Contribute to Wunhyeon/ChatApp-MERNStack development by creating an account on GitHub.
github.com
'MERN Stack ChatApp' 카테고리의 다른 글
7. Front 회원가입 페이지 전면 수정 및 서버통신 (0) 2024.08.04 5. express server와 몽고DB 연결하기 (0) 2024.08.01 3. 스키마생성 (0) 2024.07.31 2. 프론트와 연동 (0) 2024.07.31 MERN Stack으로 챗앱만들기 - 1.서버가동 (0) 2024.07.31