쇼핑몰에 필수적인 기능 중 하나인 장바구니 기능은 구현하기 위해 로컬스토리지를 사용했다.또한 상품을 추가하고, 장바구니에서 보여주며 수량 조정, 삭제 등 세부적인 기능들을 구현하기 위해 신경을 많이 쓴 부분이기도 하다.   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 페이지를 만들어보는 것이었다.다양한..

6주차 세션  6주차에는 리액트에서 axois를 활용해 api를 불러오는 실습을 진행했다. 먼저 지도 api를 활용해 화면에 지도가 표시될 수 있도록 axios요청을 작성하는 실습이 이루어졌다.  카카오 지도 api를 사용했으며,axios GET 요청으로 response의 status가 200이라면 버튼을 눌렀을 때 상태가 연결 성공으로 변하게끔 상태를 설정해주었다.  api를 활용한 요청도 정상적으로 불러와져 화면에 표시되었고,axios 요청도 정상적으로 작동하는 것을 볼 수 있었다.     세션에서 api를 활용해봤기 때문에 과제 또한 api를 활용해볼 수 있는 실습으로 주어졌다. 공공데이터 api를 활용해 리액트로 불러오는 실습이었다.  실습 과정을 간단하게 정리하자면, 다음과 같은 순서로 진행했다..

5주차 세션  5주차 세션에서는 지난 주에 이어서 리액트 실습이 진행되었다.지난주에는 기본적인 state활용, 컴포넌트 활용에 대해 실습했다면,이번주에는 state와 컴포넌트, props를 이용해서 글쓰기 페이지를 만들어보는 실습이 진행됐다.  먼저 글을 작성할 수 있는 페이지를 만들어주었고,useState와 onChange 속성을 이용해 사용자가 입력하는 값에 대한 상태관리를 하고,입력값을 props를 통해 글을 보여주는 컴포넌트로 전달하면서 사용자가 작성한 글을 확인할 수 있도록 구현했다.  물론 데이터베이스에 저장되어 있지 않아 새로고침하면 작성한 글이 사라지기는 하지만,다른 컴포넌트에서 입력한 값을 props로 또 다른 컴포넌트로 전달해 화면에 표시할 수 있다는 것을 학습했다. 또한,글을 작성한만..

4주차 세션  4주차 세션은 리액트에 대한 실습이 이루어졌다. 리액트는 컴포넌트 단위로 조합과 분해가 쉽다는 장점이 있으며,상태관리와 변화를 제어하기가 쉽다.  기본 구조는 함수형으로, css는 scss를 활용해 세션을 진행했다.  먼저 Header, Main, Footer를 구분하는 컴포넌트를 생성해 구조를 분해하는 연습을 할 수 있었고,Main 컴포넌트에서 useState의 상태관리를 이용해 버튼을 누르면 이름이 변경되는 간단한 동작을 넣어보았다. 이름은 state로 상태관리를 했으며 삼하연산자로 이름을 바꾸는 함수를 정의해 기능을 완성할 수 있었다. const [myName, setName] = useState("Jhon");    function ChangeName(){        setName..