https://eui.elastic.co/#/forms/combo-box

 

Elastic UI

The Elastic UI framework (EUI) is a design library in use at Elastic to build internal products that need to share our aesthetics. It distributes UI React components and static assets for use in building web layouts.

eui.elastic.co:443

 

 

(왼쪽) SingleMeeting.tsx (가운데) DateField.tsx (오른쪽) UserField.tsx

 

(왼쪽) DateField.tsx 파일의 달력 아이콘 오류 (오른쪽) UserField.tsx 파일의 아래 화살표 아이콘 오류

 

위에 있는 사이트에서 comboBox 태그를 사용하여 해당 이미지처럼 코드를 짰으나

아이콘을 불러오지 못하는 결과가 나온다.  

 

https://github.com/elastic/eui/tree/main/wiki/consuming-eui#failing-icon-imports

 

eui/wiki/consuming-eui at main · elastic/eui

Elastic UI Framework 🙌. Contribute to elastic/eui development by creating an account on GitHub.

github.com

구글링해서 해당 경로를 알게 되었고, 참고하여 코드에 적용시켰다.

 

상위 컴포넌트인 SingleMeeting.tsx에 해당 코드 작성

 

바로 오류없이 원하던 결과물이 출력되었다.

 

Elastic UI가 yarn에 최적화 되어있고, 해당과정이 필요 없는데

npm을 사용하니 위에 깃허브처럼 적용 시켜줘야 한다.

'TroubleShooting' 카테고리의 다른 글

CommonJS (CJS) Warning  (0) 2024.11.14
process is not defined 해결  (0) 2024.11.13
Localhost ERR_CONNECTION_REFUSED 오류  (0) 2024.11.06

1. 레플릿 

로그인하고 Create Repl 클릭 후 Template에서 찾으면 바로 사용이 가능하다.

첫 화면
template react 설정 후 화면

https://replit.com/

 

Replit – Build software faster

Replit is an AI-powered software development & deployment platform for building, sharing, and shipping software fast.

replit.com

 

2. react.new

URL창에 react.new 입력하면 아래 이미지와 같이 codesandbox.io와 경로명과 동시에 리액트 초기세팅이 되어있다.

 

react.new

'React' 카테고리의 다른 글

상태관리 State  (0) 2024.10.07
Prop[properties : 속성]  (0) 2024.10.04
JSX & Component  (0) 2024.10.02
React 명령어  (0) 2024.07.17
React. 리스트 랜더링 자주 있는 오류  (0) 2024.07.15

+ Recent posts