Age of Discovery

모든 준비는 끝났다! 투두리스트 지금 바로 시작~~~합니다. pages폴더 안에 있는 index.tsx파일에 h1, input, textarea, button 태그들을 이용해 위 모양처럼 만들어주자. ( html과 css는 자유롭게 ^^ ) import { GetServerSideProps } from 'next'; import { ChangeEvent, useEffect, useState } from 'react'; import { prisma } from '../lib/prisma'; import axios from 'axios'; import { useRouter } from 'next/router'; export default function Home() { return ( To-Do-List {..

다음과 같이 선수들의 사진을 클릭했을 때 Route를 이용해 각 선수들의 상세페이지로 이동하게 하고 싶다. 확장성을 위해 URL뒤에 /:id를 입력하면 /detail/'아무거나' 어떻게 입력하든 그 페이지를 보여준다. 정확히는 오류를 띄우지 않는다. detail.js파일을 생성 후 DetailPage 컴포넌트를 만들어보자 import { useParams } from "react-router-dom"; const DetailPage = (props) => { let {id} = useParams(); return( {props.player[id].name} {props.player[id].age} {props.player[id].position} 주문하기 ) } export default DetailPa..

축구선수 사진을 클릭했을 때 해당 축구선수의 상세내용을 보여주는 페이지를 띄워주고 싶다. 배운 내용을 바탕으로 구현해보자. 기존 자바스크립트에선 URL을 입력하면 그 주소에 해당하는 HTML파일을 띄워주기만 하면 됐다. 하지만 리액트는 index.html 파일 단 한개만을 쓰기 때문에 app.js파일 내에서 route를 사용한다. 자세히 살펴보자 route를 사용하기 위해서는 npm install react-router-dom@6 터미널에서 npm install react-route-dom@6 를 입력후 설 치해준다. 다음 index.js 파일 상단에 import { BrowserRouter } from 'react-router-dom'; 이 코드를 import해주고 const root = ReactDO..