오열매의 코딩 공간

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

결과물을 gh-pages에 올릴 수 있다. 해당 파일들을 무료 웹사이트로 만들어 전세계로 배포할 수 있다. 시작 전, 배포를 원하는 저장소의 공개 범위를 public 으로 설정해야 한다. 1) gh-pages 패키지 설치 npm i gh-pages 또는 yarn add gh-pages 2) package.json에 코드 추가 ... "scripts": { ... "deploy": "gh-pages -d build", "predeploy": "npm run build" }, ... "homepage": "https://(사용자명).github.io/(저장소명)/" 3) 명령어 실행 npm run build npm deploy 또는 yarn build yarn deploy 몇 분 후에 ' https://(사..

1) 터미널에서 vi ~/.gitconfig 입력 2) i 를 눌러 편집모드 진입 3) [alias] 에 단축어 입력 4) esc로 입력모드 종료 5) :w로 저장, :q로 나가기 --- code ~/.gitconfig 에 들어가서 설정해도 된다. +) # git config --global core.editor "code --wait" + git config --global -e 로 직접 들어가서 편집 가능

용도: context는 React 컴포넌트 트리 안에서 전역적(global)이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법입니다. 그러한 데이터로는 현재 로그인한 유저, 테마, 선호하는 언어 등이 있습니다. * context 폴더 ~ 기본 파일 (예시 활용, 다크모드 구현하기 ... DarkModeContext.jsx) - 선언 import { createContext, useContext } from "react"; export const DarkModeContext = createContext(); export function DarkModeProvider({ children }) { const [darkMode, setDarkMode] = useState(false); const togg..

Creat React App 을 이용하여 프로젝트를 생성할 때, 다양한 방법이 있다. 크게 4가지로 나누어 살펴본다. (npm+js / npm+ts / yarn+js / yarn ts) 설치 전, node.js와 npm은 설치되어 있어야 한다. * NPM 이용 공통) create react app 설치 ... (프로젝트 생성 전, 최초 1회) npm install -g create-react-app 1) Vanila JS 프로젝트 npx create-react-app 2) TypeScript 프로젝트 npx create-react-app --template typescript * Yarn 이용 공통) ... (프로젝트 생성 전, 최초 1회) 1. yarn 세팅 corepack enable yarn set..