시작하는 중

import React, {useState, useEffect} from 'react'; import axios from 'axios'; export default function App() { const [resData, setResData] = useState(null); useEffect(() => { axios.get('어떤 URL').then((res) => setResData(res.data)); }, []); ... 내가 흔하게 짜던 코드이다. 3번째 리액트 프로젝트인데 2번째 프로젝트에서 이렇게 하는게 맘에 안들어서 loader 깔짝이다가 redux랑 같이 어떻게 사용할 수 있을까 하다가 끝나버렸는데 이번에는 좀 다르게 해보려고 한다. ? 뭐가 문제일까 useEffect 훅은 react.d..

글의 목적웹팩 공부 전에 모듈, 번들러, 모듈 번들러의 개념과 등장한 이유에 대해 살펴보려고 한다.ES6 이전의 자바스크립트모듈이 있기 전의 JS는 다음과 같이 파일들을 관리했다.이런식으로 관리하였고, A라는 JS 파일을 분할하기 위해서는 꽤나 그럴 듯 해보이지만, 스크립트를 로드한 브라우저 자체의 전역 컨텍스트에서 각 모듈 간의 충돌이 발생했다. 예를 들어, A1.js에서 "a"라는 변수명을 사용하고 있었고, A2.js에서도 "a"를 사용하고 있다면, 충돌이 일어났다.// A1.js var a = 1; // A2.js var a = 2; 즉, 모듈 간의 스코프가 구분되지 않았고, 다른 파일을 오염시키는 경우가 발생했다. 그래서 다른 파일이더라도 오염을 방지하기 위해서 변수명을 모두 다르게 만들고, 자바..

찾아보게된 이유 생각해보니까 라우터가 큰 기능은 없을 것 같아서?? 그냥 어떤 상태와 파라메터를 가지고 redux가 필수가 아니니까 context API 같은 것으로 무언가를 하는 건 아닐까? 하는 생각에 시작했다. 사실 예전부터 해보고 싶었는데 오픈소스를 읽을 실력이 안됐음... ㅠㅠ 글의 react-router 깃허브의 소스코드 커밋 헤더는 656ebc3c987de5d56d6ac62beb07e18ef6e68381입니다! 버전 "react-dom": "^18.2.0", "react-router-dom": "^6.10.0", createBrowserRouter의 진행 과정 react-router-dom 6.4부터 생긴 createBrowserRouter로 라우터를 생성한다. 여기에 넘겨지는 것은 Obje..

이 글은 2023년 5월 1일자 커밋인 1ee0014caa7ecf91ac147dca3801820020a4b8a0헤드를 기준으로 작성하였습니다. yarn dev를 하면 vite에서 일어나는 일 자신의 프로젝트에서 yarn dev를 하면 package.json에서 scripts의 "dev"가 실행된다. 우리 프로젝트의 package.json // package.json ... "scripts": { "dev": "vite", "build": "tsc && vite build", ... 그렇다면 vite가 실행된다. 이는 vite의 package.json으로 이동된다. 여기서 "bin"이 우리를 반겨준다. vite의 package.json // vite's package.json ... "bin": { "vi..