마이페이지에서는 사용자 본인이 주문한 상품 내역, 고객 지원 페이지에서 문의한 내역을 확인할 수 있으며,회원 탈퇴도 가능하도록 페이지를 구현했다. 주문 내역에서는 주문 취소, 주문 교환, 배송지 변경 기능도 이용할 수 있다.   1. 주문 내역 확인 마이페이지 경로로 서버에 axios GET 요청을 보내 유저 정보와 일치하는 주문 내역을 데이터 베이스에서 SELECT 문을 통해 추출하고, 주문 정보를 클라이언트 측으로 전달하면 데이터를 받은 클라이언트 측에서 1. 데이터가 존재하지 않으면 => '주문내역이 없습니다' 메세지 전달2. 데이터가 존재하면 => 주문번호, 주문 날짜 & 시간, 배송지, 주문 가격, 결제 수단 순서로 데이터를 불러오도록 설정했다. 주문 데이터를 순회하며 각 주문 정보를 HTML로..

인터넷에서 글을 적는 데 어려움을 느끼는 사용자를 위해 전화 문의가 가능하도록 정보를 먼저 안내한 후 최소한의 내용 수집으로 문의가 가능하게끔 페이지를 구현했다.  고객 지원 페이지를 구현하면서 고민을 많이 했던 부분은 무분별한 반복 문의글 작성에 대한 대처였다. 고객 지원을 악용하여 보복성이나 방해성으로 같은 내용의 문의를 계속해서 작성하는 것을 방지하고,최소 고객의 문의 내용에 대한 설명을 수집하기 위해 데이터 베이스에서 문의 내용을  primary key로 설정해 중복을 허용하지 않도록 설정했다.  따라서, 입력 내용이 동일한 경우 동일한 문의 내역이 존재한다는 메세지를 클라이언트 측에 전달하도록 코드를 작성해주었다. axios.post('/customer', {        username,   ..

구매하기 기능은 구매하기로 이동할 수 있는 버튼이 여러개였기 때문에 작성해야할 코드가 많아 구현하는 데 까다로웠던 부분이기도 했다. 상품의 정보를 어떻게 해서 가져오고, 주문 페이지에서 어떤 방식으로 데이터를 렌더링하고, 주문 정보를 어떤 형식으로 저장할지 많은 부분에 대해 고민해 구현하려 노력했다.  최종적으로 로컬 스토리지를 사용해 주문할 상품의 데이터를 저장하고 구매하기 페이지에서 상품 정보를 불러오도록 코드를 구현했다.  구매하기는 총 2가지 방법으로 가능하다.첫째, 각 상품 페이지에서 상품 별로 바로 구매하기둘째, 장바구니에서 선택 상품 또는 전체 상품 구매하기  각각의 방법에 대해 설명해보려 한다.   1. 상품 페이지에서 개별로 구매하기 구매하기 버튼을 누르면 상품 인덱스를 clikedInd..

쇼핑몰에 필수적인 기능 중 하나인 장바구니 기능은 구현하기 위해 로컬스토리지를 사용했다.또한 상품을 추가하고, 장바구니에서 보여주며 수량 조정, 삭제 등 세부적인 기능들을 구현하기 위해 신경을 많이 쓴 부분이기도 하다.   1. 장바구니 상품 추가 상품을 장바구니에 추가 버튼을 누르면 해당 상품의 인덱스와 수량을 로컬스토리지에 저장하도록 코드를 작성했다. 먼저, 로컬스토리지를 정의한 후 상품 인덱스로 장바구니에 추가하는 상품들을 관리해 수량을 추가할 수 있도록 했다.상품이 정상적으로 추가되면 완료 메세지로 사용자가 확인할 수 있도록 구현했다.let basket = JSON.parse(localStorage.getItem('basket') || '[]');if (productIndex !== -1) {  ..

1차 프로젝트에 이어서 프론트 엔드 프로젝트에 만족하지 않고 백엔드 기능을 추가해 완성도 있는 프로젝트를 만들어보고자 2차 프로젝트로 node.js 를 활용해 기능을 추가해보았다.  먼저, node.js를 활용하기 위해 html, css로 구현했던 페이지들을 ejs로 변환해 코드를 정리하고 css 역시 유지보수를 생각해 파일을 나누어 코드를 수정했다. 다음으로, 쇼핑몰에 필요한 가장 기본적인 기능을 넣고자 로그인, 회원가입 부터 구현을 시작했다.  1. 회원 가입 구현 기본적으로 MVC 구조를 사용하고 있기 때문에 회원가입 정보를 저장하기 위한 Model 부터 정의해주었다. SQL 쿼리문인 INSERT INTO 를 사용해 username, phone, userpw를 입력 받아 데이터베이스인 MySQL 워..

회원가입은 전화번호로 진행하며,즉, 전화번호를 앱의 아이디로 활용한다.  또한 서비스 이용동의를 위해 체크 박스도 구현했으며,  앱이라는 특성 상가장 먼저 KeyboardAvoidingView를 사용해 키보드가 열릴 때 화면을 자동으로 조정하여 값을 입력할 수 있도록 했다.또한 ScrollView로 화면이 길어질 경우 스크롤이 가능하게 코드를 작성해주었다. KeyboardAvoidingView        style={{ flex: 1 }}        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>        ScrollView contentContainerStyle={styles.scrollContainer}>          View style..

이 프로젝트는 노인들의 정보 소통을 위한 커뮤니티를 구현하는 프로젝트로 리액트 네이티브를 활용해 현재 개발 진행 중이다.  이 글에서는 가장 처음 만들었던 페이지인 온보딩 페이지에 대해 설명하려한다.   온보딩 페이지의 작업은 넣어야할 요소가 많지 않았기 때문에 어렵지 않게 작업할 수 있었다. 다만, 리액트 네이티브로 배경 사진의 크기를 조정하는 데 있어서 이미지 크기가 맞지 않는 등 어려움이 있었지만,% 단위를 활용해 크기를 적절하게 맞춰나갈 수 있었고, 원하는 화면을 계속해서 구현할 수 있었다.   또한, 스타일 지정할 내용이 많이 없었기 때문에 편의성을 위해 style 코드는 inline 방식으로 작성해주었다.온보딩 이외의 페이지에서는 StyleSheet 를 활용해 style을 지정했다.    온보..

7주차 세션  7주차 세션에서는 이전에 했던 내용들을 복습하고,글 작성하기 페이지를 스스로 실습해보는 시간이 주어졌다.  따라서 과제에 대한 내용을 위주로 적어보려한다.  주어진 과제는 2개였다. 첫째,나만의 유튜브 페이지 만들기 api와 props, router 등 많은 요소들을 실습해볼 수 있었고, api를 발급받는 부분이 어렵기도 했지만, api를 활용해볼 수 있어서 의미있었다.  api를 활용해 검색 기능을 구현했고, 유튜브 api를 활용해 검색 결과가 표시되게끔 코드를 설정해주었다. 또한, router 기능을 이용해 각 카테고리 별로 컴포넌트 이동이 가능하도록 구현했다. 완성된 결과물은 다음과 같다.     둘째,fila 페이지 만들기  두번재 과제는 fila 페이지를 만들어보는 것이었다.다양한..