짬짬이기록하기

- immutable type : string, number, boolean, null, undefined, symbol- mutable type: 위의 type을 제외한 모든 것, 즉 Object immutable 예시 let name = "foo"; // "foo"라는 메모리가 생성되고 name은 해당 주소(001)를 참조함 let newName = name; // name이 참조하는 주소(001)를 참조함name = "zoo"; // "zoo" 메모리가 생성되고 name은 해당 주소(002)를 참조함console.log(newName) // "foo" console.log(name) // "zoo"console.log(name === newName) // falsemutable 예시: 자바스크립트에..

...

Promise : 비동기 작업을 처리하는 객체 const myPromise = new Promise((resolve, reject)=>{ setTimeout(()=>{ const textValue = prompt("인사해주삼"); if (textValue === "hello") { resolve("sucess"); } else { reject("fail"); } }, 2000)})myPromise .then((msg)=>{ console.log(msg); }) .catch((err)=>{ console.log(err); }) .finally(()=>{ console.log("finally") }); promise.then( function(result) { /* 결과(resul..

1.전체.forEach((item) => { if (item === 내정보) ...})2.내정보.forEach((myItem) => { if (전체.includes(myItem)) ...})2번의 방식이 순회방식을 절약할 수 있다. const allEmails = ['a@test.com', 'b@test.com', 'c@test.com'];const myEmails = ['b@test.com', 'x@test.com'];myEmails.forEach((email) => { if (allEmails.includes(email)) { console.log(`${email} 은 전체 목록에 있음`); } else { console.log(`${email} 은 전체 목록에 없음`); }});..

항목 store.getState() useSelector()사용 위치컴포넌트 외부, 일반 함수React 함수형 컴포넌트 내부자동 리렌더링 여부❌ 상태 변경 시 자동 반영되지 않음✅ 상태 변경 시 컴포넌트 리렌더링됨용도비동기 처리, 외부 모듈, 초기 설정 등UI에서 상태를 구독하고 표시할 때리액트 훅인가?❌ 아니요✅ 예, 훅입니다

하위 컴포넌트들의 로딩이 생기는 모든 상황에 대해 Suspense의 fallback 로딩으로 대응함 }> // Error message도 하나로 보여주겠다. }> page 단위를 로딩할 때 lazy 로딩을 사용할 수 있다. (page 단위의 컴포넌트에 접근할 때 로드해옴, 주로 app.jsx 에서 사용할 수 있음)const MoviePage = React.lazy(()=> import("./pages/MoviePage")); 컴포넌트 단위안에서 로딩할 때는 (컴포넌트 내에 data fetch를 해올 때 suspense를 사용할 수 있다) return useQuery({ queryKey: ['current-user-profile'], ..

Outlet : Routes, Route에 의해 선언된 Nested Routing을 구현할 때, 하위 route들이 표현될 위치를 지정함 // routes 구조 예시 }> } /> } /> // DashboardLayout.tsximport { Outlet } from 'react-router-dom';const DashboardLayout = () => { return ( Dashboard {/* 자식 라우트가 이 위치에 렌더링됨 */} );};export default DashboardLayout;

import { useQueries } from "@tanstack/react-query";import axios from "axios";const Reactquery = () => { const ids = [1, 2, 3, 4]; const fetchPostDetail = (id) => { return axios.get(`http://localhost:3004/posts/${id}`); }; const result = useQueries({ queries: ids.map((id) => { return { queryKey: ["posts", id], queryFn: () => fetch..