(김유선) 중고거래사이트 만들기 1일차 - 기획하기

시작

중고거래사이트를 만들어보면서 csr(클라이언트 사이드 렌더링)을 구현할 것이다.

csr의 장점인 서버비용과 데이터비용의 절감을 극대화하기 위해 spa(싱글 페이지 애플리케이션)을 구현할 수 있도록 할 것이고, 필요에 따라(로그인 기능과 같은 중요한 기능들을 위해) ssr을 병행할 수도 있을 것이다.

 

요구사항 분석

구매자이면서 판매자로 활동할 수 있는 사용자들끼리 물건을 구매하고 판매할 수 있도록 하는 사이트를 구현할 것이다.

 

- 사용자 -

판매글 업로드 기능

판매글 열람 기능(업로드 시간, 상품명, 설명내용, 사진, 올린 사람의 아이디, 카테고리, 가격 등을 열람)

판매자와 채팅 기능

로그인 기능

안전결제 기능(수수료를 주고 중간에서 돈을 맡아주는 기능)

후기 작성 기능

 

구현되어야 하는 기능

회원가입과 로그인 기능

판매하고 싶은 물건을 업로드하고 글을 작성할 수 있으며(게시판 기능)

구매하고 싶은 물건을 판매 중인 판매자에게 원하는 제품과 채팅을 보내고 판매자와 서로 대화할 수 있음

찜 버튼을 통해 원하는 물건들을 위시리스트에 저장해놓을 수 있음

검색 기능을 통해 원하는 물건들을 찾아볼 수 있음

카테고리 기능을 통해 원하는 물건의 종류를 지정할 수 있음

api 명세서

api	기능	method	권한
/	쇼핑몰 메인 페이지	get	누구나
/login	로그인화면 보기	get	누구나
/login	로그인 하기	post	누구나
/logout	로그아웃하기	post	로그인한 사람
/register	회원가입 화면 보기	get	누구나
/register	회원가입 하기	post	누구나
/signout	탈퇴하기	post	로그인한 사람
/:user	유저 보기(올린 상품, 달린 후기 등)	get	누구나
/chatlist	채팅 목록 보기	get	로그인한 사람
/chat/:user	유저와 채팅보기	get	로그인한 사람
/chat/:user	유저와 채팅하기	post	로그인한 사람
/wishlist	위시리스트 보기	get	로그인한 사람
/wishadd	위시에 추가하기	post	로그인한 사람
/products/:productnum	물건 보기	get	누구나
/upload/:productnum	내 물건 업로드하기	post (insert)	로그인한 사람(본인)
/delete/:productnum	내 물건 삭제하기	post (delete)	로그인한 사람(본인)
/update/:productnum	내 물건 수정하기	post (update)	로그인한 사람(본인)
/review/:user	리뷰달기	post	로그인한 사람(상점 주인x)
/review/update	리뷰 수정	post	리뷰 쓴 사람(본인)
/review/delete	리뷰 삭제	post	리뷰 쓴 사람(본인)
/search/product?q=검색어	상품 검색	get	누구나
/categories/:categoryname	카테고리 보기	get	누구나

사용 기술 스택

html - 하이퍼텍스트 마크업 언어는 웹페이지의 구조를 정의하는 웹을 위한 마크업 언어

css - html을 꾸며줌

javascript - 화면에 움직임을 부여함(csr를 구현하기 위해 사용하기도 함)

node.js - 자바스크립트 언어로 서버를 구현하기 위해 사용

express - 서버를 더 쉽게 구현할 수 있도록 도와주는 도구(노드제이에스를 간결하게 작성하게 해줌)

mongodb - 데이터를 저장할 수 있게 해주는 데이터베이스 도구

aws - 아마존에서 제공하는 클라우드 컴퓨팅 플랫폼을 구성하는 원격 컴퓨팅 서비스(웹 서비스라고도 함) 모음(그 중 하나가 내가 쓸 s3)

 

디자인 기획 (캔바)

 

수정(04.09.02:13)-----

 

웹사이트 디자인

기획한 디자인에 맞게 프레임워크 없이 쌩으로 HTML으로 웹사이트를 디자인했다.

새벽 2시가 다 되어가서 힘들다...

확실히 html은 하면 할수록 실력이 느나보다. 이젠 어렵지는 않은데 시간이 좀 걸리긴 걸린다. 점점 빨라지고 있지만

그리고 html은 배움의 끝이 없다... 이번에도 사이트들을 분석하다가 새로운 것을 배웠다.

 

그것이 바로

flex 속성

<div class="product_boxing">

                    <p class="product_price">5,000원</p>

                    <img class="heart-empty" src="./img/heart-empty.png" alt="">

                </div>

.product_boxing{ display: flex; }

내 경험상 flex 속성은 그 자체로는 사실 block과 크게 다르지 않았다. 하지만 이번에 사용해보니 flex는 부모로서 태그 안에 있는 새끼 요소들이 많다면 flex는 아주 그냥 반짝 빛을 발했다.

 

 

 -> 이런 아이콘(갈라져있는 덩어리)을 가진 친구가 바로 flex 속성을 가진 친구이다.

 

 

 

 

초기 상태(5000원과 하트의 어미만 만든 상태) ->  product_boxing에 display:flex를 준 상태 -> 거기에다가 또   align-items: center;를 준 상태 (하트 길이가 정상으로 돌아옴)

 

 

거기에&nbsp; justify-content: space-between;준 상태(사이가 벌어짐

 

 

또 나는 채팅, 로그인, 회원가입을 title-btns로 감쌌는데,

.title-btns{ display: flex; }

를 주자마자 갈라져있던 아이들이 한 곳으로 모였다. 

채팅로그인회원가입 <- 이렇게

그래서 이제 아이들에게 margin-right로 거리감을 줬다.

 

2. align-items

 

 

이건 내가 만든 웹사이트에서의 물건인데, 가격이 길어지면 하트는 알아서 밀리게 된다. 물론 난 지금까지 이것을 각각 float:right, float:reft로 어찌저찌 해결을 해왔지만, 나도 저런 파랭이를 써보고 싶었다(왠지 멋있고 더 깔끔해보임).  여기서 중요한 건 5000원이 500000000원이 되면 길이가 길어지므로 그에 맞게 조정이 되어야 했다.

 

 

 

 

 

 

어미에게 이 기능을 먹여주면 새끼들이 정렬된다. 나는 center를 줬는데, 이렇게 되면 새끼들이 위아래 중간으로 이동한다.

align-items: center;

 justify-content: space-between;

 

 

참고 사이트 : 

https://developer.mozilla.org/ko/docs/Web/CSS/flex-wrap

https://developer.mozilla.org/ko/docs/Web/CSS/justify-content

flex-wrap - CSS: Cascading Style Sheets | MDN

 

 

 

 

 

아 진짜 쓰기 불편하다 이거;; 포기