본문 바로가기
반응형

패스트캠퍼스118

Antd Table drag & drop Typescript로 구현하기 글을 쓰다보니까 정말.. Antd에 대한 얘기밖에 없는것 같다.... ㅋㅋㅋㅋㅋ 그만큼 Antd에 대해서 많이 찾아보고 삽질하고 엄청 하고 있다...하.. 너무 힘듬... 진짜 이번엔 오류잡아내기가 너무 빡셌음 그럼 바로 본론으로 고고!! 안트디자인 ,Ant Design 에 보면 위와 같이 Drag sorting 이라는 것이 있다. 위에는 사진이라서 잘모르겠다면, https://ant.design/components/table/#header Table - Ant Design ant.design 여기 들어가서 한번 확인해보시길 여튼 어디서 봤을것이다. 테이블을 만들고 순서를 바꾸고 싶을때 적용하는 것이다. 되게 간단할 줄 알았는데 Antd Table이 기존에 적용되어있는 만큼 ! 한번 써보기로 하였다. 일.. 2020. 5. 27.
Antd form과 upload 같이 사용하기 회사에서 프로젝트를 만들면서 정말이지 antd를 customize하기가 어렵다는걸 깨달았다.... 하지만 결국 구글링의 힘과 찍어맞추기로 만들어내긴했다..어휴힘들어..그럼 같이 사용하는 과정을 알아보자! 이런식으로 Form이 있고, 안에 input과 textarea , upload 등 다양한 것을 사용해서 넣는 form작업을 넣는 것을 하였다. 일단 textarea나 input같은 경우 쉬운편이고, upload에서 잘 나와있지 않아서 열심히 찾았다. 한번 코드를 살펴보자! // 여기 uploadprops에서 설정을 많이해준다!! Click to Upload 일단 기본구조를 가져온뒤 구조에 대한 설명을 하자면 getBalueFromEvent에서는 fileList에 대한 제한을 걸 수 있다. 나같은 경우는 .. 2020. 5. 26.
react에서 다국어지원 기능 구현하기( i18n , i18next) 회사에서 프로젝트를 하면서 다국어를 지원할 일이 있어서 여러가지 구글링을 통해 알아보았다. 그중에서 i18next라고 어떻게 읽는지는 모르겠지만...일단 써보자하고 써봣는데 된다... 신기하다 바로 번역해주는것이 아니라 내가 json파일형태로 등록해놓은것을 예를들어 한국어로는 'hello' : 안녕, 영어로는 'hello': 'hello'라고 등록해놨을때 홈페이지 영어로보기 ! 누르면 hello가 나올 것이고, 한국어로보기! 누르면 안녕이 나올 것이다. 그럼 이것을 어떻게 하는지 살펴보자! 먼저 리액트와 패키지매니저는 yarn을 사용하기 때문에 나는 yarn add react-i18next 로 설치해 주었다. 그리구 나서 파일을 하나 만들고 파일이름은 나는 i18n.tsx 로 만들었다. (타입스크립트를 .. 2020. 4. 17.
2020-01-30 리액트 수업 - Redux Redux 1) 단일 스토어를 만드는 법 2) 리액트에서 스토어 사용하는 법 2가지를 익혀야함 스토어 사용 준비하기 1) import redux 2) 액션을 정의하고 3) 액션을 사용하는, 리듀서를 만들고 4) 리듀서들을 합친다 5) 최종으로 합쳐진 리듀서를 인자로, 단일 스토어를 만든다 사용하기 - 준비한 스토어를 리액트 컴포넌트에서 사용하기 1) import react-redux 2) connect함수를 이용해서 컴포넌트에 연결 **Store가 너무 커지면 어케해야하냐? 관심사가 비슷한걸로 쪼개서 서로 상태에 영향을 미치지않도록 만들어야한다. Action 그냥 객체이다. type만 필수 프로퍼티이자 문자열이다. payload가 있는 액션과 payload가 없는 액션 2가지 형태가 있다. 액션을 생성하.. 2020. 1. 30.
반응형

티스토리툴바