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..

메인 브랜드 컴포넌트는 처음 사이트에 들어갔을 때 브랜드를 어필할 수 있는 컴포넌트를 개발하는 것이라 브랜딩 사이트라는 목적을 이루기 위해 많은 신경을 쓴 부분 중 하나이다. 디자인을 할 때부터 브랜드 명과 설명의 위치, 구도를 잡고 반응형에 따른 레이아웃도 다르게 주었다. 또한, 브랜드 명이 잘보일 수 있도록 background 사진을 어둡게 만들어 글자가 부각되도록 기획했다. 1. 반응형 웹 오류 media 쿼리를 이용해 브랜드 명과 설명의 레이아웃을 달리하면서, 글자 크기나 간격이 일정하지 않고, 모바일 화면에서는 이미지와 글자가 잘리는 오류가 발생했다. 처음에는 이미지를 html코드에 직접적으로 주고, 저체 컴포넌트 height를 vh로 설정했으나, 위와 같은 오류로 인해 다른 방법을 고려했다. ..

먼저 이 프로젝트는 프론트엔드 프로젝트임을 밝히며 글을 시작하겠다.  헤더 컴포넌트는 팀원이 반응형 웹을 구현하는 과정에서 어려움을 느껴 팀원을 대신해 구현을 하게 되었다.   1. 헤더 컴포넌트 구현 먼저, 웹 화면에서 nav bar를 구현한 상태였기에 collapsible과 toggle을 활용해 모바일 메뉴 토글을 구현하려고 했다.그러나 collapsible을 적용하는 과정에서 메뉴 아이콘에 toggle script가 적용되지 않거나, nav bar 형태 그대로 toggle되는 등 오류가 발생했다.  따라서 다른 구현 방법을 고민하게 됐다. div로 새로운 모바일 메뉴 요소를 구현해주고, media 쿼리를 이용해 display:none 속성을 적용하면되지 않을까라는 생각을 하게 됐다.media 쿼리로..

[프로젝트 개요] [프로젝트 주제] : ChatGPT를 이용한 개인 맞춤형 카드 상품 추천 챗봇 [진행 기간] : 2023.09 ~ 2023.12 [개발 인원] : 3인 (본인 포함) [주제 선정 배경] ChatGPT가 등장하면서 사람들의 관심이 매우 빠르게 증가 => 금융업 전반에서의 AI 열풍 가속화 ChatGPT 출시 2개월 만에 월간 사용자 1.23억명 도달, 금융권에서도 금융비서, 개인화된 상담 서비스 제공 중요도가 높아졌음을 확인했다. 기존의 챗봇 서비스는 단순한 키워드 중심으로 자세한 추가적인 상담은 상담원을 통해야 한다는 점에 불편함을 느껴 ChatGPT를 이용한 카드 상품 추천 및 자유로운 대화형 상담 챗봇을 구현했다. [개발 환경 및 역할] 1. 개발 환경 데이터베이스 (DataBase..

Pandas를 이용하여 원그래프를 만들어 예산과 소비금액을 비교하여 보여주고, 데이터베이스에서 예산과 소비금액을 받아와 화면에 보여주는 화면을 구현하던 중 로그인 정보에 맞지 않는 데이터들이 페이지에 보여지는 것을 발견하였다. 따라서 함수를 수정해 로그인정보에 맞는 데이터만 가져오도록 수정해보려한다. 먼저 기존의 코드를 올려두겠다. def budget_data(): conn = connectsql() cursor = conn.cursor() budget_query = "SELECT budget FROM budget;" cursor.execute(budget_query) budget_tuple = cursor.fetchone() Budget = budget_tuple[0] if budget_tuple el..

이전 글에서 카드 추천 페이지를 구현한 과정을 올렸을 때, 카드 상품이 추천되어지는 시간이 오래걸리는 것이 한가지 아쉬운 점이었다. 그래서 추천 과정의 속도를 높이기 위해 카드 데이터를 필터링 해보기로 결정했다. 데이터 양이 많고 거쳐야할 과정이 많은 것이 속도 저하의 원인이라고 보았기 때문이다. ________________________________________________________________________________________________ 먼저 1차적으로 카드 데이터를 신용카드와 체크카드로 구분해보았다. 이전에 구현했던 추천 시스템 로직을 그대로 활용하기 위해 복잡한 방식으로 필터링 하기 보다는 간단하게 데이터를 나누자는 생각이 들었고, 신용카드와 체크카드 버튼을 눌러서 필터..