[6주차] ForgetMeNot 미션 제출합니다. #12
Conversation
fix: 마지막 key 수정이길..
fix: 진짜진짜 마지막 key 오류 수정
fix: 진짜 최종
| @@ -0,0 +1,17 @@ | |||
| import React, { useState } from "react"; | |||
|
|
|||
| function useInput(initialText: string) { | |||
There was a problem hiding this comment.
인풋 과정을 따로 custom 훅으로 만드는 거 좋네용 나중에 플젝할 때 적용해봐야겠어요!😤
| <Image | ||
| src={`/img/navigator/select_${item.src}.svg`} | ||
| alt="navi" | ||
| width={20} | ||
| height={20} | ||
| key={idx} | ||
| /> |
There was a problem hiding this comment.
이번 과제 때 그냥 img 태그 썼었는데 next/image 구글링해보니까 nextjs 쓸때는 Image가 이미지를 최적화해서 구글 검색엔진에 노출되기 유리하도록 만든다고 하네요 담부터 image 써봐야겠어요..!!!
| const title = [ | ||
| { title: "Now Playing", path: now_playing }, | ||
| { title: "Top Rated", path: top_rated }, | ||
| { title: "Popular", path: popular }, | ||
| { title: "Upcoming", path: upcoming }, | ||
| ]; | ||
|
|
There was a problem hiding this comment.
오 이렇게 title을 배열로 관리하는 게 컴포넌트에 props 줄 때 코드 중복 줄여주고 좋네요!!😀
| function useInput(initialText: string) { | ||
| const [text, setText] = useState(initialText); | ||
|
|
||
| const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => { |
| <NaviContainer> | ||
| <Link href={item.link} key={idx}> | ||
| {pathName.pathname === item.link ? ( | ||
| <> |
| {pathName.pathname === item.link ? ( | ||
| <> | ||
| <Image | ||
| src={`/img/navigator/select_${item.src}.svg`} |
There was a problem hiding this comment.
선택여부에 따라 아이콘 색이 바뀌는걸 이렇게 표현하는 방법도 있었군요 !
| import Image from "next/image"; | ||
| import styled from "styled-components"; | ||
|
|
||
| const PlayBtn = ({ width }: { width: number }) => { |
There was a problem hiding this comment.
엇 Typescript를 프로젝트에 적용하면서 매번 PlayBtnProps 인터페이스를 만들었었는데 이런 간단한 방법이 있었다니.. 몰랐습니다
| import Image from "next/image"; | ||
| import {imgPath} from "../../asset/api-info"; | ||
|
|
||
| const SearchItem = ({ imgSrc, name }: { imgSrc: string; name: string }) => { |
There was a problem hiding this comment.
props가 두개 이상일때는 interface를 선언하는 방법도 좋을 것 같습니다 !
| // // app/page.js | ||
| // async function getData() { | ||
| // return fetch(`${api}/movie/now_playing?api_key=${apiKey}`) | ||
| // .then(res=>res.json()) | ||
| // } | ||
|
|
||
| // export default async function setData() { | ||
| // const name = await getData(); | ||
| // // console.log(name); | ||
| // return name; | ||
| // } |
| import Head from "next/head"; | ||
| import Navigator from "../component/navigation/footer"; | ||
|
|
||
| const App = ({ Component, pageProps }: any) => { |
There was a problem hiding this comment.
typescript를 사용할 때 가능한 any를 사용하지 않는 쪽을 권장한다고 해요!
| <> | ||
| <Head> | ||
| <title>Netfilx</title> | ||
| <link rel="icon" href="https://ifh.cc/g/bCkXTX.png" /> |
| @@ -0,0 +1,13 @@ | |||
| // Next.js API route support: https://nextjs.org/docs/api-routes/introduction | |||
| import type { NextApiRequest, NextApiResponse } from 'next' | |||
There was a problem hiding this comment.
api request, api response 타입이라니 ! 완전 새로보는 형식이라서 열심히 읽으며 배워갑니다 !! 공부해봐야겠어요 +_+
이번엔 저번주에 이어!!!
를 추가했습니다!!!
실시간 검색을 useEffect를 이용해서 실시간으로 fetch를 함으로써 구현했는데
이게 맞는지는.. 모르겠습니다 ㅎ 많은 조언 부탁드립니다🙇♀️🙇♀️🙇♀️
이번주에도 마찬가지로 블로그를.. 작성해보았습니다:)
https://55wldms.tistory.com/28
Team Member
안채연, 오지은
Key Questions
1. Static Routing / Dynamic Routing
(1) Static Routing (정적 라우팅)
Router(라우터)에게 필요한 정보들을 수동으로 사전 입력해야 한다.
고정된 페이지로 라우팅되기 때문에 누가 언제 접속하더라도 같은 페이지로 라우팅된다.
(2) Dynamic Routing (동적 라우팅)
Routing Table(라우팅 테이블)에서 현재 상태에 따라 경로를 자동 조정하는 것이다.
가변적인 페이지로 라우팅되기 때문에 실제 소스코드는 한 페이지지만 글 번호나 글의 id에 따라서 주소가 변경된다.
Next.js에서 동적 라우팅 시, 대괄호 안에 들어있는 문구는 변수의 기능을 한다.
라우터 객체를 이용해 이 변수의 값을 지정해줄 수 있으며, 이 변수는 문서 내에서 자유롭게 활용이 가능하다.
2. 성능최적화를 위해 사용한 방법
배포링크
https://next-netflix-16th-k7yg.vercel.app/