antd Ant Design 양식에 색상 선택기 추가 은 효율적인 사용자 인터페이스 구축을 위한 매우 편리한 디자인 시스템입니다. 작업하는 동안 양식에 색상 선택기를 추가해야 할 필요성에 직면했습니다. 불행히도 그러한 구성 요소는 없습니다. Antd 문서는 colorpicker를 만들기 위해 타사 라이브러리를 사용할 것을 제안합니다. 결국 나는 나와 같은 문제에 직면하게 될 모든 사람을 위해 npm 패키지를 작성하는 것이 도움이 될 것이라고 결... antdtypescriptjavascriptreact React, AntD 및 Tailwind: CSS 충돌 수정 React, 및 (아마도 시장에서 구할 수 있는 대부분의 다른 UIKIT)을 사용하는 경우 일부 CSS 충돌이 발생할 수 있습니다. 예를 들어 AntDModal 구성 요소는 바닥글에 기본적으로 "확인"및 "취소"버튼을 표시합니다. 아래 스크린샷에서 볼 수 있듯이 확인 버튼이 제대로 표시되지 않습니다(파란색이어야 함). 실제로 Tailwind는 투명한 배경색을 적용하는 반면 AntD는 파란색 ... antduikittailwindcssreact Antd Calendar 패널에서 첫 번째 날짜와 마지막 날짜 가져오기 Antd Calendar 패널에서 첫 번째 날짜와 마지막 날짜 가져오기 달력이 있습니다. 물론 01은 7월의 첫 번째 날짜이고 31은 7월의 마지막 날짜입니다. 이 대신 경우에 따라 패널에서 첫 번째 날짜와 마지막 날짜를 얻고 싶을 수도 있습니다. 6월 26일과 8월 7일. Antd 캘린더는 onPanelChange 이벤트를 제공합니다. 우리는 이벤트에 코드를 작성할 것입니다. Antd는 m... antddatereactwebdev [에러 기록]모달이 팝업으로 뜨지 않아! 에러 상황 antd에서 modal을 import해서 적용시켰는데 브라우저에서 모달이 기대한대로 팝업처럼 뜨지않고 화면 맨 아래에 나오는 상황. 또, ok를 눌러도 사라지지 않는 문제가 발생. 에러 해결 모달에 적용할 CSS도 import를 해주어야한다! 잘 모르겠을 때는 라이브러리의 DOC를 읽어보는 습관을 기르자!... antdmodalantd cssantd [Vue2] Antd으로 custom validator 만들기 Vue2 AntDv 1.7.8 antd는 기본으로 편하게 사용할 수 있는 validator를 제공해준다 Vue.js 에서는 위와 같이 속성값을 주어서 사용하면 된다 antd에서 기본으로 제공하는 type은 다음과 같다 ✏️ Type ⬆️ 이런 형태로 속성값을 입력하면 알아서 입력 중 바로바로 유효성 체크를 해준다 (너무 편해 ...!!) 그러면 이번엔 기본으로 제공해주는 validator 이... FEvue.jsantdFE [IT-article-archive]#6 글 쓰기 화면 UI 및 기능 만들기(feat. 오류 수정) 전체 글 목록을 보여주는 화면은 만들었지만 아직 새로운 글을 등록하는 창을 만들지 않았습니다. 이번에는 비어있는 /post주소에 새로운 글을 작성하는 로직을 만들어볼려고 합니다. 상단의 네비게이션에서 메뉴가 선택 됐을 때 해당 메뉴에 selected속성을 부여해서 유저가 현재 선택된 페이지를 직관적으로 알 수 있게 하는 기능을 넣었습니다. 그런데 위의 사진처럼 Post가 선택됐을 때는 해당 ... ReactantdUIFirebaseFirebase Early Exit Pattern , 각각의 요소에 조건부렌더링 걸기 , input tag의 readOnly속성 , antD , Material UI , npm라이브러리 사용해보기 각각의 요소마다 렌더링 거는 방법 list라는 폴더가 있다. presenterItem이라는게 하나더 있다. 이 파일은 각각의 요소마다 렌더링 걸기위해 만든 파일이다. 각각의 요소마다 조건부렌더링 주기 설명하기 앞서 구조가 어떻게 되어있는지 짚고가자면 container에서 presenter로 댓글정보를 뿌려준다. presenter에선 data를 받아서 map으로 list에 뿌려준다. 그 각각의... input tag readOnly속성Early Exit Pattern댓글리스트React-player라이브러리 프레임워크 차이MaterialUI프레임워크각각의 요소에 렌더링 걸기antd라이브러리Early Exit Pattern antd vue 새로 고침 현재 페이지 루트 유지, 선택 메뉴 유지,menu 선택 작업 유지 쓸데없는 말은 하지 말고 코드를 올려라! 중점: 1,selectedkeys를 $route로 설정합니다.path 주소 2, a-menu-item의 키를 갈 주소로 설정 페이지 새로 고침, 성공! 추가 정보: vue 경로에 따라 페이지 새로 고침 (메뉴 바꾸기 페이지 새로 고침) 페이지를 새로 고치는 방법은 다음과 같습니다. 하나는 localtion입니다.reload();그러나 이것은 페이지를 ... antdvue경로메뉴menu antddatepicker 획득 시간이 기본적으로 8시간 적은 문제 해결 1. 확장 날짜 포맷 방법 2. 선택한 날짜의 시간을 포맷 처리하여 최종적으로 얻은 시간은 현재 시간이다 new Date(value).format(“yyyy-MM-dd hh:mm:ss”) 보충 지식:antddatepicker 설정 시작 시간과 기한 계산 종료 시간 및 토요일 제거 datepicker는moment 형식의 시간을 value로 사용해야 하지만, 이value를 조작할 때moment를... antddatepicker시간8시간 antd에서 setFieldsValue와 defaultVal의 사용법 코드는 다음과 같습니다. 인쇄해 내다 더 신기한 것은 이 코드가 원래 잘 작동하는데 아무런 문제가 없는데 동료의 컴퓨터에서 위와 같은 문제가 발생한다는 것이다. 내 컴퓨터에도 이 문제가 생겼지만 코드는 고친 적이 없다 나중에 이렇게 코드의 기본값을 설정하면 나타난다 반드시 보충 지식:antd4에서 Form 구성 요소 initialValues 설정의 초기 값이 잘못되었습니다. setFields... antdsetFieldsValuedefaultVal antd+react 프로젝트 이전vite의 해결 방안을 상세히 설명합니다. vite라는 도구를 알게 되면 우리는 이전 작업에 착수할 수 있다. 예를 들어 dva에서 제가 사용하는 2.6.0-beta입니다.22버전, 기타 첨부된react,react-dom,react-router-dom 및 @babel/plugin-transform-runtime 등 관련 의존항이 모두 업데이트되었습니다(antd 또는 3.x 버전, 4.x의 큰 버전으로 업데이트되지 않음). inject... antdreact옮기다vite antd 테마를 더 작은 구성 요소로 분할하는 방법 최근에 저는 직장에서 흥미로운 문제를 우연히 발견했습니다. 을 사용 중이었고 기본 테마 변수를 사용자 지정하고 싶었습니다. 이를 위해 theme.less를 만들었습니다. 을 살펴보기 전까지는 모든 것이 괜찮았습니다. theme.less가 전체 번들 크기의 상당 부분을 차지하는 것을 확인했습니다. @import '~antd/dist/antd.less'에 의해 실수로 전체 antd 스타일을 가져... webpackbundleantd create-react-app을 사용하여 런타임에 antd 테마를 변경하는 5단계 시작하기 전에 앱(create-react-app)에 을 설치하고 , 을 추가하고 스위치를 토글합니다. 구성 요소의 기본 스타일에도 antd.css를 사용하지만 나중에 제거하고 대신 less를 사용합니다. react-app-rewired 커스터마이즈크라 바벨 플러그인 가져오기 덜 로더 antd-theme-webpack-plugin 설명: react-app-rewired: 'eject'를 사용하... themingantdthemewebpackpluginantd antd에서 Form의 initialValues 지연 설정 antd 에서 initialValuesproperty를 사용하면 초기값을 설정할 수 있습니다 그러나 지연 평가는 비슷하다 따라서 API에서 얻은 값을 설정하는 데 많은 노력이 필요합니다. 찾아보는 김에 필기를 남겼어요. 점은 Form.useForm 사용 Form의 form property에는 Form이 있습니다.useForm의value 설정 이상... GraphQLantduseEffectuseStateappolotech 5주차 react:Ant-design으로 form 만들기 개발을 하다보면 form을 쓸 일이 많다. 글발행에서부터 댓글까지 submit 해야 할 일이 많은데 처음엔 어렵게 느껴지던 antd가 굉장히 유용하게 쓰여서 공유하고자 5주차 메인 주제로 삼았다. antd 공식문서 발췌 : point 공식문서를 열심히 읽자.. 그 속에 답이 있다... Form 발행시 가장 중요한 건 각각의 아이템들을 Form.Item으로 감싸주어야 한다는 점이다. 그러면 F... 앤트디자인form6주포트폴리오카우치코딩antd6주포트폴리오
Ant Design 양식에 색상 선택기 추가 은 효율적인 사용자 인터페이스 구축을 위한 매우 편리한 디자인 시스템입니다. 작업하는 동안 양식에 색상 선택기를 추가해야 할 필요성에 직면했습니다. 불행히도 그러한 구성 요소는 없습니다. Antd 문서는 colorpicker를 만들기 위해 타사 라이브러리를 사용할 것을 제안합니다. 결국 나는 나와 같은 문제에 직면하게 될 모든 사람을 위해 npm 패키지를 작성하는 것이 도움이 될 것이라고 결... antdtypescriptjavascriptreact React, AntD 및 Tailwind: CSS 충돌 수정 React, 및 (아마도 시장에서 구할 수 있는 대부분의 다른 UIKIT)을 사용하는 경우 일부 CSS 충돌이 발생할 수 있습니다. 예를 들어 AntDModal 구성 요소는 바닥글에 기본적으로 "확인"및 "취소"버튼을 표시합니다. 아래 스크린샷에서 볼 수 있듯이 확인 버튼이 제대로 표시되지 않습니다(파란색이어야 함). 실제로 Tailwind는 투명한 배경색을 적용하는 반면 AntD는 파란색 ... antduikittailwindcssreact Antd Calendar 패널에서 첫 번째 날짜와 마지막 날짜 가져오기 Antd Calendar 패널에서 첫 번째 날짜와 마지막 날짜 가져오기 달력이 있습니다. 물론 01은 7월의 첫 번째 날짜이고 31은 7월의 마지막 날짜입니다. 이 대신 경우에 따라 패널에서 첫 번째 날짜와 마지막 날짜를 얻고 싶을 수도 있습니다. 6월 26일과 8월 7일. Antd 캘린더는 onPanelChange 이벤트를 제공합니다. 우리는 이벤트에 코드를 작성할 것입니다. Antd는 m... antddatereactwebdev [에러 기록]모달이 팝업으로 뜨지 않아! 에러 상황 antd에서 modal을 import해서 적용시켰는데 브라우저에서 모달이 기대한대로 팝업처럼 뜨지않고 화면 맨 아래에 나오는 상황. 또, ok를 눌러도 사라지지 않는 문제가 발생. 에러 해결 모달에 적용할 CSS도 import를 해주어야한다! 잘 모르겠을 때는 라이브러리의 DOC를 읽어보는 습관을 기르자!... antdmodalantd cssantd [Vue2] Antd으로 custom validator 만들기 Vue2 AntDv 1.7.8 antd는 기본으로 편하게 사용할 수 있는 validator를 제공해준다 Vue.js 에서는 위와 같이 속성값을 주어서 사용하면 된다 antd에서 기본으로 제공하는 type은 다음과 같다 ✏️ Type ⬆️ 이런 형태로 속성값을 입력하면 알아서 입력 중 바로바로 유효성 체크를 해준다 (너무 편해 ...!!) 그러면 이번엔 기본으로 제공해주는 validator 이... FEvue.jsantdFE [IT-article-archive]#6 글 쓰기 화면 UI 및 기능 만들기(feat. 오류 수정) 전체 글 목록을 보여주는 화면은 만들었지만 아직 새로운 글을 등록하는 창을 만들지 않았습니다. 이번에는 비어있는 /post주소에 새로운 글을 작성하는 로직을 만들어볼려고 합니다. 상단의 네비게이션에서 메뉴가 선택 됐을 때 해당 메뉴에 selected속성을 부여해서 유저가 현재 선택된 페이지를 직관적으로 알 수 있게 하는 기능을 넣었습니다. 그런데 위의 사진처럼 Post가 선택됐을 때는 해당 ... ReactantdUIFirebaseFirebase Early Exit Pattern , 각각의 요소에 조건부렌더링 걸기 , input tag의 readOnly속성 , antD , Material UI , npm라이브러리 사용해보기 각각의 요소마다 렌더링 거는 방법 list라는 폴더가 있다. presenterItem이라는게 하나더 있다. 이 파일은 각각의 요소마다 렌더링 걸기위해 만든 파일이다. 각각의 요소마다 조건부렌더링 주기 설명하기 앞서 구조가 어떻게 되어있는지 짚고가자면 container에서 presenter로 댓글정보를 뿌려준다. presenter에선 data를 받아서 map으로 list에 뿌려준다. 그 각각의... input tag readOnly속성Early Exit Pattern댓글리스트React-player라이브러리 프레임워크 차이MaterialUI프레임워크각각의 요소에 렌더링 걸기antd라이브러리Early Exit Pattern antd vue 새로 고침 현재 페이지 루트 유지, 선택 메뉴 유지,menu 선택 작업 유지 쓸데없는 말은 하지 말고 코드를 올려라! 중점: 1,selectedkeys를 $route로 설정합니다.path 주소 2, a-menu-item의 키를 갈 주소로 설정 페이지 새로 고침, 성공! 추가 정보: vue 경로에 따라 페이지 새로 고침 (메뉴 바꾸기 페이지 새로 고침) 페이지를 새로 고치는 방법은 다음과 같습니다. 하나는 localtion입니다.reload();그러나 이것은 페이지를 ... antdvue경로메뉴menu antddatepicker 획득 시간이 기본적으로 8시간 적은 문제 해결 1. 확장 날짜 포맷 방법 2. 선택한 날짜의 시간을 포맷 처리하여 최종적으로 얻은 시간은 현재 시간이다 new Date(value).format(“yyyy-MM-dd hh:mm:ss”) 보충 지식:antddatepicker 설정 시작 시간과 기한 계산 종료 시간 및 토요일 제거 datepicker는moment 형식의 시간을 value로 사용해야 하지만, 이value를 조작할 때moment를... antddatepicker시간8시간 antd에서 setFieldsValue와 defaultVal의 사용법 코드는 다음과 같습니다. 인쇄해 내다 더 신기한 것은 이 코드가 원래 잘 작동하는데 아무런 문제가 없는데 동료의 컴퓨터에서 위와 같은 문제가 발생한다는 것이다. 내 컴퓨터에도 이 문제가 생겼지만 코드는 고친 적이 없다 나중에 이렇게 코드의 기본값을 설정하면 나타난다 반드시 보충 지식:antd4에서 Form 구성 요소 initialValues 설정의 초기 값이 잘못되었습니다. setFields... antdsetFieldsValuedefaultVal antd+react 프로젝트 이전vite의 해결 방안을 상세히 설명합니다. vite라는 도구를 알게 되면 우리는 이전 작업에 착수할 수 있다. 예를 들어 dva에서 제가 사용하는 2.6.0-beta입니다.22버전, 기타 첨부된react,react-dom,react-router-dom 및 @babel/plugin-transform-runtime 등 관련 의존항이 모두 업데이트되었습니다(antd 또는 3.x 버전, 4.x의 큰 버전으로 업데이트되지 않음). inject... antdreact옮기다vite antd 테마를 더 작은 구성 요소로 분할하는 방법 최근에 저는 직장에서 흥미로운 문제를 우연히 발견했습니다. 을 사용 중이었고 기본 테마 변수를 사용자 지정하고 싶었습니다. 이를 위해 theme.less를 만들었습니다. 을 살펴보기 전까지는 모든 것이 괜찮았습니다. theme.less가 전체 번들 크기의 상당 부분을 차지하는 것을 확인했습니다. @import '~antd/dist/antd.less'에 의해 실수로 전체 antd 스타일을 가져... webpackbundleantd create-react-app을 사용하여 런타임에 antd 테마를 변경하는 5단계 시작하기 전에 앱(create-react-app)에 을 설치하고 , 을 추가하고 스위치를 토글합니다. 구성 요소의 기본 스타일에도 antd.css를 사용하지만 나중에 제거하고 대신 less를 사용합니다. react-app-rewired 커스터마이즈크라 바벨 플러그인 가져오기 덜 로더 antd-theme-webpack-plugin 설명: react-app-rewired: 'eject'를 사용하... themingantdthemewebpackpluginantd antd에서 Form의 initialValues 지연 설정 antd 에서 initialValuesproperty를 사용하면 초기값을 설정할 수 있습니다 그러나 지연 평가는 비슷하다 따라서 API에서 얻은 값을 설정하는 데 많은 노력이 필요합니다. 찾아보는 김에 필기를 남겼어요. 점은 Form.useForm 사용 Form의 form property에는 Form이 있습니다.useForm의value 설정 이상... GraphQLantduseEffectuseStateappolotech 5주차 react:Ant-design으로 form 만들기 개발을 하다보면 form을 쓸 일이 많다. 글발행에서부터 댓글까지 submit 해야 할 일이 많은데 처음엔 어렵게 느껴지던 antd가 굉장히 유용하게 쓰여서 공유하고자 5주차 메인 주제로 삼았다. antd 공식문서 발췌 : point 공식문서를 열심히 읽자.. 그 속에 답이 있다... Form 발행시 가장 중요한 건 각각의 아이템들을 Form.Item으로 감싸주어야 한다는 점이다. 그러면 F... 앤트디자인form6주포트폴리오카우치코딩antd6주포트폴리오