본문 바로가기

전체 글

 (397)
webpack dev server와 hot raloading하는 설정 출처: https://www.youtube.com/watch?v=RCb0UF7Lu90&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn&index=20 Hot module replacement 알아야함 핫 리로딩(hot reloading)해주는 두 개의 패키지 1. react-refresh 2. @pmmmwh 위의 2개 패키지를 업데이트 해주는 터미널에 입력하는 명령어 1. npm install react-refresh @pmmmwh/react-refresh-webpack-plugin -D 이를 위해 개발용 서버도 필요함. 아래는 이를 위한 터미널에 입력하는 명령어 2. npm install -D webpack-dev-server 3. package.json에서 scripts 명령어..
React Router Dom v6 (중요) 출처:https://velog.io/@kim98111/Routing  (글에 오타는 많지만 좋은 글)아래는 글에서 중요 부분만 표시한것(그냥 윗글을 보는게 효과적). 동적 라우팅에 관해서는 아래 내가 정리한 글 보기.컴포넌트를 랜더링하는 것을 라우팅(routing)이라고 한다.path 어트리뷰트Route 컴포넌트에는 path 어트리뷰트를 설정해야 합니다. path 어트리뷰트에는 "특정 URL의 경로값"을 작성해줍니다.Routes 컴포넌트 내 작성된 Route 컴포넌트의 path 어트리뷰트 값을 현재 URL 경로값과 일치하는지 확인하고, 정확히 일치하는 하나의 Route 컴포넌트를 활성화시키게 됩니다.기존 react-router-dom v5에서 exact라는 어트리뷰트 작성한 것과 동일하게 매칭되는 Rou..
hook과 클래스 컴포넌트 각각에서 url의 쿼리스트링을 가져오는 방법 react router 6에 들어오면서 더 이상 자식컴포넌트에서 부모를 통해 얻은 props를 통해 history, location, match 에 관한 정보를 얻을 수 없다. 그리고 클래스 컴포넌트에서는 아래와 같이 코딩하면 search에 접근할 수 없다며 오류가 발생한다. hook에서 url의 쿼리스트링을 가져오는 방법은 아래서 설명하겠지만 클래스에서 그렇다면 어떻게 url의 쿼릴스트링을 가져올까? 의외로 문제는 이상하리만치 쉽게 풀렸다. 바로 window객체를 사용해서다. 코드는 아래와 같다. 너무 간단하게 풀려서 정말 window객체를 써도 되는가 걱정이 남는다. 이에 대한 추가정보는 다음에 알아보기로 한다. 2. hook을 이용한 url 쿼리스트링 가져오기. react router v6로 변경되..
URL에서 쿼리스트링 값 가져오기 참고: https://velog.io/@kim_unknown_/React-React-Router-Dom-v6 아래와 같은 방식으로 URL에서의 ? 뒤에 있는 queryString(search값)값을 가져올 수 있다. const GameMatcher = () => { const location = useLocation(); const navigate = useNavigate(); // let urlSearchParams = new URLSearchParams(location.search.slice(1)); // console.log(urlSearchParams.get('hellow')); // console.log(urlSearchParams.get('query')); // console.log(urlSe..
URL과 URLSearchParams 출처:https://www.zerocho.com/category/HTML&DOM/post/5b3ae84fb3dabd001b53b9ab 이번 시간에는 HTML5의 URL과 URLSearchParams 객체에 대해 알아보겠습니다. IE에서는 안 되지만, 모던 브라우저에서는 사용할 수 있는 기능입니다. 웹은 주소를 기반으로 동작하기 때문에 주소를 자유자재로 다룰 수 있으면 좋습니다. 특히, 쿼리스트링(sear부분)을 파싱하는 것과 같은 귀찮은 작업을 간단히 처리할 수 있어 편리합니다. 노드의 url 모듈과도 비슷합니다. 사용 예시를 봅시다. URL 생성자에 주소를 넣어 인스턴스화하면 됩니다. const url = new URL('https://www.zerocho.com:8080/category/HTML');..
useCallback에 관하여(fetch예시 나옴) 요약: useCallback은 2개의 인자를 취한다. 첫번째인자는 함수이고 두번째 인자는 배열이다. 그리고 배열의 값중 어느 하나라도 변경되었을때만 첫번재 인자로 전달된 함수 자체가 다시 반환된다. (우선 React.memo 예시는 제외하고 봄) 출처: https://www.daleseo.com/react-hooks-use-callback/#google_vignette React Hooks: useCallback 사용법 이번 포스팅에서는 useMemo() 함수와 더불어 성능 최적화에 사용되는 React의 useCallback() hook 함수에 대해서 알아보겠습니다. 함수 메모이제이션 useCallback()은 함수자체를 메모이제이션(memoization)하기 위해서 사용되는 hook 함수입니다. 첫번째..
vscode launch.json 파일과 브라우저 안뜨는현상 react를 사용하여 정상적으로 프로젝트 빌드까지 했는데도 브라우저에서는 계속 뺑뺑이 표시만 돌고 있고 정상적으로 실행이 되지 않는 문제의 원인은 아래의 launch.json때문이다. 이 파일을 반드시 지워야 한다. 그렇지 않으면 정상적으로 실행이 되지 않는다. 아래와 같이 브라우저가 계속 뺑뺑이 표시만 돌고 있다면 반드시 위의 파일이 있는지 확인해야 한다.
hooks의 userState와 useRef의 다른점 hooks의 userState와 useRef의 다른점useState, useRef모두 DOM을 직접적으로 건드릴때 사용된다. 하지만 상태를 변화시킬때 setState를 사용하면 (return 문안에서)리랜더링이 되지만 useRef에 관한 상태변경은 리랜더링을 하지 않는다. ㅈ 따라서 화면은 바뀌길 원하지 않고 값만을 바꾸고 싶은 경우 useRef를 사용하면 됩니다!!!!

티스토리툴바