검색 기능은 구현하는 데 마지막까지 힘들게 했던 기능 중 하나이다. 로직은 오류가 없어보이는 데 계속해서 검색을 실행하는 로직 자체가 작동을 안해서 원인을 찾는 데 매우 오래걸렸다.  정작 로직이 실행되지 않는 원인은 매우 간단한 부분에서의 오류 때문이었다....정말...단지...Key event 속성 이름 값이 잘못되었기 때문이었다. 검색을 실행하기 위해 'Enter' Key event를 이벤트 리스너로 설정해주었다.이 과정에서 처음에 keyup 이라는 속성 값을 사용했지만 keyup 속성이 현재 존재하지 않는 속성 값이었기 때문에 로직 자체가 실행이 안되는 것임을 발견하게 됐다.따라서 이벤트 속성 값을 keydown으로 변경해주었고,이후로는 검색 로직이 정상적으로 작동하는 것을 확인할 수 있었다.if..

마이페이지에서는 사용자 본인이 주문한 상품 내역, 고객 지원 페이지에서 문의한 내역을 확인할 수 있으며,회원 탈퇴도 가능하도록 페이지를 구현했다. 주문 내역에서는 주문 취소, 주문 교환, 배송지 변경 기능도 이용할 수 있다.   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 워..

[프로젝트 개요] [프로젝트 주제] : 디지털 약자를 위한 큰 글자 브랜딩 사이트 [진행 기간] : 2024.03.08 ~ 2024.03.23 [개발 인원] : 3인 (본인 포함) [팀명] : 스틸스 [주제 선정 배경] 과학기술정보통신부의 '2022 디지털정보격차 실태조사'를 살펴보면, 65살 이상 고령층의 디지털 정보화 역량 수준은 평균과 비교했을 때 절반 수준인 54.5%에 그침 디지털 기술이 가속화되면서 일상은 편리해졌으나, 고령층 등 신문물에 약한 디지털 약자가 새로운 난제로 떠오르고 있음을 확인했다. 디지털 격차 해소는 반드시 필요한 중요한 문제이며, 기존의 쇼핑몰을 이용할 때 작은 글씨와 복잡한 절차에 불편함을 느껴 디지털 약자를 타겟층으로 쇼핑몰 구성을 간소화하고, 브랜드 마켓팅을 목표로 큰..

코드 작성을 완료하고 사이트를 배포하기 위해 node.js와 netlify를 사용해 배포 환경을 만들었다. 배포까지 완료한 후 링크를 통해 페이지에 들어갔을 때, 생각지도 못했던 오류가 발생하고 있는 것을 확인했다. 분명 Local Live 환경과 Local build 환경에서는 작동이 잘 되던 기능이 배포 환경에서 작동하지 않는다는 것이었다. 처음에는 오류가 발생하는 원인을 알 수 없어 막막하고 비상🚨이 걸렸지만, 리더님께 피드백을 받고 오류의 원인부터 하나씩 찾아가기 시작했다. 1. 이미지 경로 오류 상품 페이지에서 상품 정보를 확인하는 이미지가 사이트에 제대로 안 불러와지고, 화면에 안나타나는 오류가 발생했다. 상품 이미지 경로를 script 코드에 명확히 속성을 주었으나, 배포 사이트에서 이미지 ..

페이지를 연결하고 css를 적용하는 과정에서 작은 오류들을 해결한 과정에 대해 적어보려 한다. 맡아서 제작했던 컴포넌트가 아니었기에 따로 글을 구분해서 작성하지는 않고, 한번에 적어보겠다. 내가 작성한 코드가 아니어서 오류의 원인을 발견하고 수정하는 데 시간이 꽤 걸렸지만, 오히려 코드를 분석하고 오류를 찾아내는 경험을 기르기에 좋은 기회였다고 생각한다. 1. swiper 이미지 overflow 충돌 해결 hover css를 적용하는 과정에서 swiper의 이미지가 확대될 때, swiper의 크기에 막혀 확대 부분이 안보이게 잘려지는 것을 발견했다. swiper에 overflow:hidden이 적용되어 있었기 때문인데, 처음에는 hidden을 visible로 바꾸어 이미지가 swiper 밖으로 확대되도록..

구매 페이지는 반응형 웹이라는 목표에 초점을 맞춰 사용자가 최대한 정보를 보기 쉽도록 레이아웃을 구성하는 데 많은 힘을 썼다. 기획에서부터 모바일과 웹 화면으로 나누어 구조를 만들었고, 포함될 주문 단계 역시 간소화했다. 1. 모바일 화면 모바일은 화면의 크기가 작기 때문에 주문 상품 정보를 나란히 배치해 한눈네 확인할 수 있도록 했다. 이에 display:flex 속성을 사용했고, 나란히 배열하니 상품 정보가 서로 공백 없이 달라붙게 되어 보기에 불편하다는 것을 확인했다. 따라서 상품 정보를 포함한 div에 margin을 주고싶어졌다. 모든 div에 margin을 주기엔 레이아웃이 의도와 달리 변형될 것 같아 not(:nth-child), not(:last-child) 속성을 활용해 원하는 위치의 di..