sudong-d 님의 블로그

로그인한 회원의 장바구니 상품을 데이터베이스에서 불러와 페이지에 표시하는 기능을 구현하였습니다  Cart 컴포넌트를 생성하고 로그인 시 세션에 저장한 사용자 id와 사용자 고유 id를 가져온다장바구니 리스트를 담을 Cartlist라는 배열을 만든다 이 배열은 서버에서 불러오는 장바구니 상품 데이터를 저장하는 역할을 한다useEffect를 이용해 페이지 렌더링 후 장바구니 리스트를 가져오기 위해 사용자 고유 id를 서버로 보낸다서버에서 데이터를 받으면 setCartlist를 통해 만들어둔 Cartlist 배열에 데이터를 담는다  리액트에서 받은 사용자 고유id를 함수에 담고 받은 데이터를 콘솔에서 확인한다 디버깅을 위한 코드로, 서버에서 클라이언트로부터 데이터를 잘 받았는지 확인할 수 있다받은 데이터를 이..

상품 가격을 문자열로 '10,000원'과 같은 형식으로 저장하면 계산 시 복잡해지므로, 처음부터 정수로 저장하여 가격 계산을 더 간단하게 처리할 수 있도록 변경했습니다  홈페이지에 map() 함수를 이용하여 상품을 표시하는 컴포넌트이다props로 받아왔던 productprice를 천 단위 구분 기호를 추가하는 내장 메서드를 이용하여 세 자리마다 ,를 찍게 바꾸고 변수에 담는다가격을 표시할때 뒤에 '원'을 추가로 넣어준다 varchar였던 기존 product_price 타입을 int로 바꿔준다 상품 업로드 가격입력 부분에서도 정수만 입력할 수 있게 타입을 number로 바꿔준다  기존과 다르게 가격을 정수로만 입력해 준다 데이터베이스를 확인해 보면 정수로만 입력되어 있다 홈페이지를 확인해보면 입력은 정수로..

홈페이지 로고를 클릭하면 홈페이지로 이동하는 기능을 구현하였습니다 이 작업을 하면서 기존에 페이지이동에 사용했던 navigate()와 태그 링크 차이점에 대해 궁금하여 찾아보았습니다 간단하게 요약하자면 태그 링크는 페이지가 새로 고침되며 서버 요청을 보내는 것이고, navigate()는 페이지가 새로 고침되지 않고 클라이언트 측에서 URL만 변경되며 빠르고 부드러운 이동을 제공합니다 홈페이지를 눌러서 이동할 때는 새로고침에 되는 것이 좋겠다고 생각하여 태그를 사용하였습니다  간단하게 Logo 컴포넌트를 생성한다태그를 이용하여 SUDONG SHOP이라는 문구를 사용하고 태그를 이용하여 홈페이지 링크를 걸어준다  링크를 사용할때 기본적으로 방문했던 링크는 색상이 변하고 밑줄이 생기는걸 없애기 위해 클래스..

상품 상세페이지에서 장바구니 버튼을 누르면 사용자 id와 상품 id를 서버를 통해 데이터베이스에 저장하는 기능을 구현하였습니다   혹시모를 id 중복을 우려하여 장바구니에는 데이터베이스의 각각의 사용자 고유 id를 사용하도록 하였다기존에 사용자 id 만 세션에 저장했던걸 사용자의 고유 id도 저장하도록 한다  로그인 상태를 확인하기 위해 세션에서 고유 id를 불러와 변수에 담는다  기존에 만든 Productdetail 컴포넌트에 장바구니 담기 버튼을 추가한다버튼을 누르면 위에서 불러온 세션에서 불러온 고유 id로 현재 로그인 상태인지 확인하고 로그인 상태가 아니면 알림이 표시되고 로그인 화면으로 이동한다로그인 상태라면 사용자 고유 id, 상품 id를 담아서 서버로 보낸다요청이 성공적으로 완료되면 상품을 ..

상품을 등록하는 기능을 구현하면서 리액트의 특성을 살리지 못한 것 같아서 관리자 페이지에서 상품등록 부분만 추출해 보겠습니다 기존에 Manager 컴포넌트에 있었던 상품등록 부분을 추출하여 ProductUpload 컴포넌트로 만들어준다상품등록 입력부분 State도 ProductUpload 컴포넌트에서 따로 관리한다  Manager 컴포넌트에서 작성했던 값 입력 확인코드와 서버로 데이터를 보내는 부분도 추출한다동작은 기존과 같이 빈 칸이 없는지 확인하고 데이터를 담아서 서버로 보낸다등록완료 후 홈페이지로 돌아간다  렌더링 부분도 기존 코드와 같게 작성해준다  Manager 컴포넌트는 위 사진과 같이 간단해진다  기존과 같이 상품을 등록하고 제대로 등록이 되는걸 확인할 수 있다

관리자 페이지를 만들어 상품을 등록하는 기능을 구현하였습니다  홈페이지에 버튼을 추가하고 네비게이트를 이용하여 관리페이지로 이동한다  매니저 컴포넌트를 만들고 상품 정보를 저장할 State들과 navigate를 선언한다  관리페이지에 상품명, 가격, 카테고리, 이미지 파일명을 입력할 수 있게 만든다각각의 입력에 에로우펑션을 이용하여 코드를 간소화 하였다상품명, 가격등 정보를 입력하면 각각의 State에 저장된다카테고리는 select를 이용하여 선택할 수 있고, 이미지는 특정 폴더에 이미지를 넣고 이름만 작성한다   입력값을 넣고 버튼을 누르면 productupload가 호출된다productname, productprice, productcategory 중 하나라도 비어 있다면 알림창을 띄우고 함수 실행을..

홈페이지에서 상품 이미지를 클릭하여 상품 상세페이지로 이동하면 해당 상품의 정보를 db에서 불러오는 기능을 구현하였습니다  먼저 가져온 데이터를 저장할 Productinfo라는 useState를 객체로 선언한다useEffect를 이용하여 페이지가 로드되면서 url을 통해 가져온 상품 id를 서버로 보낸다가져온 데이터를 setProductinfo를 이용하여 객체에 담는다데이터를 확인하기 위해 콘솔에서 확인한다  리액트에서 받아온 Productid를 받아와서 Productid 변수에 넣는다콘솔에서 id를 확인한다데이터베이스와 연결 후 모든 데이터를 가져오는 SQL쿼리를 상품id를 사용해 작성한다SQL쿼리를 실행하고 db에서 가져온 데이터를 result 변수에 넣는다콘솔에서 가져온 데이터를 확인한다produc..

상품 이미지를 클릭하면 해당 상품의 상세페이지로 이동하는 기능을 구현하였습니다  홈페이지에 상품 이미지, 가격 등 정보를 props로 보내주는 부분에 상품의 프라이머리키인 id를 추가하여 보내준다  상품정보를 표시하는 Product 컴포넌트에서 이미지에 링크를 건다링크에 뒷부분에 props로 전달받은 productid를 넣어주도록 작성한다이미지를 클릭하면 해당 상품의 프라이머리키가 url에 들어가게 되고 페이지이동을 하게된다  url 값을 가져오기 위해 App.js 파일에서 경로를 지정해준다:productid는 동적 URL 파라미터로 이 값을 useParams 훅을 통해 컴포넌트에서 가져올 수 있다고 한다  상품상세페이지인 Productdetail 컴포넌트를 만들고 productid를 잘 가져오는지 확인..

로그인 화면에서 아이디, 비밀번호 입력하고 그 값을 데이터베이스 회원정보 테이블과 비교 후 일치하는 정보가 있으면 로그인이 되며 홈페이지에 아이디를 표시하고, 기존에 로그인 버튼을 로그아웃 버튼으로 바꿔주는 기능을 구현했습니다  아이디, 비밀번호를 입력하고 로그인 버튼을 누르면 State값을 확인하여 입력을 했는지 확인한다아이디, 비밀번호가 입력되어 있으면 loginData라는 객체에 넣는다 입력한 값을 넣은 객체를 서버로 보낸다서버에서 응답이 1이면 로그인성공을 의미하고 1이 아니면 실패를 의미하여 각각의 알림을 띄운다로그인이 성공하면 세션에 아이디를 담고 홈페이지로 이동한다  파이썬에서 입력한 아이디와 비밀번호를 받아서 콘솔에서 확인한다데이터베이스와 연결 후 SQL쿼리를 작성하여 실행한다결과를 가져오..

이전글에서 상품을 보여주는 컴포넌트를 만들어 상품마다 이미지경로, 이름, 가격등을 입력하여 웹페이지에 출력하는 것까지 했는데 항상 코드를 수정하며 상품을 출력할 수는 없으므로 데이터베이스에 이미지경로 등 정보를 저장하고 한번에 꺼내와서 map() 함수를 이용하여 출력하는 기능을 구현하였습니다 데이터베이스에 상품 테이블을 만든다컬럼으로는 상품명, 가격, 타입, 이미지경로, 프라이머리키 이렇게 넣었다  지금은 웹페이지에서 상품정보를 추가할 관리자 페이지가 없으므로 DB에서 직접 정보를 넣어준다products라는 state를 배열로 선언한다useEffect() 훅을 이용하여 페이지가 렌더링 될 때 서버쪽으로 요청을 보낸다서버에서 넘겨받은 데이터를 setProducts를 이용하여 state값을 변경한다try....