Exien

어떤 모의 기법을 사용해야할지 지금까지 BFF와 SPA에서 다양한 요소를 모의 된 프런트 엔드를 신속하게 형성가는 방법을 소개했습니다. 실제 개발에서는 모의 화하는 방법을 어떻게 구분하여 사용하면 좋을까요. 다음의 순서로 중요도가 높은 곳에서 마이그레이션하는 것이 추천입니다.모의 Store를 통해 View를 구축한다. View와 상태를 분리하여 Store의 입도를 개선한다.실전 Store와 모의 Action Creator로 전환한다. 조작을 밝혀 입도를 개선한다.실전 Action Creator와 모의 API로 전환한다. API의 설계를 개선한다.모의 API를 실전 API를 전환합니다. 사용자와의 접점에서 먼저 마무리 가고 느낌을 잡고 잘 될 것이라면 백엔드에 옮겨가는 "프론트 엔드 패스트 '개발 스타일입..

Flux에서 모의 ​​Action Creator와 모의 Store를 만들려고 (2)1. 모의 Action Creator Action Creator에서 더미의 Action을 생성하고 dispatch()전달합니다. 실제로 API와 DB를 호출하지 않지만 전화했다고 가정하고 결과를 Action 형식으로 dispatch()전달합니다.const ActionCreators = { getArticle : () => Dispatcher . dispatch ({ type : 'type1' , data : { id : 1 , text : 'How to use ...' }}) : } 모의 API도 물리적 API가 존재하는 경우, API의 설계에 약간의 어려움이 있었다고해도 프론트 엔드 측에서 무리를하고 쉽습니다. 모의 AP..

BFF에서 모의 ​​API를 만들자 UI에 표시 할 데이터는 무엇입니까? 백엔드를 모두 갖추고 프런트 엔드를 개발하는 방법, 프로토 타이핑에서 요구되는 속도에 도달 할 수없는 것입니다. 이것을 해결하는 방법 중 하나가 모의 API입니다. 모의 (mock)는 '모방적인 "이라는 뜻으로, 모의 API는 RDBMS 등의 백엔드 서비스를 호출하지 않고 HTTP 요청에 대한 고정적인 더미 JSON을주고받습니다. 중요한 부분 이외 모의 API를 사용하여 신속하게 프런트 엔드 형태로 가치를 평가 해 봅시다.K5 Playground에서 모의 ​​API를 만들 K5 Playground에서 모의 ​​API를 만드는 것은 간단합니다. 기존의 API 논리와 하늘의 API 로직 (Empty Logic)을 교환하여 모의 데이터를..

디자인을 빠르게 실현하는 React와 CSS in JSReact Component가 빠른 프로토 타이핑을 실현 빠른 프로토 타이핑에 먼저 신속하게 UI를 구축하는 방법이 필요합니다. 이것은 React의 전문 분야입니다. React의 특징의 하나는 UI의 구성 요소 지향이 포함됩니다. 재사용 가능한 소액 UI 부품을 조합하여 전체를 구축하는 방법입니다. React의 기본 단위는 React Component이며,이 작은 React Component를 조합하여 페이지를 구성합니다. 또한 React는 디자인도 React Component 속에 가두 수 있습니다. React Component에 CSS 상당의 장식과 레이아웃을 기술 해 두는 것으로, React Component를 호출하면 디자인 적용된 UI 부품을..

propTypes 속성의 두 작성 propTypes 속성에는 두 가지 방법이있다합니다. 개체의 속성으로 설명하는 문법과 클래스와 함께 사용하는 경우에만 사용할 수있는 static 속성으로 설명하는 기법입니다.개체의 속성으로 설명 지금까지 본 기사에서 소개 해왔다 작성은 여기였습니다. 구성 요소를 정의하는 객체에 대해 propTypes을 속성으로 러 장이 동시에 보급함으로써 정의를 실현합니다. 표기법은 다음의 형태입니다.목록 10 propTypes을 속성으로 기술 한 예class Hoge extends React . Component { render () { ... } } Hoge . propTypes = { aaaa : PropsTypes . xxxxxx , bbb : PropTypes . xxxxxx ..

propTypes 속성에 지정할 수있는 형태 prop-types 라이브러리의 개요는 파악 할 수 있었는지 생각하기 때문에 본 절에서는 실제로 어떤 형태로 형식 정보를 표현할 수있는 방법을 소개하고 있습니다.기본형 먼저 JavaScript를 원시적 형에 대응하는 것으로서 다음의 형태가 준비되어 있습니다.PropTypes 모듈에 정의 된 기본형형태의미PropTypes.array배열 형 (요소의 형태는 묻지 않는다)PropTypes.bool불리언 형PropTypes.func함수형PropTypes.number숫자PropTypes.object객체 형 (내부 구조는 불문)PropTypes.string문자열PropTypes.symbol기호 형 (※ 주 1)※ 주 1 : 기호 형은 ES6에서 도입 된 데이터 형식 절대..

Props에는 어떤 데이터를 전달하면 좋을까 React를 사용할 기회가 늘어날수록 다른 사람이 만든 구성 요소를 만지는 기회도 늘어납니다. 연재 제 3 회 " React × Material-UI로 현대적인 UI를 구현하기 "에서 다룬 material-ui 등은 전형적인 "다른 사람이 만든 구성 요소"네요. 몇 달 전 자신이 작성한 코드도 다른 사람의 것으로 생각하는 편이 좋다고 설도 있기 때문에 혼자 개발하고도 기간이 길수록 본 기억이없는 구성 요소를 관리 할 수있는 기회 역시 증가 간다고 생각하는 편이 좋을 것입니다. 그런데 다른 사람이 만든 구성 요소를 사용하는 경우 어떤 일이 곤란 있을까요? 예를 들어, 제 4 회 " React 의한 양식 / 목록의 기본 "에 나온 목록 1의 구성 요소에 대해 생각..

try-with-resources 문장의 개선 try-with-resources 문장은 반드시 닫아야한다 자원 문장의 끝이 반드시 닫히도록하기위한 구문입니다. 이 구문을 사용하지 않거나 Java 7 이하의 코드가 될 수있는 분은 finally로 close () 메소드를 실행해야했을 것입니다. 그러나 Java 7에서이 구문이 도입 된 위해 finally에서의 설명이 필요 없어지고, 그리고 Java 9는보다 직관적으로 설명 할 수있게되었습니다. 실제로 Java 7 이전과 Java 7 이상, 그리고 Java 9에서 설명 할 수있는 방법을 나타낸 것이 Listing 7입니다.목록 7 try-with-resources 사용 예 (src / main / com / coltware / part6 / jep213 / ..

직관적 인 Collection 작성 및 Stream 처리 개선 지금까지보다 Collection과 Stream 처리를 손쉽게 작성할되었습니다.직관적 인 Collection 작성 List와 Set 또는 Map 같은 컬렉션의 개체가 목록 1과 같이 간단하게 작성할 수있게되었습니다.목록 1 Collection의 작성 방법 예 (src / main / com / coltware / part6 / jep269 / CollectionUpdates.java 발췌)// (1) 추가 항목을 순서대로 설명 final Set of = Set . of ( "a" , "b" , "c" ); final List list = List . of ( "l1 " , "l2 " , "l3 " ); /..

.NET Standard 2.0 규격의 ADO.NET 코딩 SQL Server를 사용하는 경우 데이터베이스를 읽고 쓰는 방법은 기존의 ADO.NET 2.0 와 같습니다. DbConnection 을 사용하여 데이터베이스에 연결 한 후 DbDataAdapter 와 DataSet 에서 도카と교환하는 것도 좋고, DbDataReader 에서 1 레코드 씩 처리하는 것도 좋고,입니다. 그들은 .NET Standard 2.0에 포함되어 있습니다. 차이는 그 인스턴스를 얻기위한 DbProviderFactory 의 구현이 .NET Standard에 포함되지 않은, 즉 플랫폼 독립적이라는 것입니다.기존과 ADO.NET의 차이 SQL Server를 사용하기위한 DbProviderFactory의 구현은 SqlClientFa..