세미 프로젝트

지금 듣고 있는 국비 수업에서 세미 프로젝트를 했었다.
프로젝트 끝난지 1주일 정도 된 것 같은데
가장 골머리를 앓았던 부분을 포스팅 해보려 한다.

메인페이지 작성

우리 팀이 생각한 메인 페이지의 와이어프레임

원래는 여러 div로 높은 리뷰 순, 많이 구매한 순서, 제철음식
이런식으로 다양하게 하고 싶었는데
10일이라는 짧은 기간동안에 메인페이지, 제품 메뉴별 페이지, 로그인 페이지,
납품자 페이지, 관리자 페이지 등을 다 만드는데만 해도
시간을 다쓰고 메인 페이지를 마지막에 꾸며서
시간이 모자라서 어쩔 수 없이 그냥 전체 상품이 출력되게 만들었다..

남자 네 명이라 프론트는 많이 모자라지만 그래도 다들 열심히 만들었음

우선 메인페이지에서 골머리 앓았던 부분은
와이어프레임처럼 사진들을 일렬로 나열하고 싶었는데 이미지 크기가
제각각이라 완전 이상하게 출력됨,,

그래서 찾아보니 display : flex 라는 속성이 있었다.

https://studiomeal.com/archives/197

이 분이 너무나도 잘 설명해주셨다!!

아이템들을 배치할 때 inline이나 block 보다 강력한 기능이라고 한다..!

.container{
   		display : flex;
   		flex-wrap: wrap;
   		padding-left : 6%;
   }

css 파일에 flex의 틀이 될 .container 클래스를 생성해주고

Flex의 아이템들은 가로 방향으로 배치되고, 자신이 가진 아이템의 width 만큼만 차지하게 된다.

flex-wrap은 줄바꿈 속성을 설정할 수 있는데,
기본적으로 nowrap으로 되어있어서 아이템이 flex를 벗어나면
그냥 벗어난대로 출력이 된다.

우리는 nowrap으로 하면 큰일나기 때문에
flex-wrap : wrap 속성을 주어
아이템이 flex 범위를 벗어나면 자동으로 줄바꿈이 되게 하였다.



그래서 한 줄에 4개의 상품만 뜨도록
img 속성의 width를 잘 조절해서 한 줄에 4개의 상품만 뜨게 만들 수 있었다.

처음에는 그냥 div를 만들어서 img마다 div를 생성시켜 만드려고 했는데
flex라는 걸 이해하고나니 훨씬 꾸미기 쉬워졌다.
flex 최고!

• 근데 지금 최종 프로젝트 하면서 부트스트랩 공부해봤는데 진짜 엄청 쓰기 편하네,, 나는 왜 네비게이션부터 화면구성을 다 일일히 수작업으로 만든 것인가,,! 그래도 내 손으로 직접 저정도로 만들어냈다는 것에 뿌듯함을 느끼는 중
  
  
  

아무튼 채소, 육류, 유제품, 소스류 네비게이션 메뉴를 클릭하면 각각 해당 메뉴들에 속하는 상품들이 저렇게 뜬다.
상품마다 div를 따로 만들어줬음.

그리고 div 자체에 click 이벤트랑 hover 이벤트를 주니
마우스를 갖다대면 저렇게 색이 바뀌고 클릭하면

이렇게 해당 상품을 구매할 수 있는 페이지로 이동하게 된다.

이 과정에서 위에 여러 상품들의 정보를 Mysql에서 가져오는 페이지에서는
c: forEach 태그를 이용했었는데

<c:forEach var="food" items="${productList }">

위 코드처럼 똑같은 방식으로 이 페이지에 사용하니 오류가 났었다.



왜 그런가 하니 c: forEach 태그는 반환값이 List 형태일 때 해당 리스트를 도는 반복문이여서 List 형태의 값이 아니면 forEach로 접근할 수 없었던 것이다.

그런데 이 페이지는 해당 상품의 정보만 가져오면 되는데..
물론 List 객체에 저 상품 하나만 추가해서 forEach를 돌려도 되지만 굳이,,? 라는 생각이 들었다.

그래서 찾아보니 단일 객체는 그냥 c: 로 하면 된다고,,

<c:forEach var="food" items="${productList }">

심지어 위 코드처럼 var, items를 주지도 않았고 그냥 서블릿에서

request.setAttribute("food", food);

이렇게 했더니 food.name으로도 그냥 가져와졌다.
이게 왜 돼??? 싶었지만 하긴 어차피 서블릿에서 이 페이지로 값을 보내도록 설정해놨으니 가능은 하겠다 싶었음.
그래도 신기한건 똑같아..

두 번째로 골머리 앓았던 부분은 납품업자 페이지!

이 납품업자 페이지는 다른 조원이 만드셨는데
사진을 업로드하는 기능이 있다보니 같은 서블릿을 공유하게 되었다.



예전에 파일 업로드 배울 때 수업시간에 강사님이 사진에 대한 정보 몇 가지와 사진을 업로드 한 후 페이지에 사진과 정보를 띄워라 라는 미션을 주셨었다.

그 때 사진 이름은 DB에 잘 저장되는데 자꾸 다른 text나 radio button의 값들은 DB에 저장도 안되고 자꾸 null값이 뜨는거임.



그래서 또 열심히 구글링 해보니

enctype="multipart/form-data"

얘네는 다른 페이지에서 값 받을 때 request로 안된다는거.
계속 안돼는 request로 값을 받아오니 null값이 뜨고 DB 컬럼에 NOT NULL 설정해둔 컬럼에는 당연히 NULL 값이 들어갈 수 없으니까 자꾸 오류가 뜨던 것.

request 대신 param[] 이라는 배열을 만들어서

param[0] = fileItem.getName();

이런 형태로 값을 받아올 수 있었다.

아무튼 우여곡절 끝에 납품자가 상품을 등록할 때 상품에 대한 정보와 이미지까지 저장 성공!!!!

그 다음 관리자 페이지인데
관리자는 그냥 회원 관리, 상품 관리, 납품업체 관리 정도만 생각했다.

회원은 그냥 삭제만 가능하게 만들었다. 정보수정까지 하기에는 시간이 부족해서..

납품자관리는 새로운 납품업체가 회원가입을 하면 관리자가 확인하고 승인을 할 수 있음! 꽤나 좋은 기능인듯 ㅎㅎ😚

식자재는 왼쪽에 사이드바 메뉴로 추가/폐기 기능을 선택해서 수량을 추가, 폐기할 수 있음

그리고 회원들의 거래내역을 볼 수 있다!!

대충 이런 느낌으로 10일간의 짧은 프로젝트를 완성해냈다.
정말 길고 화도 많이 나는 험난한 10일이였지만,, 😇
그래도 나름 재밌었던 것 같고 하나씩 코딩해나갈때 정상적으로 작동하는걸 보면서 뿌듯하기도 하고 재밌기까지 했다.



코딩은 정말 어려우면서도 재밌는 것 같아😋