본문 바로가기

전체 글122

단일 제품의 재고관리 및 가격관리 이번 프로젝트는 쇼핑몰이었기때문에 재고관리가 필수였다. 사용자의 편의성을 위해 재고 이상으로 구매를 하려고 하면 미리 알려줄 수 있게 기획을 했다. 그래서 프론트쪽에서 1차로 상품상세 페이지에서 수량을 조절할 때 재고 이상으로 수량을 올린다면 재고 부족 경고창을 띄워주고 버튼도 비활성화 시켜 버튼 자체를 누르지 못하도록 하였고 혹시나 또다른 에러를 컨트롤 하기위해 백엔드쪽에서 2차로 재고수량을 넘겨 결제 버튼을 누른다면 재고부족 경고창을 띄워주면서 통신을 실패시켰다. 재고관리 프론트 쪽에서는 백엔드에게 받아오는 데이터 중 물품의 재고에 대한 데이터를 이용했다. 백엔드에게 받아온 데이터를 저장하는 useState의 변수가 product 였고 그 데이터 중 productOptions[0].optionInve.. 2023. 8. 10.
hover 시 이미지 및 글자 색 바뀌도록 구현하기 우리 사이트에서 유일한 재사용 컴포넌트가 아래에 적어내려갈 상품 미리보기 컴포넌트이다. 메인과 상품 리스트 그리고 상품 상세페이지에 들어갈 컴포넌트이기 때문에미리 분리 작업을 했었다. 그리고 제일 먼저 작업을 해 main으로 merge해 이후 작업에서 바로 쓸 수 있도록 활용했다. 처음 시작을 할때엔 hover 시 이미지가 바뀌는 것이니까 css의 hover 속성을 이용해서 해보려고 했으나 바뀌어야하는 이미지가 db에서 받아와야하는 데이터라서 할 수 없었다. 다른 방법을 찾은 결과 event 중 mouseOver 와 mouseOut이 있었다. 그래서 이번엔 event를 사용해 이미지를 바꿔주는 작업을 해보려고 한다. 만약 styled-components를 사용한다면 js 파일에 css를 적을 수 있기때문.. 2023. 8. 9.
2차 프로젝트 회고록 & 위코드 8주차 1. About team IIIIEE 개발기간: 2023.07.14 ~ 2023.07.28 깃헙 링크 : FrontEnd, BackEnd 1-1. airbnb PET 분석 Products 최근 코로나 이후, 여행객의 수요가 증가하면서 숙박업 시장의 눈부신 성장 2020년 대비 147.1% 상승 (2022) / 84억 달러 공유 경제 서비스 Host / Guest 에 거리낌 없는 공유 경제 서비스 고객과 host 중개/연결해주는 시스템 원하는 날짜 / 장소 필터링 후 예약 기능 장소와 시간에 구애받지 않으며, 소비자의 자유로운 선택이 가능 현장 체험 시스템 숙소를 단순 머무는 공간에 한정 짓지 않으며, 호스트가 주최한 다양한 체험을 추가하여 소비자의 선택 폭 확장. End_User 고객 : 여행지만의 독특.. 2023. 8. 1.
[위코드] 7주차 회고록 2차 프로젝트의 첫주차가 끝났다. midterm 기간에 모든 수업은 종료 했고 그 이후로는 개인 학습과 프로젝트를 진행 했다. 프론트 수가 적다보니 백엔드 속도를 못 따라가고 있는 상황이 많지만 사회에 나가면 이보다 더한일도 있겠지 하면서 좋게 생각하면서 프로젝트에 임했다. ‘모바일 웹으로 레이아웃 구성하기’ 이번 프로젝트의 내 스스로 다짐했던 점은 1차때처럼 레이아웃에 시간을 쏟지 말자였는데, 그걸 실천하기 위해 우리는 모바일 웹을 구현하기로 했다. ui의 모티브가 된 사이트는 강남언니였다. 앱처럼 구현을 하면서 옆에 빈 부분은 광고를 넣는 것으로 기획 했다. 그러면서 이런저런 기능들을 많이 넣을 수 있었고 이번에 내가 맡은 부분은 크게 폼데이터를 이용해 이미지 post 하기, 카카오페이 api 연결해.. 2023. 7. 31.
[위코드] 6주차 회고록 첫번째 프로젝트가 끝나고 midterm 기간을 보냈다. 매주 느끼고 있지만 하루하루를 학원가서 공부하다 점심 먹고 나서 공부 좀 하면 금새 저녁시간이고 좀만 더할까 하다보면 10시 11시가 되어서 막차 가까이 돼서 집에 가고 있긴 하지만 이렇게 회고록을 쓸 때 더욱더 시간이 빠르다는 걸 느낀다. 1차 프로젝트 끝내고 쉬어가는? 주간이면서 2차 프로젝트에 사용할 개념들을 배우는 시간이기도 했고 1차 프로젝트를 정리하는 시간이기도했다. AWS 수업을 듣고 S3에 배포해 백엔드가 배포한 서버와 붙여보기도 하고 커스텀훅과 스타일 컴포넌트 수업을 듣고 왜 필요한지, 어디에 사용할지 고민도 해보았다. 이번 토스 과제로 테스트코드가 있다고 들었는데 시기 적절하게 TDD 수업을 들었고 이번 프로젝트에는 적용할 시간이 .. 2023. 7. 30.
바로구매 버튼 클릭 시 localStorage에 저장 후 구매 페이지에서 정보 불러오기 개인적으로 이번 프로젝트의 중요 기능 중 하나는 바로구매라고 생각한다. 재미를 소비하기 위해 오는 end user의 입장을 생각했을 때 여러 물건을 사기보단 배송료를 지불하더라도 하나만 살 가능성이 높다고 생각해서 넣은 기능이었다. 하지만.. 우리는 바로구매 로직에 제대로 생각하지 못했고 마감 이틀 전 바로구매에 대해 백-프론트 연결고리가 없다는것을 알게 되었다. 그리고 마감 전날 멘토님께 바로구매 로직의 경우 프론트가 진행하는 것이라는 얘기를 듣게 되었다.. 뒤늦게 다른 홈페이지의 바로구매 버튼을 눌러보니 item이 localstorage에 저장되는 것을 볼 수 있었다. 그렇게 급하게 진행했던 기능이었고 아이디 저장을 localstorage에 했어서 이것 또한 쉬울거라고 생각했는데 아이디저장과 다르게 .. 2023. 7. 18.

티스토리툴바