전체 글103 Go 언어 Front End 제작해보기(주문내역 페이지, 탐색메뉴) 5장 ◆ 주문 내역 페이지 ▶주문 내역 페이지 – src/order.js import React from 'react'; function Order(props) { return ( {props.productname} {props.desc} Price: {props.price} Purchased {props.days} days ago ); } export default class OrderContainer extends React.Component { constructor(props) { super(props); this.state = { orders: [] }; } componentDidMount() { fetch(this.props.location) .then(res => res.json()) .then((.. 2023. 5. 15. Go 언어 Front End 제작해보기(로그인 페이지) 4장 ◆ 로그인 페이지 ▶로그인 폼을 작성 – src/modalwindow.js 파일 class SingInForm extends React.Component { constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); this.state = { errormessage: '' } } handleChange(event) { const name = event.target.name; const value = event.target.value; this.setState({ [name]: value }); } handleSubmit(ev.. 2023. 5. 12. Go 언어 Front End 제작해보기(회원 가입) 3장 ◆ 회원 가입 페이지 ▶ 회원 가입 폼을 작성 – src/modalwindow.js 파일 class RegistrationForm extends React.Component { constructor(props) { super(props); this.handleSubmit = this.handleSubmit.bind(this); this.state = { errormessage: '' } this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(event) { event.preventDefault(); const name = event.target.name; .. 2023. 5. 11. Go 언어 Front End 제작해보기(모달 윈도) 2장 ◆ 상품 주문 모달 윈도 ◆ 모달을 위한 패키지 설치: npm install -–save reactstrap ◆ 상품 주문 모달 윈도 – modalwindow.js 파일을 src 디렉토리에 생성하고 작성 export function BuyModalWindow(props) { return ( Buy Item ); } ◆ 신용카드 결제 처리 ▶ 신용카드 정보 입력 폼 구현은 간단해 보일 수 있지만 텍스트 입력 창이 전부가 아니며 실제 운영 중인 서비스라면 신용카드 유효성을 검사하고 입력받은 정보를 안전하게 처리해야 하는데 신용카드 정보는 매우 민감한 정보이기 때문에 일반 데이터처럼 취급할 수 없음 ▶ 프론트 엔드에서 사용할 수 있는 다양한 신용카드 결제 서비스가 있는데 그 중 가장 많이 쓰이는 스트라이프 (.. 2023. 5. 10. Go 언어 Front End 제작해보기 1장 ◆ node 설치 ◆ react 설치 : npm install -g create-react-app ◆ 참고할 내용 ▶ 리액트 라우터 패키지: https://reacttraining.com/react-router/ ▶ 스트라이프: https://stripe.com/ ▶ 리액트 폼 제어: https://reactjs.org/docs/forms.html ◆ 프로젝트 생성: create-react-app music_frontend ◆ src 디렉토리에서 다음 파일 삭제 ▶ App.css ▶ index.css ▶ logo.svg ◆ public 디렉토리에 다운로드 받은 파일을 복사 ◆ Main 페이지를 위한 3개의 자바스크립트 파일을 src 디렉토리에 생성 ▶ Navigation.js: 탐색 메뉴 컴포넌트 ▶ P.. 2023. 5. 5. [Micro Service] Micro Service 상세 설계(도메인 모델링, 헥사고날 구조, 엔티티, Value object, 표준타입, 애그리거트, 도메인 서비스 및 이벤트) 2장 ◆ 도메인 모델링 ▶ 마이크로서비스의 내부 구조는 폴리글랏하게 접근할 수 있는데 폴리글랏하다 라는 의미는 애플리케이션을 구현하는 언어나 데이터를 저장하는 저장소를 서비스마다 다양하게 활용할 수 있다는 의미인 동시에 내부 아키텍처 구조를 서비스 특성에 맞게 다양하게 수립할 수 있다는 의미이기도 하므로 서비스의 내부 영역의 구조를 도메인 모델 중심으로 만들 수도 있고 트랜잭션 스크립트 형태로 만들 수도 있음 ▶ 도메인 모델 형태의 헥사고날 구조 ▶ 단순한 로직인 경우에는 트랜잭션 스크립트 구조로 만들어도 무방하지만 비즈니스가 복잡해질수록 비즈니스 개념들을 잘 구조화할 수 있는 도메인 모델 구조가 효과적 ▶ 도메인 모델 구조는 복잡함을 다루어 쉽게 표현할 수 있는 구조를 제공하기 때문인데 이러한 내부 구조를 .. 2023. 5. 4. 이전 1 ··· 4 5 6 7 8 9 10 ··· 18 다음
