antdesign

간단하게 배우는 dashboard 마지막 글입니다. ant design의 기본기를 익히시기에 편한 글이었기를 바랍니다. 측면 메뉴바 측 사이더를 만들어주기 위해 components에서 Menu를 찾으시면 됩니다. 가장 첫 번째 나오는 Menu컴포넌트의 코드를 보고 내용을 확인하시길 바랍니다. 간단히 요약한 코드입니다. 메뉴를 사용한다는 의미로 태그를 만들었고 그 안에 아이템으로 DashBoard를 설정했습니다. 큰 메뉴의 첫 번째에는 DashBoard 가 뜹니다. 그아래 SubMenu를 설정하는데 그 내부를 그룹화하는 ItemGroup이 있습니다. 메뉴를 그룹화하는데 타이틀 -> 즉 이름을 저런 이름의 그룹으로 만들어라 하는 내용입니다. SubMenu안에 아이템을 넣어주면 아래와 같은 모양이 완성될 것입..

이번에는 사이드 바를 제외한 layout 설정을 마무리 하겠습니다. layout 컴포넌트에 코드를 토대로 화면을 코딩합니다. 레이아웃은 헤더(상단 메뉴) , 사이더 (측면 메뉴) 컨텐츠( 중앙 내용) , 풋터 (하단에 설정할 내용) 으로 정리합니다. 씬은 처음부터 나눠놓고 시작하는 것이 효율적입니다. 스타일 설정은 사이더를 보시면 저런 식으로 색을 넣을 수 있습니다. red를 넣어줘서 구분을 줍니다. 화면을 보시면 글자가 잘 안 보이시고 크기도 작습니다. 그러니 글자 크기를 변경하러 갑니다. 타이틀을 이용할 건데 레벨이 크기를 의미합니다. 편하신 거 가져오셔서 헤더 사이에 넣을 겁니다. import는 꼭 해줍시다. (from 'antd'가 겹치면 import { Layout , Typography} fr..

layout태그에 들어가셨다면 가장먼저 보이는 화면은 레이아웃일겁니다. 저희는 대쉬보드에 가까운형태인 4번째 레이아웃을 사용할 것입니다. 이전과 같이 밑으로 스크롤을 내리고 를 클릭하여 코드를 확인합니다. 동그라미를 해놨습니다. 4번째 레이아웃을 레이아웃부터 레이아웃까지 복사한 후 react 앱에 붙여넣습니다. import는 항상 확인해줍시다. 아래와 같은 코드를 react에 입력해주시면 됩니다. 이런화면이 뜨셨다면 완성입니다.

ant design 사이트에서 컴포넌트를 이용할 생각입니다. ant를 이용하는 이유는 제가 직접 짜지 않기 위해서니까요. 밑의 url사이트는 ant사이트에서 components를 바로 누르면 나오는 상태입니다. 버튼이 가장 먼저 등장합니다. https://ant.design/components/button/ Button - Ant Design If you need several buttons, we recommend that you use 1 primary button + n secondary buttons, and if there are more than three operations, you can group some of them into Dropdown.Button. ant.design 밑으로 스..

Ant Design 에 대해 검색하고 들어오셨다면 프론트엔드에 어느 정도 이해가 있으실 거라 생각합니다. (모르시겠다면 다음글부터 짚어가면서 설명하겠습니다!!) 간단히 설명드리자면 ant란 제품의 view를 쉽게 설계하기 위한 라이브러리를 사용하는 개념으로 bootstrap을 사용해보셨다면 유사한 사용방식입니다. 다만 앵귤러, 뷰, 리액트를 지원하는 라이브러리입니다. 사용 방법 npm install -g react-create-app 로 리액트 앱을 만드는 npm을 인스톨 하셨다면 npx create-react-app 을 명령프롬프트에서 실행해주셔야합니다. - npx npm의 차이점 npm 은 아시다시피 노드의 패키지 매니져로서 필요한 모듈의 설치를 도와줍니다. 다만 npm의 5.2버전부터는 npx라는 ..