IT 초보코딩의 세계/Go 언어33 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. 이전 1 2 3 4 5 6 ··· 9 다음
