코딩연습장

useSyncExternalStore Hook은 외부 Store을 구독할 수 있는 React Hook입니다.컴포넌트의 최상위 레벨에서 해당 훅을 호출하여 외부 데이터 저장소에서 값을 읽습니다.import { useSyncExternalStore } from 'react';import { todosStore } from './todoStore.js';function TodosApp() { const todos = useSyncExternalStore(todosStore.subscribe, todosStore.getSnapshot); // ...}subscribe함수는 해당 store을 구독하고, 구독을 취소하는 함수를 반환하여야 합니다.getSnapshot함수는 store에서 데이터의 스냅샷을 읽어야 ..

배포페이지깃허브History APIHistory API는 history 전역 객체를 통해 브라우저 세션 히스토리에 대한 접근을 제공한다. 방문기록을 앞뒤로 탐색하고, 기록 스택의 내용을 조작할 수 있는 메서드와 속성을 제공해준다. pushState(stateObj, title, url)replaceState(stateObj, title, url)pushState는 현재 history 스택에 항목을 새로 추가하는 것이다."1> 2> 3> 4> 5" 의 스택이 있고, 현재 idx가 3에 위치해 있을 때 pushState를 사용하면"1> 2> 3> x" 으로 스택이 변하게 된다.  replaceState는 history스택의 현재위치를 새 항목으로 변경하는 것이다."1> 2> 3> 4> 5"의 스택이 있고, ..

body { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; background-color: black; color: white; font-size: 18px;}a { color: inherit; text-decoration: none;}a:hover { text-decoration: underline;}전역적으로 설정되길 원하는 css파일을 생성하고, 작성한다.그리고 해당 css파일을 전역 layout파일에 import하면 모든 페이지에서..

import { API_URL } from "../../../(home)/page";async function getMovie(id: string) { console.log(`Fetching movies: ${Date.now()}`); const response = await fetch(`${API_URL}/${id}`); console.log(`Finished movies: ${Date.now()}`); return response.json();}async function getVideos(id: string) { console.log(`Fetching videos: ${Date.now()}`); const response = await fetch(`${API_URL}/..

import { useEffect, useState } from "react";export const metadata = { title: "Home",};export default function App() { const [movies, setMovies] = useState(); const getMovies = async () => { const response = await fetch(process.env.MOVIE_GET_URL); const json = await response.json(); setMovies(json); }; useEffect(() => { getMovies(); }, []); return ..

Next JS에서 라우팅을하려면, 원하는 주소로 폴더를 만들고, 해당 주소에서 보여줄 페이지 컴포넌트를 page.jsx(tsx)로 만들었다.그렇다면, 동적라우팅을 원하는 경우는 어떨까?동적라우팅은 폴더이름을 대괄호로 감싸주면 된다.  } /> } /> } /> } />()=>{navigate(`/something/${id}`)}우리가 react-router-dom을 사용할 때에는 저렇게 원하는 params를 path에 지정해주어서 이동했다. 하지만 NextJS프레임워크에서 동적라우팅을 원하는 경우에는 일반 라우팅도 폴더명으로 지정했던 대로 대괄호에 감싸 주소를 지정하면 된다.이렇게 폴더를 만들어주면 주소는 https://localhost:5500/movies/1341222 이렇게 지..

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(` ..

+버튼과 -버튼이 있고, count를 화면에 보여주는 컴포넌트가 있다고 생각해보자.컴포넌트를 만들고 작동시키기 전에 TDD는 테스트코드부터 작성해야한다.import { render, screen } from "@testing-library/react";import App from "./App";test("the counter starts at 0", () => { render(); //screen object를 이용해서 원하는 엘리먼트에 접근(ID) const counterElement = screen.getByTestId("counter"); //id가 counter인 엘리먼트의 텍스트가 0인지 테스트 expect(counterElement).toBe(0);});counter..