처음엔 그냥 swiper에서 긁어올까 생각도 했지만 나중엔 긁어다 쓰더라도 한번은 직접 만들어보고자 직접 만들었다. 슬라이드 또한 재사용성이 가능하도록 슬라이드와 내용물을 따로 컴포넌트화 시켰다. 드래그 단계화 드래그를 하는데 우선 3가지 단계로 나누었다. 1 : MouseDown 2 : MouseMove 3 : MouseUp 1. MouseDown index와 left는 state값으로 관리하여 값이 바뀔때마다 rerender 시켜주었다. 먼저 MouseDown으로 드래그를 시작한다는 것을 표시했다. MouseUp을 했을때 transition을 주고 싶어서 MouseDown과 MouseUp의 transition속성을 따로 관리했다. const [index, setIndex] = useState(0); ..

1. 회원가입 모달창 회원가입 모달창에서 나는 기존 방식을 벗어나 좌우로 한칸씩 넘기는 UI를 만들기로 했다. 이때 해당 입력하는 Input의 위치를 알려주는 레이블을 만들었다. 1) 레이블 만들기 레이블의 색깔을 넣어주기 위해 index를 state로 만들어 관리했고 화살표 버튼을 누를때마다 조절해줬다. 그 레이블이 index가 x일때 초록색으로 바뀌게 코드를 짰다. 2) 리팩터링 7개를 늘어놓은게 너무 길어보였고 보기 싫었다. 그래서 map을 통해 반복하여 만들기로 했다. {new Array(8).fill(0).map((v, idx) => ( ))} 그래서 위와 같이 코드를 간단하게 줄였다. 나중에 알게된 사실이지만 styled-component에 props를 넘겨 삼항연산자로 처리할수 있었다.

react에서는 기존 js처럼 style.display가 안먹었다. 다른 방법을 찾다가 삼항연산자를 이용하여 display를 조절하기로 했다. 이런식으로 style을 조절했다.

라우팅을 많이 쓰지 않고 버튼들과 모달창을 컨셉으로 홈페이지를 만들려고 했다. 그렇기 때문에 이 홈페이지에서 모달창이 차지하는 비중은 클것이라고 생각했고 컴포넌트화에 신경썼다. 모달만들기 컴포넌트화를 위해서는 코드를 작성하기전 구조를 먼저 파악하고 어떤식으로 구성을 할지 미리 생각해야했다. 이 부분을 생각하면서 처음에는 정말 힘들었지만 구조가 이해될수록 할만 하다는 생각이 들었다. 그렇게 모달을 만드는 순서를 3가지로 정리했다. 1. 모달창을 띄우는 버튼 생성 2. 버튼의 텍스트를 받는 곳 3. 텍스트에 따라 다른 컴포넌트 모달을 띄운다. 1. 모달창을 띄우는 버튼 Modal_btn.js import React, { useState } from "react"; import Modal from "./Mod..

처음으로 리액트와 서버를 따로 관리하며 프로젝트를 기획했다. 기능들 위주로 홈페이지를 구성하려고 한다. 참 편한 쇼핑몰[CHAM] 간단한 쇼핑몰을 기획하려고 한다. 물건올리기, 구매 등 많은 기능이 들어가진 않을것 같다. 목표 리액트를 활용하는 만큼 재사용성을 항상 생각하며 코드를 짜려고 한다. 작은 부분이더라도 습관화들이면 리액트의 장점을 극한으로 활용할수 있을거 같았다. 기능 로그인, 회원가입 어드민 페이지(유저관리, 상품관리) 판매자 페이지(물건올리기, 판매금 정산) 상품 구매시 포인트 지급 쇼핑카트, 구매 상품 후기 등록 DB 데이터베이스도 기획을 하고 시작하려고 했지만 개발을 진행하면서 어짜피 컬럼값들을 추가하거나 삭제하는 경우가 생길거 같아 대략적으로 큰틀을 짜놓고 그때그때 필요한 부분을 만들..