본문 바로가기

버튼

[React] Nutriguide Landing Page 코드 리뷰 안녕하세요! 오늘 부터는 완성된 Nutriguide의 페이지 코드를 하루에 하나씩 리뷰해보려고 합니다. 그럼 시작하겠습니다 : )    NutriGuide는 3일치의 식단을 입력받고 사용자에게 부족한 영양소 정보를 추출해서 영양제를 추천해주는 사이트입니다. LandingPage에는 간단히 각 페이지의 정보를 보여줍니다. AI 건강 상담 버튼을 누르면 AI 건강 상담 페이지로, AI 영양제 추천 버튼을 누르면 식단 인풋 페이지로 이동합니다.  import React from 'react';import { Link, useNavigate } from 'react-router-dom';import { Button } from 'antd';import myImage from '../img/logo.png'; i.. 더보기
[Next.js] React 기능들을 이용해서 디자인하기 오늘은 저번 시간과 마찬가지로 Next.js와 친해지는 시간을 가져보겠습니다. 그러기 위해서는 React기능들을 복습할 필요가 있겠네요. 이번 공부는 코딩애플님의 강좌를 참고하였습니다. Home상세 1 Next.js 입문 React에서와 똑같이 div 태그안에 className을 통해서 css를 디자인할 수 있습니다. 태그는 html에 a href태그와 같은 기능을 합니다. 는 기본페이지로 이동하게 해주고, 는 기본페이지 뒤에 /list를 입력하면 그 페이지로 이동하게 해줍니다. 태그는 글자의 크기를 키워줍니다. 이때 ~ 역순으로 크기가 증가합니다. Next.js에서 css를 건드리려면 React의 app.js와 똑같은 역할을 하는 globals.css로 이동을 해야합니다. 내용을 다 지우고 .front.. 더보기