본문 바로가기
반응형

패스트캠퍼스/자습58

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.
React로 Tic Tac Toe 만들기 https://ko.reactjs.org/tutorial/tutorial.html#inspecting-the-starter-code 자습서: React 시작하기 – React A JavaScript library for building user interfaces ko.reactjs.org 공식문서에 있는 내용을 위주로 따라 했습니다. ** 불변성이란? 데이터 변경 방법에는 직접 변경 / 원하는 변경 값을 가진 새로운 사본으로 데이터를 교체 2가지가 있다. 불변성의 특징 : - 이전 상태의 기억이 용이 : 우리가 어떤것을 만들다 보면 되돌리기 기능이 필요할때가 많은데 직접 변경해버리게되는경우 이전 상태를 불러오기가 굉장히 힘들다. 만약 2번째 방법을 이용한다면, 이전 상태를 쉽게 알 수 있으니 용이하다... 2020. 1. 15.
반응형

티스토리툴바