코딩연습장

오늘은 검색페이지 작업을 진행했다. import styled from "styled-components";import Button from "../components/common/Button";import PostItem from "../components/home/PostItem";import useSearchedMusicContext from "../hooks/useSearchedMusicContext";const Search = () => { const { searchText, handleSearchText, SearchHandle, searchedSongs } = useSearchedMusicContext(); return ( ..

이번 팀프로젝트는 내배캠에서 react로 진행하는 첫 팀프로젝트이다. 우리팀은 노래를 공유하는 사이트를 만들기로 결정하였다.로그인과 회원가입으로 유저정보를 저장하고, 로그인한 사용자에 한하여 게시글 작성같은 인터랙션을 허용한다.게시글은 supabase에 아직 익숙하지않아 영상데이터는 youtube url을 사용하여 iframe으로 보여주기로 하였다.노래마다 게시글제목, 노래제목, 가수명, 어울리는 계절, 해시태그를 입력하여 서버에 데이터를 보내고각 데이터뭉치들을 메인페이지에서 계절마다의 탭으로 나눠 보여준다.각 게시글 카드는 좋아요를 추가할 수 있으며, 좋아요 범위 외를 클릭하면 해당 카드의 상세페이지로 이동하게된다.그리고 로그인, 회원가입을 제외한 모든 페이지에는 Layout컴포넌트를 생성하여 동일한 ..

const Comp = () => { const [count, setCount] = useState(0) const expensiveHandle = () = > { //엄청나게 오래걸리는 명령코드 setCount(prev => prev+1) } return ( action )}export default Compaction버튼을 누르면 리렌더링이 유발되고, 기존의 렌더링 방식에서는 한번에 하나씩 렌더링이 처리가 되었다. 이는 렌더링 연산에 들어가면 중지할 수 없었음을 의미한다.앞 연산이 매우 길어질 때 문제가 발생하는 것이다. 이러한 문제를 해결하고자 디바운싱, 쓰로틀링같은 방식들이 사용되었었다.함수실행에 제약을 거는 것인데, 이 두가지 방식이 블로킹 렌더링의 근본적..

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 컴포넌트를 없애고, ..