React

useMemo란?useMemo는 재렌더링 사이에 계산 결과를 캐싱할 수 있게 해주는 React Hook  예시코드calculateValue- 캐싱하려는 값을 계산하는 함수- 순수해야한다 → 인자를 받지않고 모든 타입의 값을 반환할 수 있어야한다.- 만약 다음 렌더링에서 dependencies가 바뀌지않았으면 동일한 값 , 바뀌었으면 calculateValue를 호출const cachedValue = useMemo(calculateValue, dependencies);    예시코드해당 코드는 TodoList가 상태를 업데이트하거나 부모로부터 오는 새로운 props를 받으면 filterTodos가 실행된다.function TodoList({ todos, tab, theme }) { const visibl..

React Testing Library테스트의 종류Unit Test함수나 컴포넌트, 코드의 한 유닛 혹은 단위를 테스트한다.유닛 테스트는 테스트를 최대한 격리시킨다.유닛이 다른 코드의 유닛과 상호 작용하는 것은 테스트하지 않는다.컴포넌트가 의존하는 다른 함수가 있으면 실제 버전이 아닌 테스트용 버전을 사용한다.Integration Test컴포넌트 간, 유닛간의 상호작용을 테스트 한다.Functional Test소프트웨어의 특정 기능을 테스트한다.특정 코드의 함수가 아닌 소프트웨어의 일반적인 동작을 의미한다.React Testing Library는 Functional Test를 권장한다.E2E Test실제 브라우저와 서버를 사용하여 사용자 관점에서 테스트 한다.React Testing LibraryReac..

안녕하세요 ! 정만입니다 이번에 프론트 담당을 맡게 되어 웹사이트 UI/UX를 여기저기 구경하고 있습니다.멋진 웹사이트엔 Three.js를 활용해 3D를 야무지게 활용한걸 볼 수 있었습니다. https://orpetron.com/blog/10-exceptional-websites-showcasing-creative-usage-of-threejs/프로젝트에 적용할진 모르겠으나.. 한번 배워보고 싶어 Three.js를 맛보기 해보았습니다. Three.js란 ?three.js는 웹 브라우저에서 3D 그래픽스를 쉽게 생성하고 렌더링할 수 있게 해주는 라이브러리 입니다. 이 라이브러리는 WebGL 위에 구축되어 있습니다. WebGL(Web Graphics Library)은 HTML5의 요소와 함께 사용되어 브라..

useRef란? 렌더링에 필요하지 않은 값을 참조할 수 있는 React Hook로컴포넌트의 최상위 레벨에서 useRef를 호출하여 ref를 선언한다. const ref = useRef(initialValue)initialValue- ref객체의 current  프러퍼티 초기 설정값으로 어떤 유형의 값이든 지정할 수 있다.- 단 초기 렌더링 이후부터는 무시된다. 반환값- 단일 프로퍼티를 가진 객체를 반환한다.- current    처음에는 전달한 initialValue로 설정된다.    값을 변경할 수 있다.    하지만 state와 다르게 리렌더링을 유발하지않는다.    ref객체를 jsx노드의 ref 어트리뷰트로 react에 전달하면 react는 current 프로퍼티를 설정한다.- 다음 렌더링에서 u..

오늘은 리액트의 페이지 라우팅에 대해서 공유해보도록하겠습니다!🤔 페이지 라우팅이란?경로에 따라 알맞은 페이지를 렌더링하는 과정입니다. 특정 url(/mypage, /edit 등)로 요청이 왔을 때 적절한 페이지(마이페이지, 게시글 편집 등)를 렌더링하는 것입니다.💭 리액트의 페이지 라우팅은?Multi Page Application(MPA)MPA는 서버는 웹페이지를 HTML로 가지고 있고 요청이 들어왔을 때 요청 주소에 맞는 페이지를 응답하는 방식입니다. 그렇기 때문에 페이지를 이동할 때마다 서버에 요청을 보내고 웹페이지가 이동할 때 깜빡거리는 움직임이 생깁니다. 페이지 이동이 매끄럽지 않고 페이지 이동마다 요청을 보내기 때문에 서버 부하의 위험도 있습니다.Single Page Application(S..

안녕하세요. 게으른 만두입니다.이번 특화 프로젝트에서 프론트엔드를 맡게 되어 울면서 공부 중 입니다.이번에 공부한 리액트 내용 공유 드리겠습니다.모든 백엔드가 프론트를 하는 그 날까지 화이팅! 🥹 리액트! 프론트엔드에서는 CDD(Component-Driven Development)로 컴포넌트 단위로 개발합니다. 특정 기능들을 수행하는 작은 모듈로 구성해서 전체 화면을 구성할 수 있습니다. 그러면 재사용성을 높이고, 독립적인 테스트와 개발을 할 수 있으며 디자인 일관성을 지킬 수 있다는 장점이 있습니다. 이번 프로젝트의 컴포넌트는 이렇게 구성되어 있습니다. 오늘의 날짜를 알려주는 헤더, 새로운 TODO 입력 컴포넌트, TODO 리스트 컴포넌트, 리스트 안에 리스트 아이템들이 컴포넌트로 구성되어 있습니다...

useCallback Hook이란 ? useMemo와 마찬가지로 메모제이션 기법을 이용한 Hook으로 함수의 재사용을 위한 Hook이다.리렌더링 간에 함수 정의를 캐싱해준다. 아래의 코드를 보면 첫번째 인자는 리렌더링 간에 캐싱할 함수 정의이고 두번째 인자는 반응형 값들이 들어간다.여기서 반응형 값이 변경(의존성이 변경)되었을 때만 다시 메모제이션된 버전이 변경된다.const memoizedCallback = useCallback( () => { doSomething(a, b); }, [a, b],);   또 다른 예시로 이 코드의 경우 x,y값이 바뀌지않는 경우기존 함수를 계속 반환하고 다음 렌더링 때 기존 함수를 다시 사용한다.만약 이어지는 렌더링에서 의존성을 비교했을 때 전과 달라지면 이..

openvidu를 적으려했지만 시간상의 문제로 적는 zustand이번 프로젝트에 상태 관리 라이브러리로 쓰기로 했고 많은 팀이 쓰는 것 같아백엔드 분들이 프론트 도와줄 때 참고하라고 정리해본다 ^^... Zustans란?JavaScript 및 TypeScript 애플리케이션에서 상태 관리를 위해 사용하는 작고 빠른 상태 관리 라이브러리로대표적 상태 관리 라이브러리인 Redux와 다르게 사용이 간편하고 설정이 단순하다.상태를 중앙 집중식으로 관리하는 대신 상태와 관련된 로직을 훅으로 캡슐화하여 사용할 수 있다.특히 ContextAPI를 사용할 때와 달리 상태 변경 시 불필요한 리랜더링을 일으키지 않도록 제어하기 쉽다.state가 변경될 때마다 React컴포넌트를 업데이트한다.   JavaScript에서 사..