[TIL] 220312

2022-03-12

회고

오늘한일

1. 팀프로젝트 댓글 api fetch 부분 react-query로 전부 수정 완료
2. 노마드 nextjs movieapp에 tailwind css 적용하고 tv, tv detail page 추가 (거의 복붙이라 어렵지 않았음)
3. 타입스크립트 강의

해야할일

1. api가 컴포넌트 내부에 모여있어서 지저분함 redux 등으로 관리하기

---

배운것

NextJS

Image

• alt, src, width, height 작성하기. 근데 크기는 auto가 안 돼서 불편
• src

// next.config.js
const nextConfig = {
  images: {
    domains: [""],
  },
  ...
}
module.exports = nextConfig
  
// pages/index.js
import Image from 'next/image';
  
export default functio Home() {
  return (
    <Image src={} alt={} width={} height={} />
  );
}

• next.config.js 수정하면 다시 시작하기! npm run dev

Tailwind CSS

Install Tailwind CSS with Next.js
https://v2.tailwindcss.com/docs/guides/nextjs

group-hover

https://daily-dev-tips.com/posts/tailwind-group-hover-the-state-you-missed/

export default function Home({ results }) {
  return (
	<div className="group" >
    	<img
        	src={`https://image.tmdb.org/t/p/w500${movie.poster_path}`}
            className='group-hover:scale-105 group-hover:-translate-y-4 
				transition-transform ease-in-out duration-200'
		/>
			<h4 className='text- text-center'>{}</h4>
	</div>
  )
}

conditional

정확한지는 모르겠으나 이것저것 찾아보고 적용했더니 되긴 됐음..
https://www.npmjs.com/package/tailwindcss-classnames
https://www.reddit.com/r/tailwindcss/comments/k3p5a2/question_about_conditionally_setting_classes_in/

// components/NavBar.js
import classnames from 'tailwindcss-classnames';

export default function NavBar() {
  return (
    <div>
      <Link href="/">
        <a className={classnames('mr-2', { 
          'font-medium': router.pathname === "/",
	    })}>Home</a>
	  </Link>
  ...

220313 수정!!!
https://stackoverflow.com/questions/67383686/how-to-add-a-style-on-a-condition-in-tailwind-css

<... className={`flex items-center space-x-2 px-4 py-5 transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-110 border-l-4 border-white ${window.location.pathname === '/' ? 'border-red-200' : ''}`}>

그냥 백틱 안에 템플릿문자열로 넣으면 되는 거였네.. 둘 다 가능하지만 굳이 라이브러리까진 안 사용해도 될거같!