본문 바로가기
반응형

분류 전체보기81

React-Admin 리스트에 검색 및 필터 추가하기 Post List에 검색 및 필터를 추가해보겠다 먼저 PostFilter 컴포넌트를 추가한다 그리고 PostList 컴포넌트의 List에 filters 속성을 추가해준다 // in src/posts.tsx const PostFilter = (props) => { return ( ) } export const PostList = (props) => { return ( // ... ) } PostFilter 컴포넌트에서 의 source="q"는 JSONPlaceholder가 제공하는 전체 텍스트 활용을 말한다 alwaysOn는 항상 화면에 나타나도록 설정하는 속성이다 그리고 PostList 컴포넌트의 List에 filters를 추가하면 ADD FILTER 버튼이 생성된다 ADD FILTER 버튼을 클릭하면 .. 2020. 4. 23.
React-Admin 리스트에 생성 및 수정 추가하기 지난 글에서 언급했듯 이번에는 리스트에 생성 및 추가 기능을 붙여 보려한다 그전에 지난 글이 궁금하다면 아래 링크 클릭~ React-Admin 시작하기 - API 앤드포인트를 맵핑하여 List로 보여주기 React-Admin 튜토리얼을 보고 따라해봤다 먼저 앞전에 쓴 포스팅 Create React App을 이용하여 React 앱, TypeScript 시작하기를 통해 React 앱을 만든 후 react-admin 패키지를 설치한다 yarn create react-app t.. hyung1.tistory.com 먼저 App.tsx 파일에서 import한 react-admin에 EditGuesser를 추가한 후 에 edit={EditGuesser} 를 추가한다 그러면 아래 화면처럼 리스트 열마다 EDIT 버튼.. 2020. 4. 22.
React-Admin 시작하기 - API 앤드포인트를 맵핑하여 List로 보여주기 React-Admin 튜토리얼을 보고 따라해봤다 먼저 앞전에 쓴 포스팅 Create React App을 이용하여 React 앱, TypeScript 시작하기를 통해 React 앱을 만든 후 react-admin 패키지를 설치한다 yarn create react-app test-admin cd test-admin/ yarn add react-admin ra-data-json-server prop-types yarn start http://localhost:3000/ 에는 아래 화면처럼 나올 것이다 React-admin를 사용하기 위해서는 생성, 검색, 업데이트 및 삭제 (CRUD) 할 수 있어야 한다 그래서 JSONPlaceholder에서 예시용으로 제공해주는 샘플 더미 API를 이용해 연습해 볼 것이다 .. 2020. 4. 21.
슬기로운 VScode 생활 1 - Better Comments 알록달록한 걸 좋아하는 나를 잘 아는 회사 동료가 주석을 알록달록하게 할 수 있다며 추천해준 VScode 익스텐션이 있다 그것은 바로 Better Comments!!! Better Comments는 주석을 달 때 주석의 유형에 따라 색으로 구분하여 더 직관적으로 볼 수 있도록 도와주는 VScode 익스텐션이다 주석 앞에 *, !, ?, TODO, // 이런 문자를 넣어 색을 구분한다 * : 설명 - 초록 ! : 주의 - 빨강 ? : 궁금 - 파랑 TODO : 할일 - 주황 // : 취소 - 검회색 이 익스텐션은 사용자 설정 또는 작업 영역 설정에서 구성할 수 있다 "better-comments.multilineComments": true : 멀티라인의 스타일을 지정할지 여부를 제어한다 "better-co.. 2020. 4. 21.
Create React App을 이용하여 React 앱, TypeScript 시작하기(with github) React와 Typescript 조합을 사용하여 개발을 하게 되어 공부하자는 의미로 이 글을 끄적여본다 Create React App를 이용하는 방법에는 여러가지가 있다고 한다 하지만 일단 나는 Create React App 홈페이지에 있는 빠른 시작을 따라해보았다 npx create-react-app my-app cd my-app npm start 여기서 npx는 실수가 아닌 npm 5.2+ 버전의 패키지 실행 도구라고 한다 npm start를 하면 http://localhost:3000/ 가 열린다 하지만 여기서 나는 Typescript와 리액트를 함께 이용해볼까한다 이미 생성된 Create React App에 Typescript를 적용하는 방법이 있지만 나는 작업한 것이 1도 없기에 그냥 새로 만드.. 2020. 4. 7.
11. UI와 API 그리고 문서보는 법 UI(User Interface)와 API(Application Programming Interface)는 공통점과 다른점이 있다. 공통점은 Interface라느 말이 같고 다른 점은 UI는 User로 시작하고 API는 Application Programming로 시작한다는 점이다. UI 사용자를 대면하는 접점이 되는 지점을 포괄적으로 User Interface라 부르고 줄여서 UI라고 한다. 웹브라우저에서의 버튼들이 바로 UI라 할 수 있다. API 주소창에 javascript:alert("Hello world");를 치면 경고창에 Hello world라는 문자가 표시된다. 이처럼 alert() 이라는 명령은 웹브라우저를 제어하기 위한 Interface이며 코드의 형태를 띠고 있기에 Applicatio.. 2019. 5. 14.
반응형

티스토리툴바