오늘도 조으네💜

React

👉 Vite로 빌드한 프로젝트 배포하기 1. 작업 프로젝트가 github 레파지토리와 연동되어 있어야 한다. git remote add origin http://레파지토리주소.git 2. vite.config.js 에 base url을 수정한다. 참고 : https://ko.vitejs.dev/guide/static-deploy.html#github-pages // vite.config.js export default { base: '/your-repo-name/', // Change this to your GitHub repository name } 3. 깃허브 레파지토리 설정 페이지에서 GitHub Pages 설정으로 이동한 후, 배포 소스를 "GitHub Actions"로 지정한다. GitHub A..

2024. 2. 3.

React

최근 리액트를 사용하여 오브젝트의 크기를 변경할 때마다 실행되어야 하는 기능을 구현하게 되었는데, 화면이 깜빡이는 현상이 발생하여 useLayoutEffect에 대해 알아보게 되었다. 사용법은 useEffect와 동일하다. 📌 useLayoutEffect useLayoutEffect(() => { effect return () => { cleanup }; }, []) 📌 useEffect useEffect(() => { effect return () => { cleanup } }, []) 훅의 형태가 완전히 동일한데, 이 둘의 차이점은 무엇일까? 👉 이펙트 호출 시기 useEffect 훅은 DOM의 레이아웃 배치와 페인트(렌더링)이 끝난 후 비동기적으로 이펙트 함수를 호출시킨다. 렌더링 된 후에 실행되므..

2023. 11. 15.

React

리액트에서 특정 조건에 따라 className을 적용하고자할 때 편하게 사용할 수 있는 라이브러리가 있다. 설치는 아래와 같이 해주고, $ npm install --save clsx 사용 예시는 다음과 같다. import clsx from 'clsx'; // or import { clsx } from 'clsx'; // Strings (variadic) clsx('foo', true && 'bar', 'baz'); //=> 'foo bar baz' clsx의 인수로 객체, 배열, 부울 또는 문자열이 올 수 있다. clsx(true, false, '', null, undefined, 0, NaN); 인수로 들어온 값이 falsy한 value이면 해당 클래스는 추가되지 않고, truthy한 값만 클래스로 적..

2023. 9. 24.

React

React 프로젝트에서 필요한 외부 라이브러리들을 npm 패키지로 설치해서 불러올 수 있지만 간혹 npm 패키지가 제공되지 않는 경우도 있다. 이럴 경우엔 웹에서 외부 스크립트를 불러오는 방법인 HTML 문서의 script 태그를 사용할 수 밖에 없는데, script 태그를 어디서 어떻게 불러와야 할까? 📌 index.html에 script 태그 삽입하기 일반적으로 React 프로젝트에는 public 폴더에 index.html 파일이 있다. 그리고 그 파일 안에 root라는 id를 가진 div가 하나 존재하는 형태이다. React에서는 이 root라는 id가 설정된 div에 동적으로 내용을 채워주는 방식으로 동작하므로 index.html 파일에 script 태그를 넣어주면 된다. 근데, 이 방식에는 한가..

2023. 9. 3.

React

React에서 지원하는 ref와 JavaScript의 EventListener를 사용하여 외부 클릭을 감지할 수 있다. 🤔 ref란 ? ref 는 references 의 약자로, React 에서 특정 컴퍼넌트를 접근하는 데에 사용하거나 값이 변해도 리렌더링하지 않도록 하는 변수로도 사용할 수 있다. useRef라는 훅을 사용하여 ref를 활용한다. 📌 Hook기반의 컴포넌트로 구현하기 const ref = useRef()를 통해 ref 객체를 반환하고, div 요소에 ref={ref}값을 연결해준다. 이후 ref.current를 하면, 위에서 부여한 div 요소에 접근 가능한 id처럼 사용할 수 있다. 컴포넌트의 외부 클릭을 감지하려면 아래와 같이 감지 여부 조건을 활용할 수 있다. if (!ref.cu..

2023. 7. 30.

React

리액트 내에서도 CSS의 Transition과 Animation 속성을 이용하여 애니메이션을 구현할 수 있다. 하지만 상황에 따라 Animation 모듈을 이용하여 구현할수도 있다. 🤔 React에서 animation 모듈을 사용하는 이유 👉 UI가 화면에 보이지는 않지만 DOM에 존재한다. 모달창의 UI를 애니메이션 효과를 주어 화면에 부드럽게 보이고 사라지는 모션을 주고자 할 때, display:none/block 속성은 애니메이션 효과를 줄 수 없기에 height나 opacity를 조절하여 모션을 준다. 이 경우 화면상에는 보이지 않지만, HTML에는 존재하기 때문에 속도 저하나 접근성 면에서도 좋지 않다. 👉 state가 변경되어 재랜더링 시, 애니메이션이 동작하지 않는 경우가 있다. state의..

2023. 7. 26.

React

리액트 상태 관리에 대해 리덕스까지 개념을 익히고 나니 혼란이 왔다.. 상태관리에 도움을 주는 기능에는 useReducer, Context, Redux…들이 있는 것 같은데.. 언제 어떨 때 이 중 하나를 골라 쓰면 되는 건지, 결국 다 상태 관리 역할을 하는 것 같은데..그럼 이 기능들을 이렇게 분리하고 있는 이유는 뭔지..? 에 대한 궁금함이 생겨 이들의 차이점에 대해 찾아보았다. 📌 React Context 일단 리액트에서 props를 전달하는 방식은 탑-다운(부모에서 자식으로)으로 진행이 된다. 전달되는 props의 양이 많아지고 컴포넌트의 깊이가 깊어지면 관리가 번거로워질 수 있다. Context Tree는 컨텍스트 안에 포함된 모든 레벨에서 명시적으로 props를 전달하지 않고, 어디에서든 상..

2022. 11. 16.

React

Jest란? Facebook에서 만든 테스팅 프레임 워크이다. 최소한의 설정으로 동작하며 Test Case를 만들어 애플리케이션 코드가 잘 돌아가는지 확인해준다. 단위(Unit) 테스트를 위해 이용한다. Jest 시작하기 Create React App으로 프로젝트 생성 시 Jest도 바로 사용이 가능하다. 👀 Jest가 테스트 파일을 찾는 방법 파일 명을 .test.js로 설정 파일 명을 .spec.js로 설정 폴더 명을 tests로 설정 Jest 구조 describe: argument (name, fn) 여러 관련된 테스트를 그룹화하는 블록을 만든다. it(test) : argument (name, fn, timeout) 개별 테스트를 수행하는 곳. 각 테스트를 작은 문장처럼 설명한다. expect 값..

2022. 11. 10.