- 프로젝트 배경
- 프로젝트 목표
- 프로젝트 개발
- 프론트엔드
- 백엔드
- 프로젝트 결과
- 스크린샷
- 개발중 이슈
- 개선점
팀원 중 한명의 친척분이 제주도에서 농장을 하시는데, 판매를 위한 홈페이지가 없어서 아쉬운 상태였음. 따라서 보다 편리하고 원활한 주문 및 판매 홈페이지를 만들기로 계획함
농장의 물품(귤, 블루베리, 한라봉)을 판매하며 이에 대한 문의나 농장에 대한 정보를 얻을 수 있는 홈페이지를 개발 예정
HTML, JavaScript, PHP 를 통한 웹 서버 구축
다양한 플랫폼에서 지원가능한 rest api 백엔드 서버 구축
보기좋고 접근성이 좋은 UI, 유기적인 페이지 이동, 사용자 위주의 인터페이스
보기 좋은 UI를 가진 메인페이지 개설
농장에 관한 정보(찾아오시는 길, 전화 번호, 계좌 번호)를 쉽게 얻을 수 있는 소개 페이지 개설
현재 판매중인 상품에 대한 목록과 정보를 얻을 수 있는 상품 페이지 개설
회원가입, 로그인, 유저정보 변경 같은 유저정보를 저장할 수 있는 회원 모델 개발
관리자와 일반유저의 역할 분리
사용자끼리 혹은 운영자와 소통할 수 있는 게시판 개발
SQL Injection, Password 유출, Input Validation 대비
상품을 주문하고 이에 대한 주문정보를 확인 할 수 있게 하기
- 메인 페이지
- 개인정보 처리 방침
- 소개 페이지
- 제품 페이지
- 제품 구매 페이지
- 주문 페이지(+장바구니)
- 로그인 팝업창
- 마이페이지
- 게시판
- Q&A 게시판
- 공지사항 게시판
-
Navigation bar
- 왼쪽 홈 아이콘 클릭 시 메인페이지로 돌아옴
- sticky하게 고정하여 스크롤시에도 볼 수 있음
- 소개, 제품, 게시판 클릭시 각 페이지로 이동
- 게시판 메뉴 hover시 dropdown 메뉴 나타남
- 로그인/회원가입 가능
-
메인 페이지
- 슬라이드 사진(3초마다 자동으로 넘어가며 왼쪽 오른쪽 버튼을 통해 사진 넘기기 가능)
- BEST 상품 클릭시 제품 구매 페이지 연결
- 전체 상품 보기 클릭시 제품 페이지 연결
-
모든 페이지 하단
- 카카오 api 연결하여 카카오 맵 불러옴 - 농장 위치(오시는 길)
- 전화번호, 계좌 정보, 저작권, 개인정보 처리 방침
- 개인정보 처리 방침 클릭시 팝업창으로 개인정보 확인 가능
-
소개 페이지
- 농장 소개 동영상 썸네일 클릭시 재생
-
로그인/회원가입 페이지
-
로그인 페이지
- 로그인창은 팝업창으로 구현 → 로그인 창을 제외한 나머지 배경은 Blur 처리
- Modal 뷰 형태로 구현하였으며, 다른계정으로 로그인하기 화면도 만들어봤음(구글, 페이스북, 네이버, 카카오톡 ⇒ 실제 작동X)
- 회원가입 버튼 누르면 회원가입 페이지로 이동
-
회원가입 페이지
- 회원가입 페이지 상단에 움직이는 이모티콘(애니메이션) 구현
- 아이디/ 비밀번호/ 이름/ 전화번호/ 이메일 → Regular expression으로 Validation 구현
- Regular expression으로 Validation 구현하고 실시간으로 JavaScript를 이용한 경고 구현
- 이메일 선택 부분 dropdown 메뉴 구현
-
-
게시판 구현
- 공지사항 게시판
- 서버 API(method: GET)를 이용해 페이지네이션을 하였음
- 관리자만이 공지사항 게시판에 글을 등록할 수 있으며, 일반 유저인지 관리자인지는 ‘JWT’ 토큰을 이용해서 판단함.
- 일반 유저가 글 등록을 하려고할시 접근된 제한이라는 Alert 표시
- 게시판 내용으로는 번호, 제목, 글쓴이, 작성일, 조회가 있음
- 글을 조회할시 조회수가 1씩 증가하게끔 구현(서버에서 구현)
- 글 작성시 공지사항 제목과 내용을 api Body에 실어 JWT과 함께 POST한다.
- Q&A 게시판
- 서버 API(method: GET)를 이용해 페이지네이션을 하였음
- 관리자 및 일반 유저가 자유롭게 Q&A를 달 수 있으며, JWT를 이용해 로그인이 되어있는 상탠지 확인
- ‘관리자’만이 Q&A게시판에 댓글을 달 수 있으며, 관리자 화면에서는 댓글에 “삭제” 버튼이 보인다.(일반 유저는 삭제 버튼이 안보임)
- 글 세부사항에는 댓글의 총 갯수가 보이며 관리자는 댓글을 자유롭게 삭제 가능
- 공지사항 게시판
-
상품 장바구니 담기 구현
-
장바구니 버튼을 누르면 배열에 해당 상품 정보를 추가하고 로컬 스토리지에 보관.
-
장바구니 페이지로 이동하면 로컬 스토리지에 데이터가 있는지 확인 후 있으면 가져와서 데이터 출력
-
토큰을 바탕으로 유저 정보 가져와서 주문자 정보 미리 입력 .
-
주문페이지로 이동 시 토큰을 보내서 유효한 토큰이면 해당 유저 정보를 가져와서 주문자 정보에 미리 입력. 유효하지 않다면 접근 제한.
-
데이터베이스에 저장되어있는 상품의 정보 출력
-
데이터베이스에 GET 요청을 보내서 상품의 정보를 가져옴
-
가져온 상품 정보들은 자바스크립트에서 반복문과 createElement를 사용해서 상품 레이아웃을 구성 후 body에 추가함.
-
수령인 정보 및 주소를 바탕으로 상품 주문 구현
-
수령인 정보 (이메일, 휴대전화 번호)는 정규식을 사용해서 해당 형식에 맞지 않으면 경고창을 띄움.
-
형식에 맞게 작성하고 주문버튼을 누르면 주문자 정보, 수령인 정보, 주문 상품 정보를 POST 요청을 통해 서버로 보냄.
-
나의 주문 상품 및 배송 상태 확인
-
마이페이지로 이동 시 나의 주문정보와 배송현황 파악 가능.
- AWS EC2 LINUX AMI
- PHP8.1 + APACHE 2.4 + MARIA DB
-
최대한 정규화시켜 중복을 제거
-
ERD
-
호출하는 API 기능을 기준으로 모듈화 / URL 분리
-
MVC패턴에서 Controller + View 와 Model로 분리
- 주문,상품,유저,게시판 CRUD
- 주문시 메일 전송( AWS EC2환경에서는 smtp포트를 막아 사용불가)
- Postman Agent를 통한 테스팅
-
JSON을 이용하여 response body에 응답
-
JWT를 통해 프론트엔드의 권한 확인
-
API명세서를 통한 협업
- SQL INJECTION을 대비하여 preparedstatement 를 통해 파라미터를 bind시킴
- JWT를 통해 잦은 비밀번호 노출과 DB 접근 최적화
- JWT 토큰 서명 만료기한 ID존재검증
- 비밀번호를 DB에 해쉬화하여 저장함 (DB가 공격받아도 비밀번호는 유출되지않음)
- 입력값 검증을 통한 예상외의 입력을 통한 공격 방지
- PHP 디버깅 기능을 비활성화 서버 에러메시지 노출 최소화
- 관리자 계정 생성시 2차 비밀번호 필요
- Login Log를 기록하므로써 비정상적인 로그인 확인 가능
- 레이아웃 배치
- 프레임워크를 쓰지 않아 처음부터 끝까지 손으로 만들어야했던 점
- JWT를 Set Cookie를 통해 담고자 했으나 브라우저 정책이 바뀌어 https를 통해서 Cookie Secure옵션을 사용해야 samesite정책에 어긋나지 않게됨 따라서 도메인을 등록해야했고 ssl인증서를 발급받아서 https로 통신에 어려움을 겪음
- Apache RewirteEngine을 통해 rest api에 맞는 url을 제공하는데 어려움을 겪음
- 상품 및 주문은 개수가 정해져있는 것이 아니라 동적으로 변해서 html만으로 작업하기 어려웠음이를 해결하기 위해 자바스크립트에서 반복문을 통해 태그를 생성해서 html에 넣어주었음
(1) 메인 페이지
슬라이드 화면 : 메뉴바 아래 슬라이드 사진
메인페이지 하단에 베스트 상품 표시
누르면 제품 구매 페이지로 이동
하단 오시는 길, 개인정보 처리 방침 확인 가능
(2) 소개 페이지
소개 영상 : 썸네일 클릭시 농장 영상 재생
상세한 소개 및 하단 고정 문구
(3) 제품 페이지
데이터베이스에 저장되어있는 상품 출력
클릭 시 구매 페이지로 이동
(4) 제품 구매 페이지
구매 수량 선택 및 장바구니, 구매 기능.
하단 상품 상세 설명.
(5) 주문 페이지
장바구니 및 수령인 정보 입력.
(6) 주문 완료 페이지
주문 정보 출력.
(7) 공지사항
공지사항 페이지
(7 - 1) 공지사항 등록 페이지
(8) Q&A 게시판
(8-1) Q&A 게시판 상세 페이지
(9) 로그인 팝업창
(10) 회원가입 화면
(11) 마이 페이지
-주문 조회
-문의하기
(12) 관리자 페이지
-내용
로컬에서 API 전송이 안되는 이슈가 있었습니다. 찾아보니 크롬의 보안성때문에 크롬 브라우저 자체에서 차단하는 기능이 있어서 CORS 라는 오류가 지속해서 발생했습니다.
-해결방안 및 성과
터미널을 통해(MAC기준) 크롬의 Security를 강제로 종료하고 Apache서버를 통해 파일을 열어 API 통신을 진행했고 그 결과 성공적으로 통신을 할 수 있었습니다.
-내용
쿠키라는 개념이 생소했기때문에, 처음에는 서버와 클라이언트간 쿠키를 서로 계속해서 직접 주고받는 형태로 진행되는줄 알았습니다. 하지만 그렇게 진행되는것이 아니라 서버에서 쿠키를 헤더를 통해 전송하며 브라우저측에서 이를 저장하고 클라이언트쪽은 신경쓰면서 쿠키를 전송하지 않아도 되는것을 알았습니다. 하지만 현재 대부분 브라우저에서 쿠키를 저장하기 위해서는 Samesite 정책을 지켜야 하고 다른도메인에서 쿠키를 저장하려면 Secure속성을 사용한 https에서 진행되어야하는데, https통신을 위해서는 따로 도메인주소가 존재해야했고 생각보다 까다로운 절차가 필요했습니다.
-해결방안 및 성과
http로 통신을 하되, JWT를 바디에 실어서 서버로 보내고, 서버에서는 클라이언트측에서 보낸 JWT를 다시 한번 확인하는 방향으로 로직을 짜서 해결했습니다. 그 결과, 로그인 및 회원가입 그리고 관리자를 위한 JWT 생성 및 저장까지 구현했습니다.
-내용
유저가 주문을 완료할경우 해당 주문에 관한 내용(상품정보, 주문번호, 주문일시, 수령자정보)가 PHPMailer를 사용해 메일을 통해 전송되는 것을 구현했고 로컬 환경에서는 정상적으로 구동하는것을 확인했습니다. 하지만 배포 후 메일이 전송되지 않았으며 이는 AWS EC2정책상 SMTP 포트에 의한 아웃바운드를 막았기때문이었습니다.
-해결방안 및 성과
AWS SES를 사용하여서 ip나 도메인을 등록하면 포트와 메일서버를 사용할 수 있고 또는 다른 호스팅, 배포 환경에서 새로 배포하는 방법도 있었습니다. 하지만 현재 저희 환경은 실사용을 위한 환경이 아니었기에 AWS SES를 등록했으나 사용하지는 않고 있습니다.
- 팀원과 협업을하여 개발을 진행하다보니, 각자 진행한 파일들을 merge 하는 일이 잦았는데, 이때 거의 대부분의 파일 경로가 상대경로로 되어있어 매우 불편했습니다. 절대 경로와 상대 경로의 개념을 보다 확실히 파악하고 이용했다면 좀 더 효율적으로 코드를 합칠수 있지 않았을까란 생각을 합니다
- 한 페이지에도 API를 여러개 엮어서 서버와 통신하다보니, 응답시간에 따른 코드 꼬임(?)이 일어났습니다. 예를 들어 1번 api를 통해 받아온 결과를 2번 api를 통해 sorting을 해야하는데, 1번 api의 응답값이 오기도전에 이미 2번 api가 request를 보내버리는 오류가 있었습니다. 때문에 api간 asyn/syn 처리를 해서 보다 효율적인 쓰레드를 이용할 수 있었으면 더 좋았을것 같았습니다.
- REST API는 URL을 통해 자원을 명시하고 HTTP METHOD를 통해 자원에 대한 행위를 나타내는 방법입니다. 파일 확장자명이 나타나면 안되며 자원의 관계 또한 URL을 통해 표시되어야 합니다. APACHE의 REWRITE ENGINE을 통해 URL을 파싱하려고 했으나 작동하지않았습니다. 따라서 API의 명세가 길어지게 되었고 협업에서 프론드엔드분들이 API명세를 참조하는데 어려움을 겪었습니다.