hwlink

yarn remove yarn remove test 라는 명령은 test라는 패키지를 프로젝트에서 제거하는 것을 의미합니다. test라는 패키지는 package.json, yarn lock에서 제거됩니다. dependencies, devDependencies등 모든 타입에서 패키지가 삭제됩니다. 만약 삭제하고 완전히 제거가 안되었다면 yarn install을 해줌으로서 업데이트를 해줍니다.

Coding/React 2022. 5. 8. 00:03

React Testing Library React-testing-library란 React에서 제공하는 Testing 라이브러리입니다. Principal 우리는 웹 페이지가 사용되는 방식과 매우 유사한 테스트를 작성하도록 권장하는 방법과 유틸리티만 노출하려고 합니다. 유틸리티는 다음 지침 원칙에 따라 이 프로젝트에 포함됩니다. 렌더링 구성 요소와 관련된 경우 구성 요소 인스턴스가 아닌 DOM 노드를 처리해야 하며 구성 요소 인스턴스를 처리하도록 권장해서는 안 됩니다. 일반적으로 사용자가 사용하는 방식으로 응용 프로그램 구성 요소를 테스트하는 데 유용해야 합니다. 우리는 컴퓨터와 종종 시뮬레이션된 브라우저 환경을 사용하고 있기 때문에 여기에서 약간의 절충안을 만들고 있지만 일반적으로 유틸리티는 사용하도록 ..

Coding/React 2022. 4. 22. 23:37

useCallback 메모이제이션된 콜백을 반환합니다. *메모제이션: 메모이제이션은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. 동적 계획법의 핵심이 되는 기술 const memoizedCallback = useCallback(() => { doSomething(a, b); }, [a, b]); useCallback은 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용하는 함수. useCallback은 첫 번째 인자로 넘어온 함수를, 두 번째 인자로 넘어온 배열 형태의 함수 실행 조건의 값이 변경될 때까지 저장해놓고 재사용 인라인 콜백과 그것의 의존성 값의 배열을 전달하세요...

Coding/React 2022. 4. 21. 23:31

✅ 자동반사적 npx create-react-app 나는 리액트를 처음 시작했을 때 빠르게 배우기 위해서 자바스크립트 기초만 익힌 상태로 npx create-react-app를 터미널에 입력 후 공식문서와 강의 등을 보고 바로 설계를 시작하였다. (실제로 공식문서에서도 처음 리액트를 접한다면 설계구조에 대하여 5분이상 투자하지말라 하였다.) 하지만 이제는 혼자가 아닌 많은 팀원들과 작은 다양한 프로젝트를 진행해보면서 처음에 제대로된 설계 없이 진행해보니 나중엔 팀원끼리 서로 다른 설계구조로 작성하여 어떤식으로 유지 보수해야할지 감도 안잡히고 유지보수를 하게 된다면 많은 코스트가 발생하였다. 이러한 맥락에서 프로젝트 초기에 어떤 패턴으로 리액트를 설계할 것 인지에 대한 중요성이 커지게 되었고, 해당 글에서..

Coding/React 2022. 2. 20. 23:34

기업협업으로 출근하게 될 기업이 Recoil 기술스택을 사용 하길래 Recoil 공식문서를 참고하여 개념정리를 미리 하고 출근하려한다. 공식문서: https://recoiljs.org/ko/docs/introduction/getting-started 등장 배경 비교적 간단한 프로젝트엔 무겁게 느껴질 수 있는 Redux와 MobX, 그리고 이들은 근본적으로 React를 위해 출시된 것이 아니다. React의 hooks와 어울리면서 React에 필요한 것들만 React스럽게 제작한 상태관리 라이브러리 Recoil 개요 Recoil을 사용하면 atoms (공유 상태)에서 selectors (순수 함수)를 거쳐 React 컴포넌트로 내려가는 data-flow graph를 만들 수 있다. Atoms는 컴포넌트가 ..

Coding/React 2021. 12. 26. 15:15

리덕스란 무엇인가 기초배경 :: MVC 기존에는 1979년에 고안된 MVC 디자인 패턴을 사용하였다. 관심사의 분리에 따라 분업화하는 디자인 패턴이다. Model: 정보, 데이터 리액트(State) Controller: 특정 동작에 따라 Model, View 조작, 변경을 위해 Model, View 모니터링, 이벤트감지 및 처리 View: 브라우저 화면, 유저 인터페이스, Controller에 변경 통지 하지만 단점도 존재하는데 아래 그림처럼 하나의 컨트롤러가 여러 모델에 걸쳐 데이터를 조작하고 있는 상황. 모델은 여러 뷰를 업데이트 하고, 뷰 또한 컨트롤러를 통해 모델을 업데이트 합니다(양방향 데이터 바인딩) 바인딩: 뷰와 데이터를 연결하는 것 컨트롤러가 일으킨 조작이 정확히 어떤 요소들에 대한 업데이..

Coding/React 2021. 12. 23. 02:03

Style Component: styled-coponents 는 자바스크립트의 태그가 지정된 템플릿 리터럴과 CSS 의 기능을 사용하여 구성 요소에 반응하는 스타일을 제공하는 CSS-in-JS 스타일링을 위한 프레임워크입니다. 2차 프로젝트를 진행하면서 기존 사용하던 scss가 아닌 styled component를 적용하여 진행하게 되었다. - 스타일 컴포넌트 사용하는 이유. 먼저 스타일을 적응하는 방법 1. 외부 CSS 파일에 CSS코드를 작성하여 className으로 속성을 전달 - 규모가 커질수록 css 부피가 커진다. sass를 적용하면 조금 나아지지만 그래도 부피가 너무 크다. 2. inline CSS를 react component 에 삽입 - 인라인 스타일은 미디어 쿼리를 사용할 수 없고, 브..

Coding/React 2021. 12. 17. 13:19

setState는 비동기로 동작 리액트에서 setState를 사용하여 상태를 업데이트할 경우 즉시 반영되지 않는다. 리렌더링이 된 후에 업데이트 된다. (state 변경 > 리렌더링 > state반영) 여러개의 state를 컨트롤하는데에는 이점. 배칭이란? 배칭은 React가 더 나은 성능을 위해 여러 개의 state 업데이트를 하나의 리렌더링 (re-render)로 묶는 것을 의미한다. 예를들어, 하나의 클릭 이벤트 안에 두 개의 state 업데이트를 가지고 있다면, React는 언제나 이 작업을 배칭하여 하나의 리렌더링으로 만든다. 다음과 같은 코드를 실행해보면, 매 번 누를 때마다, state를 두 번 변경 하였지만, React는 단 한 번의 렌더링만 수행한다. const [num, setNum] ..

Coding/React 2021. 12. 7. 21:56