Front-end/React

vite+react 깃헙 배포 방법

연휴동안 정말.. 이거 때문에 고생 너무 많이 했는데 은혜로운 분이 정리해놓은 글 덕분에 해결할 수 있었다. 우선, 에러 상황을 정리해보면 빈화면이다.. 코드를 보면 루트 아래로 어떤 파일도 들어오지 않는다. 당연 콘솔에 찍히는 에러코드도 404. 원인은 파일의 index.html에서 경로를 못찾는 것인데.. 몇몇 사람들은 같은 이유의 해결방법으로 경로를 수정하던데 그 방법으로는 해결되지 않았다. 해결하기 위해서는 몇가지를 수정해야만했다. 1. tsconfig.json에서 "noUnusedLocals", "noUnusedParameters"를 false로 수정. 2. vite.config.ts에서 base 설정값을 '/[레포이름]/' 으로 지정한다. 이 레포이름은 깃헙에 레포이름과 동일하게! 3. .gi..

DOM onclick vs React onClick

아래 두 코드의 차이가 뭘까? ex1 ex2 위의 버튼에서 작성한 onClickButton()의 경우에는 DOM의 Event, 아래는 리액트의 Event이다. 둘의 가시적인 차이는 react에서는 camelCase 컨벤션을 따른다. 또한 DOM Event의 경우에는 외부 자바스크립트를 언제든 쓸 수 있지만 React의 경우에는 이벤트를 반드시 컴포넌트가 생성될 때 명시돼있어야 한다. 참고자료 아티클

[React] React Hooks - useMemo, useCallback, useRef

1. useMemo 의존성 변수가 변하지 않은 경우 기존의 값을 그대로 반환함으로서 렌더링 속도를 빠르게 할 수 있는 hook. useMemo함수는 렌더링이 진행되는 과정에서 실행되기 때문에 유의해서 사용해야한다. 예를 들어 서버에서 데이터를 받아오거나 DOM 객체에 접근해야하는 경우는 useEffect를 사용해야 한다. 의존성 배열을 넣지 않을 경우 렌더링 때마다 항상 실행된다. 혹은 의존성 배열을 빈 배열로 남겨둔 경우 useEffect와 같이 마운트 시에만 호출된다. const memoizedValue = useMemo( () => { return updatedValue(deps1,deps2); },[deps1, deps2] ); 2. useCallback useMemo와 달리 값이 아닌 함수를 반..

CRA에서 craco이용해 @components 절대경로 설정

오랜만에 react로 개발하면서 tsconfig에서 절대경로를 설정을 하는데 안되서 알아보니 cra로 세팅한 경우에는 craco 사용해서 또다른 설정을 해줘야한다. 검색을 조금 해보니 react 버전 18에서는 잘 안된다고 하던데 아래 참고 블로그 따라서 해보니 정상적으로 설정됐다. 며칠동안 설정이 안되서 끙끙 앓았는데 깔끔하게 해결-! Error [Craco-Alias Error] Cannot parse tsconfig.paths.json. Please validate it on https://jsonformatter.curiousconcept.com. 위와 같은 에러 발생 시 tsconfig.paths.json파일 마지막 항목에 ","를 붙엿는지 확인해보자. 지우고 실행하면 해결! json이기 때문에..