# antd
Ant Design - Table 사용해보기
디자인이라고는 모르는 BE 개발자가 react로 어드민 개발하는 방법 => 라이브러리를 열심히 활용하기 ^^...
230221 팀 프로젝트 11 페이지네이션
어제까지 진행했던 페이지네이션은 그대로 사용하면 게시글이 밑으로 붙어버리는 경우가 생기기 때문에....로직을 보안했다.데이터 값이 16개씩 오게끔 짜두었으나 파이어베이스가 버티질 못해서...ㅎ 테스트삼아 3개씩 보일 수 있도록 입력했다.ant디자인 커스텀이 이렇게까지
230220 팀 프로젝트 10
오늘은 댓글에서 발생한 버그와 페이지네이션 구현에 대해서 적어보려고 한다.댓글쪽에서 발생한 이슈는 1\. 다른 곳에서 작성한 댓글이 모든 게시글에서 보이고 있다.2\. : 창이 열리지 않는다.그리고 페이지네이션의 경우 antd 디자인을 사용하는데 라이브러리 특성상 제대
antd로 화면 만들기-_app.js와 Head, 로그인 폼, 리렌더링 이해하기, 프로필 페이지와 회원가입 페이지 만들기(custom hook)
ant design ( css framework )아이콘을 바로 가져다 쓸 수 있음보통 고객이 있는 서비스에서는 잘 안씀 → why? 개성이 사라짐 (admin 느낌)혼자 개발하는 경우 → 디자이너 없이도 그럴듯하게 디자인 가능css 입히기styled-component
Warning: [antd: Table] Columns should all contain `filteredValue` or not contain `filteredValue 오류
filteredValue문자열 이 있는지 확인 | 각 열에 대해filters 설정 한 위치가 정의되지 않음
230101 한주회고 캘린더
캘린더로 꼭!wil써줘! 하는 분들이 많아서...그리구 나도 틈틈히 공부해서 내껄루 만들어야하기 때문에...적어본다...ㅎㅎ구현한 영역팀 프로젝트 내에서 캘린더가 들어가야할 부분을 모두 구현했었는데task입력 시 일자를 기입할 수 있게 보여주는 작은 캘린더\+) 작은
[Antd] Form 밖에서 Form submit하기
페이지를 만들다보니 Form 태그 밖에서 Form을 submit 해야하는 상황이 발생..어떻게 해야할지 찾다가 이 글을 발견했다https://stackoverflow.com/questions/61745864/antd-form-remote-submit가장 이상적
[antd] Form.Item 안에 들어갈 텍스트 컴포넌트 만들기
Ant design을 사용 하여 레이아웃을 만들던 중... Form 하위의 Form.Item의 레이아웃은 가져가면서 그 안의 내용은 편집 불가능한 텍스트로 보여주고 싶었다. 그냥 Form.Item 아래에 Text 넣으면 되는 거 아냐~? 생각했다.아무런 데이터도 안 나
영상 갯수 제한 피드백(11월 초 작업 기준)
영상 갯수 제한 작업 및 일정이상 갯수일 경우 오류 안내영상 갯수 제한일정 갯수 이상이거나 이하일 경우 오류 메세지 출력default 로 영상 제작시 전체 선택7개 이상이면 영상제작 X && 0개면 영상제작 XRedux toolkit 활용하여 프론트 단에서만 작업진행a
Next.js Antd 🐜 DatePicker 한글화하기 (Locale)
예제를 그대로 따라했는데, 아래 문제가 발생했다. 😭SyntaxError: Unexpected token 'export' SyntaxError: Cannot use import statement outside a module
react-hook-form 과 antd select
✏️ react-hook-form + antd form을 이용하여 회원가입을 구현중이었는데 맞딱드린 난관 antd 처럼 제어컴포넌트에서는 register를 아무리써도 값이 넘어오지 않았다 자꾸 name 타령하길래 화났던 기억,,, 이 빨간창을 맞딱드렸던 그때의 나는
[React] antd Form 컴포넌트 내 Input value 속성 동적으로 사용하기
현재 관리자페이지를 ANT라는 CSS Framework를 이용해 구현중에 있다. 유저 정보를 검색하는 검색창을 구현할 때 html의 input태그가 아닌 antd의 Table과 Input 태그를 활용했는데, 값을 초기화하는 방식에 문제를 겪었다. 결론적으로는 나와 같은
빌드 시 antd & styled component 우선 순위 문제
flex가 무시된다. display: flexcol에 display를 override해서 사용하였는데 로컬에서는 문제가 없다가 빌드하면 css가 깨져보였습니다.stackoverflow를 참고해보면 하단과 같은 의견이 있었습니다.And it appears that the
[React] Antd Table 컴포넌트 정보 및 예제
React UI 라이브러리 antd의 Table 컴포넌트에 대하여 알아봅니다. antd의 Table 컴포넌트는 테이블 형태의 Layout을 구현하는데 사용됩니다.그럼 간단한 사용 방법 및 예제를 먼저 알아봅니다.antd의 Table 컴포넌트를 사용하려면 기본적으로 아래
TIL 20220819 Antd에서 포커스 옮기고 자동으로 select option 보여주기
디자인 시스템으로 antd를 사용하고 있는데, 폼에서 회사를 검색하면 자동으로 다음 필드로 포커스가 이동하여, 해당 회사의 직원들의 이름,이메일이 뜨게 하고 싶었다.ReactReact.useRefAntdrefshowAction대부분의 코드는 제거하고 실제로 사용한 부분
Antd Design이 뭔데?
Antd Design은 쉽게 말하면, 중국에서 만든 웹 프론트 개발을 위한 프레임워크이다.프론트에서 사용되는 여러 요소들을 컴포넌트화 하여 그저 가져다 쓰면 웹 페이지에 만들고자 하는 기능을 쉽게 구현하는 것이 가능하다.프론트엔드에서 많이 사용되는 기능들 (form,
[노드, 리액트 기초 | React] #20. AntD CSS Framework
CSS Framework와 Ant Design의 세팅 방법에 대해 설명합니다.
라이브러리 사용하기
ant-Design, Material-UI Ant-Design과 Material-UI는 디자이너의 도움 없이 개발자가 스스로 디자인된 컴포넌트를 만들 수 있도록 도와주는 UI 프레임워크입니다. 만약 조금 더 간편하고 예쁘게 만들고 싶으면 적용해보세요! ant-Design 사이트 Material-ui 사이트 1. 다양한 아이콘들 2. 색다른 체크박...