프론트 개발 블로그

Material UI(@mui/material)구글 머티리얼 디자인 기반 UI 컴포넌트가장 널리 쓰임. 버튼, 다이얼로그, 셀렉트 등 포함MUI Base(@mui/base)스타일 없는 순수 기능 컴포넌트스타일링 자유도 높음 (headless UI)Joy UI(@mui/joy)MUI 팀이 만든 다른 디자인 시스템머티리얼이 아닌, 감성적이고 우아한 UI 디자인MUI System(@mui/system)스타일 유틸리티 (spacing, layout 등)Emotion 기반의 스타일링 도구 모음

문제 리액트에서 컴포넌트 모듈 가져올 때 경로 설정하는 방법. depth가 깊어질수록 경로 설정이 불편하기 때문에 사용. 해결 jsconfig.json (타입 스크립트를 사용한다면 tsconfig.json) 파일을 생성하여 옵션을 작성하면 된다. { "compilerOptions": { "baseUrl": "src" }, "include": ["src"] } create-react-app.dev/docs/importing-a-component/#absolute-imports

Error: Node Sass version 5.0.0 is incompatible with ^4.0.0. 문제발생 CRA 에서 npm install node-sass 설치 시 위와 같은 에러 문구가 발생하였다. 왜? CRA 사용 시 미리 설치된 sass-loader 에서 발생하는 에러로 node-sass@latest 는 v.5.0.0 버전이고 (내가 설치한 node-sass 가 5.0.0 버전) sass-loader는 v4.0.0을 예상하므로 버전이 호환되지 않음으로 생긴 에러라고 한다. -> stackoverflow 인용 노드 버전에 지원 정책에 따라 지원되는 node-sass 버전이 다르므로 node-sass 설치 시 노드 버전을 확인해봐야 한다. github.com/sass/node-sass/re..

애플리케이션에서 긴 목록을 렌더링 하는 경우 ' Windowing' 이라는 기법을 사용하는 것을 추천합니다. 이 기법은 주어진 시간에 목록의 부분 목록만 렌더링 하며, 컴포넌트를 다시 렌더링하는 데 걸리는 시간과 생성된 DOM 노드의 수를 크게 줄일 수 있습니다. React 공식 문서에서 추천하는 windowing 라이브러리 react-window react-virtualized react-window VS react-virtualized NPM Trends 사이트로 확인 해보면 react-virtualized 패키지의 사용자가 더 많은 것을 확인 할 수 있습니다. 그러나 React-virtualized는 React-window 패키지의 비해 크기가 무겁기 때문에 React-virtualized 에서도 ..

Ref 란? React 에서 컴포넌트에 접근할 수 있는 특수한 어트리뷰트를 말합니다. React.createRef() 함수 / 콜백 함수 / 문자열(레거시 API) 로 생성할 수 있습니다. ref 어트리뷰트가 콜백 함수인 경우, 함수는 DOM 엘리먼트나 Class 인스턴스를 인자로 받습니다. Ref 사용 함수형 컴포넌트를 사용할 땐 : useRef() Hook API 클래스형 컴포넌트를 사용할 땐 : React.createRef() 메서드 React 에서 DOM 을 직접 선택 해야 할 떄, Ref 를 사용합니다. 특정 엘리먼트의 크기나 위치를 선택 해야 할 때 포커스 설정을 해야 할 때 스크롤 바의 위치나 설정 등 미디어의 재생을 관리 할 때 (VideoJS 등 HTML5 비디오 관련) 서드 파티 DOM..

Refs 전달하기 React.forwardRef 는 부모 컴포넌트에서 자식 컴포넌트로 ref 를 전달하여 부모가 자식 ref 를 참조 하는 기술입니다. - DOM 컴포넌트에 Refs 전달하기 - 컴포넌트 라이브러리 관리자를 위한 참고 사항 - 고차 컴포넌트(HOC)에서의 forwarding Refs - 개발자도구(DevTools)에 사용자 지정 이름 표시하는 방법 이 기법은 잘 사용되지 않지만, 아래의 두 시나리오에서는 특히 유용합니다. DOM 엘리먼트로 ref 전달하기 고차 컴포넌트(HOC) 로 ref 전달하기 DOM 컴포넌트에 Refs 전달하기 1 2 3 4 5 6 7 function FancyButton(props) { return( {props.children} ); } React 컴포넌트는 렌더..

context 를 이용하면 컴포넌트 단계마다 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다. 일반적인 React 애플리케이션에서 데이터는 위에서 아래로 props 를 통해 전달되지만, 애플리케이션 안의 여러 컴포넌트들에게 전해줘야 하는 props의 경우 이 과정이 번거로울 수 있다. context 를 사용하면 트리마다 명시적으로 props를 넘겨주지 않아도 많은 컴포넌트가 이러한 값을 공유할 수 있다. 언제 context 를 써야 할까 하위에 있는 여러 컴포넌트들에게 props를 전달 해야 할 때 Context 를 이용하면 중간에 있는 엘리먼트들에게 props 를 넘겨 주지 않아도 전달 할 수 있다. context 를 사용 전에 고려 해야 할 것. context 를 사용하면 ..

Cannot create a project named "Mashup-Todolist" because of npm naming restrictions : * name can no loger contain capital letters Please choose a different project name. 리액트 프로젝트 생성 시, 프로젝트 네이밍에 대문자가 들어가면 안된다. 리액트 프로젝트 이름은 소문자로!

// index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import * as serviceWorker from './serviceWorker'; ReactDOM.render( , ); React.StrictMode 는 버전 16.3에 추가된 기능입니다. StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구입니다. Fragment와 같이 UI를 렌더링 하지 않으며, 자손들에 대한 부가적인 검사와 경고를 활성화 합니다. StrictMode는 개발 모드에서만 활성화되기 때문에 프로덕션 빌드에는 영향을 끼치지 않습니다. Create-react-app 으로 웹앱을 설정하면 ..

jest 를 설치 후 npm start 혹은 yarn start 로 리액트를 브라우저에 띄우려고 할 때 아래와 같이 에러가 발생한다. 프로젝트 종속성 트리에 문제로 Create React App 의 버그는 아니고 앱에서 수정해야 한다고 나왔다. 해당 매뉴얼 대로 확인해보니 Create React App 으로 리액트를 설치 했을 때 react-scripts 패키지에 jest가 이미 설치되어 있어서 에러가 나고 있었다. yarn run v1.22.1 $ react-scripts start There might be a problem with the project dependency tree. It is likely not a bug in Create React App, but something you nee..