코딩연습장

Nextjs가 페이지를 렌더링할 때 먼저 layout.jsx파일을 읽는다.export const metadata = { title: 'Next.js', description: 'Generated by Next.js',}export default function RootLayout({ children,}: { children: React.ReactNode}) { return ( {children} )}만약 현재 사용자가 about-us페이지에 있다면 실제로 Nextjs는  이렇게 렌더링을 진행하고 있는 것이다. 따라서 body태그안에 반복되어 각 페이지에 보이길 원하는 요소를 넣으면 모든 페이지에서 확인이 가능하다. 기존에 반복되던 Navigation 컴포넌트를 없애고, ..

vite로 만든 react프로젝트는 eslint가 알아서 적용되어있다. 하지만 사용해본적이없어 설정해보고자 한다. 1. react프로젝트 생성yarn create vite vite-react-eslint --template react 2. eslint관련 패키지 추가yarn add eslint eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react prettier react hooks도 강제하고싶다면 아래 패키지도 추가하자.yarn add eslint-plugin-react-hooks 타입스크립트를 사용할때는 아래패키지를 추가로 설치한다.yarn add @typescript-eslint/eslint-plu..

test("on/off button has blue color", () => { render(); const buttonElement = screen.getByTestId("onOffButton"); expect(buttonElement).toHaveStyle({ backgroundColor: "blue" });});어떤 컴포넌트에 어떤 스타일이 들어있는지에 대한 검사도 가능하다.toHaveStyle안에 객체 형식으로 여러 스타일을 검사할 수도 있으며, 백틱형태로도 검사할 수 있다.expect(button).toHaveStyle('display: none')expect(button).toHaveStyle({display: 'none'})expect(button).toHaveStyle(` ..