오열매의 코딩 공간

자바스크립트에서 배열과 객체를 복사할 때, 얕은 복사와 깊은 복사를 구분하여 사용합니다. 얕은 복사 얕은 복사는 객체나 배열의 1단계 프로퍼티와 요소들만 복사하는 것을 말합니다. 객체나 배열 내부에 객체나 배열이 포함되어 있을 경우, 내부 객체나 배열은 참조 관계를 유지하게 됩니다. 얕은 복사는 배열의 slice() 메소드를 이용하여 구현할 수 있습니다. const arr1 = [1, 2, [3, 4]]; const arr2 = arr1.slice(); // 얕은 복사 console.log(arr1[2] === arr2[2]); // true 위의 코드에서 arr1 배열을 slice() 메소드를 이용하여 복사하였습니다. arr2는 arr1과 같은 배열이지만, 내부의 배열 [3, 4]는 참조 관계를 유지하..

not not 연산자와 non-null assertion 연산자는 모두 JavaScript와 TypeScript에서 사용되는 연산자 중 하나이지만, 다른 목적으로 사용됩니다. 1. not not(!!) 연산자 not not(!!) 연산자는 Boolean 값을 반환합니다. 이 연산자는 값을 불린값으로 변환할 때 사용됩니다. 이 연산자를 사용하면, 값이 존재하면 true를 반환하고, 값이 존재하지 않으면 false를 반환합니다. 예를 들어, 다음과 같이 사용할 수 있습니다. const myValue = 0; const myBoolean = !!myValue; // false not not(!!) 연산자는 값이 falsy한 값일 경우 false를 반환합니다. JavaScript에서는 다음과 같은 값을 fals..

이번 예시는 React Query v4 의 useQuery라는 훅의 Option인 queryFn을 예시로 살펴본다. queyrFn는 promise를 반환하는 함수여야 한다. useQuery는 주로 데이터 fetching으로 사용하는데, 이를 위해 fetch 와 axios를 이용한 다양한 표현들을 알아보자. 각 api는 async/await 와 Promise chaining 을 사용하여 나타낼 수 있다. 참고로, axios와 fetch의 성능 차이는 크게 없으며, 아래 함수들의 return값은 모두 Promise{} 이다. axios와 fetch의 성능 차이는 크게 없다. 다만, axios가 가독성이 더 좋고 사용할 수 있는 기능이 많기 때문에 더 선호되는 경향이 있다. fetch는 웹 내장 함수이기 때문..

fetch API에서 async/await과 then은 모두 비동기 코드를 작성하는 방법입니다. 각각의 사용 시기는 코드 구조 및 개발자 선호도에 따라 다를 수 있습니다. async/await를 사용한 비동기 작업 async/await는 비동기 코드를 작성할 때 사용됩니다. fetch API는 네트워크 요청이 비동기적으로 처리되기 때문에, async/await를 사용하여 코드를 동기적으로 작성할 수 있습니다. async function fetchData() { try { const response = await fetch('https://example.com/data.json'); const data = await response.json(); console.log(data); } catch (error..

Fetch fetch는 ES6에서 도입된 네이티브 API로, 브라우저에서 제공됩니다. fetch는 Promise를 반환하며, 사용법은 다음과 같습니다. fetch(url) .then(response => { if (!response.ok) { throw new Error("HTTP error " + response.status); } return response.json(); }) .then(data => { console.log(data); }) .catch(error => { console.error(error); }); Axios axios는 브라우저와 Node.js에서 모두 사용할 수 있는 라이브러리입니다. axios는 Promise를 반환하며, 사용법은 다음과 같습니다. axios.get(url..

1. Outlet Outlet은 정의한 Router에서 특정 path에 해당하는 경로에 children이 있을 때, 해당 컴포넌트를 렌더링하도록 해주는 컴포넌트이다. 반드시 부모 컴포넌트 내에서 정의해줘야 한다. 그래야 해당 컴포넌트의 자식 컴포넌트와 연결이 가능하기 때문이다. * Router.tsx (일부) { path: "/users/:userId", element: , children: [ { path: "followers", element: , }, ], }, # 앞에 "/" 를 붙이면 절대경로(맨 처음부터 시작), 붙이지 않으면 부모 path에서부터 시작하는 상대경로이다. * User.tsx (일부 ... Followers 컴포넌트의 부모 컴포넌트) See Followers! Link 컴포넌트를..

URL에 있는 정보를 가져와 string으로 리턴한다. 1) Router.tsx (일부 / createBrowserRouter 이용) { path: "/users/:userId", element: , }, # /users 에는 유저가 볼 수 있는 정보가 없으므로 바로 할당 2) Home.tsx (일부 / 위 코드의 기본 루트가 Home.tsx로 지정되어 있다.) {users.map((user) => ( {user.name} ))} Link에 의해 해당 버튼을 누르면 user.id가 들어간 url로 이동하게 된다. 3 ) User.tsx (일부) export default function User() { const { userId } = useParams(); return ( {`User with id $..

useNavigate는 사용자가 직접 클릭하지 않아도(Link의 방식으로) 사용자를 다른 곳으로 이동시키고 싶은 경우에 사용한다. import { Link, useNavigate } from "react-router-dom"; export default function Header() { const navigate = useNavigate(); const handleClick = () => { navigate("/about"); }; return ( Home About ); } 위 코드는 About 이라는 버튼을 눌렀을 때, /about으로 사용자를 이동시킨다. useNavigate Hooks를 사용했으며, navigate(" url ") 형식으로 이용한다. (Navigate 와는 다르다! ... Nav..

import { createBrowserRouter, RouterProvider, // Navigate, } from "react-router-dom"; import Home from "./screens/Home"; import About from "./screens/About"; import Root from "./Root"; import NotFound from "./screens/NotFound"; import ErrorComponent from "./components/ErrorComponent"; const router = createBrowserRouter([ { path: "/", element: , children: [ { path: "/", element: , }, { path: "/ab..

(Router.tsx 파일을 따로 분리해서 진행 / App.tsx -> Root.tsx) 1) Router.tsx import { createBrowserRouter, RouterProvider } from "react-router-dom"; import Home from "./screens/Home"; import About from "./screens/About"; import Root from "./Root"; const router = createBrowserRouter([ { path: "/", element: , children: [ { path: "/", element: , }, { path: "/about", element: , }, ], }, ]); export default functi..