프로젝트-쇼핑몰 제작 (3e)

kyunhyun94·2021년 12월 22일

프로젝트

프로젝트팀명:3E

👜👢🧢3E('NOCAP') - 쇼핑몰 커뮤니티

프로젝트 시작일 :2021-09-29

👜👢🧢서비스로 이동

p.s. 현재 서버를 닫은 관계로 실행이 되지 않습니다

--
스크린샷 2021-10-15 오후 3 51 02

Member.

이동녘:깃허브
한경현:깃허브
이성재:깃허브

웹 화면 구성 : HTML5 CSS3 bootstrap JavaScript``Scss``Nunjucks
검색 결과 데이터 요청 및 출력 : jQuery Ajax JSON``axios
DB 액션 처리 : Sequelize
DBMS : MySQL
개발 Tool :PostMan``Visual Studio Code Atom
AWS 배포 : EC2 RDS
로그인 Api : KakaoTalk API
채팅 Api : Gitpull
프레임워크 : NodeJs
결제: Bootpay
프로젝트 관리 Tool : Google Drive GitHub
사용 모듈(v) : "axios": "^0.22.0", "bcrypt": "^5.0.1", "bootpay-js": "^3.3.3", "cookie-parser": "^1.4.5", "dotenv": "^10.0.0", "express": "^4.17.1", "express-session": "^1.17.2", "moment": "^2.29.1", "morgan": "^1.10.0", "multer": "^1.4.3", "mysql": "^2.18.1", "mysql2": "^2.3.0", "nodemon": "^2.0.13", "nunjucks": "^3.2.3", "passport": "^0.5.0", "passport-kakao": "^1.0.1", "passport-local": "^1.0.0", "sequelize": "^6.6.5", "sequelize-cli": "^6.2.0", "socket.io": "^4.2.0"

주요 기능

로그인 : 일반 로그인, 카카오 로그인 Sequelize``passport``mysql
회원가입 : Sequelize passport``mysql
회원정보변경 :Sequelize``mysql
장바구니 : Sequelize``mysql
결제 : Sequelize passport``Bootpay
마이페이지 : Sequelize``mysql
게시판 :Sequelize``mysql
1:1 채팅 : 관리자 대화 gitpull(api)
실시간채팅:socket.io``rg.rok
검색 :Sequelize``mysql
관리자모드(상품등록 및 삭제) : Sequelize``mysql

발생한 이슈 & 해결 방법

"Nodejs 처리에서의 문제점 파악 ,db및 구조설계 "

Nunjucks 템플릿 엔진 사용에 미숙으로 인한 에러발생

[상황] nunjucks 동적인 처리 미숙으로 인해 템플릿 에러발생

[문제] nunjucks 동적인 처리 미숙으로 인해 템플릿 에러발생

[해결] public파일 생성후 에러 해결

nunjucks for문 구현 시 화면에 구현 장애

[상황] 장바구니 구현시 nunjucks 활용

[문제] for문 과 mysql 관계 설정 미숙으로 인해 화면에 렌더링이 안댐

[해결] nunjucks 와 관게쿼리 해결 완료 로 인해 문제해결

라우트 get,post,CRUD 메서드 연결 구현 이해부족

[상황] 게시물,장바구니,상품등록,회원가입 구현에 있어서 에러발생

[문제] 게시물,장바구니,상품등록등 등 관계쿼리 사용부분에 있어서 CRUD에 대한 이해부족으로 인해 장애발생

[해결] 추가적인 학습과 관계쿼리 추가로 이해하면서 보안하여 장애 해결

Git 브랜치 활용 미숙

[상황] 코드 병합

[문제] 각자 코드 작성 한것에 대한 코드 병합시 에러발생 (코드 병합시 코드 삭제댐)

[해결] 분업화 및 소통활성화 후에 코드 병합시 순차적으로 병합

Nunjucks css,js코드먹통

[상황] 코드 가 스크립트,링크로 경로를지정해줘도 코드가먹지않는현상

[문제] 동적인파일이먹는곳은 메인,레이아웃등 헤더, 코드가 연결이되는데 그외에 인크루드방식으로 사용하는 html은 코드가 먹통이되는현상이생김

[해결] 인크루드방식코드는 html파일자체에 css,js를 작성했음

  - 코드먹통으로인한 SASS사용

  [상황] 링크,스크립트경로지정이안되어 SCSS 컴파일한 CSS 동적인요소언어들이 먹지않는현상

  [문제] 어떻게든 스크립트형식이나 링크를 해결할려고했으나 구글링을해도 넌적스에대한 관련대체방안들이 너무적어서 참고할요소가 없어서 SCSS를 포기해야되는지 고민

  [해결] SCSS파일을 CSS로 컴파일후 겹치는 CSS요소가있는지 각파일마다 확인후 자체적으로 따로 HTML파일안에 스타일을 지정해줌으로써 해결

Socket.io 의 ngrock 서버문제

[상황] ngrock의 문제

[문제] ngrock 이 최대 3명만가능해서 채팅기능이 3명이상 채팅이불가능했던 문제

[해결] ec2서버를열때 rgrock 을 사용하지않고 소켓을 자체적으로 서버를 열어서 인크루드방식으로 바꿈으로서 대량의인원도 문제없도록 해결함

"게시판 CRUD 기능에서의 라우팅과 db관계설정"

두 테이블간의 관계 핸들링 미숙

[상황] 게시글을 작성한 유저의 nick 값을 작성자 란에 넣지 못함

[문제] 해당 페이지로 데이터를 보냄과 nunjucks 문으로 그 값을 불러오는데 있어 미숙

[해결] 라우터에서 정보를 get할 때 User model에서 nick을 attributes에 추가해주고 nunjucks 문에서는 board의 User 모델을 불러옴

조회수 ++ 선언과 할당에 대한 이슈

[상황] 특정 게시물을 눌렀을 때 조회수(viewcount column)값을 올리지 못함

[문제] 렌더링/선언과 할당에 대한 이해 부족

[해결] 해당 게시물이 렌더링 되기 전에 선택된 그 글의 viewcount에 1을 더한값을 할당해 보여줌

"NodeJs ,Socket.IO 를 통해 실시간 통신을 구현"

실시간 채팅 구현

[상황] 사용자들끼리 실시간 쇼핑관련 소통을하기위한 채팅

[문제] socket.io서버 를 코드에 추가할 떄 오류 발생

[해결] 서버의 순서도를 재배치 함으로써 문제 해결

socket.id와 idx

[상황] 특정 사용자에게 메세지를 보내려면 해당 사용자의 socket.id를 알아야 함

[문제] socket.id는 브라우저를 킬 때마다 새롭게 생성됨, 고유한 key가 되지 못함

[해결] 해당 회원을 식별할 수 있는 idx 값을 활용: idx값을 속성이름으로 추가, 그 속성의 값은 소켓의 ID값으로 할당함

connected

[상황] 'ooo님이 채팅방에 입장/퇴장 하셨습니다' 기능을 추가해야함

[문제] 시간 부족으로 인해 미완성

[해결] 나중에 보안 할 예정

NodeJs socket.io 깨달은 점

실시간 사용자들끼리의 채팅이기에 socket.id를 사용하는 1:1 채팅을 구현했음. socket.io 특성 상 사용자 지정에 대한 이해도 숙지

AWS 활용(EC2, RDS)

데이터베이스 AWS EC2방식 체택 인스턴스 생성후 키값생성 후
서버 연결

AWS의 RDS로 데이터베이스를 공유하여 협업하여 프로젝트를 진행하였고
AWS의 EC2를 활용하여 배포를 하였습니다

서버 연결하기 전 SCREEN을 활용 cmd창을 닫거나 컴퓨터를 종료하여도 서버가 계속 돌아가게 유지했습니다

상세 설명

전체 코드 : 코드

- 폴더 설명
views : html(Nunjucks)
video : video files(front 영상)
vendor : cdn파일(scss, jQuery 모음)
uploads : img파일(게시글 등록, 상품 등록 시 자동생성되어 이미지를url로 mySQL DB에 저장)
routes : 페이지별 라우트 생성(CRUD, sequelize)
public : front 동적(css, js, img)
profileimg : img파일(회원가입 시 자동생성되어 이미지를url로 mySQL DB에 저장)
passport : 로그인 관리
node_modeules
models : DB 테이블 생성(sequelize, 관계도 형성)
imgages/icons : favicon파일
fonts : 다운받은 폰트 모음
config : AWS RDS 연동

서버(app.js) : 코드
-> 각 페이지별 라우터 설정, passport 6002번, express 모듈로 넌적스를 http로 연결

페이지별 설명(views-html)

main :

메인페이지입니다 풀스크린방식을 채용했으며 2페이지로 나눠서 제작했습니다
1페이지같은경우는 무한슬라이드방식으로 이미지가 우에서 좌로 흘러가는형태로 제작했으며
백그라운드 HOLIDAY 세일부분은 백그라운드이미지를 Z-INDEX를 줘서 해상도에따른 변화를 잡아줬습니다

넌적스의 extends 형식으로 블록형태로 잡아둔후 작업한 페이지입니다
저희가 리엑트를 배우기전 마지막으로쓸거같은 템플릿엔진이기에 최대한 많은부분을 활용해보고싶었습니다 페이지이동식은
extends로 블록을잡아서 작업하였고

include 방식입니다 해당html파일의 소스의 요소를 영역에 집어넣어 작업하였습니다

Socket.io 를 사용하여 접속자끼리의 실시간 채팅을만들었습니다 마찬가지로 include 방식을 사용하였습니다

관리자와의 채팅이가능한 라이브러리입니다 "깃플" 이며 상담요청시 해당 상담사가 1:1매칭되어 채팅기록,db에서 사용자를 불러서
어떤사용자가 시간표시와함께 어떠한 문의를 남겼는지 따로 저장이가능하며 어떠한상담사가 상담했는지도 표시가됩니다
해당 라이브러리에는 상담요청이왔을때 카톡으로 알림이오는것도있어서 매우 편리하다 판단되어 사용해봤습니다

join :

회원가입 페이지입니다 scss와 gif방식을사용하여 쇼케이스형식으로 왼쪽에는 이미지(GIF)와 음악이 재생이됩니다 음악같은경우 크롬정책상 autoplay방식이 불가능한데 오픈소스인 howl 을 사용하여 사용자가 헤더에있는 "회원가입" 버튼을 클릭했을시 사용자가 음악을 재생하는걸 동의하는걸로 간주하도록 제작하여 회원가입페이지에 들어왔을때 자동으로 음악이 재생되도록 설정하였고 왼쪽하단엔 음악을 끄고 키는 기능을 넣었습니다 KakaoTalk_20211017_160205029

회원가입하는 과정에서 유저의 정보를 담는다. 가입시 입력하는 email값이 unique로 중복이 안되게 하였고 비밀번호는 12자리의 해쉬값으로 저장하고 이미지는 변환된 url값으로 저장한다. KakaoTalk_20211017_160215296

회원가입하는 유저들의 profile img들을 담아 저장할 폴더를 만든다. multer를 통해 img를 profile img에 저장할 수 있게 하고 img 파일은 url 값으로 변환한다. KakaoTalk_20211017_160202804

login에는 passport에 넣어준 로그인 권한을 유지할 수 있게 하는 방법을 local과 kakao로 저장한다. ## login : KakaoTalk_20211017_160529161

serializeUser와 deserailizeUser를 통해 로그인할 수 있게 해준다.

이메일과 비밀번호값을 이용해 user의 정보와 맞는지 비교한다. 비밀번호가 일치하는지 알아보는 과정에서는 bcrypt 모듈을 사용했다. ## catlist(관리자 모드) :

관리자 모드에 post.js에 multer 모듈을 사용하여 이미지업로드를 uploads폴더에 자동 저장하며 url만 데이터베이스에 삽입

get에서 불러온 데이터베이스 값을 twits에 저장하여 하단부분에 렌더링

특정 id값만 불러와 전체상품 데이터베이스(Post)의 해당 특정 id값만 삭제

관리자만 관리자모드에접근하여사용할수있게했습니다
관리자모드에서 저장하게 되면 모든 물품이 하단에 위치하여생성 삭제가능하며
삭제할시 전체 물품 데이터베이스에서 데이터삭제

nike :

넌적스 if문 및 for문을 사용하여 전체상품중 nike에 해당하는 컬럼값을가져와 for문 사용하여 물품정렬

form 태그 사용 물품의 가격 이름 브랜드 등
장바구니데이터베이스로 정보전달
사용하여

alllist :

전체상품 페이지 라우터이며 관리자페이지에서 업로드한 전체물품을 확인할 수 있으며,get으로 전체물품을 불러온 후 정렬을 하였으며 전체물품을 확인가능하며 장바구니도 옆에구현하여 전체물품을 보면서 삭제할수 있게 기능을 구현하였음 ## search :

전체상품에서 입력한 태그값을 입력시 검색이 되게해놧으며 검색 후 물품 장바구니에 추가 가능

cart :

브랜드상품페이지에서 상품을 post방식으로 보내게 되면 cart데이터베이스 담겨 userid에 해당하는 물품을 반환하여 랜더링 됨 또한 삭제시 데이터베이에서 개별삭제되며 전체삭제시 userid값에 해당하는 장바구니 데이터 전부삭제 결제시 payments 데이터베이스에 주문정보가 입력되며 결제 시 해당 유저id 값에 해당하는 장바구니 데이터베이스 데이터 전부 ## profile :