[Salle] 4. 판매하기 페이지

2020. 12. 16. 23:03ㆍ카테고리 없음

728x90

판매할 상품을 등록하는 SellProduct 페이지 기능을 구현해보았다. 백엔드와 DB는 어렵지 않게 구현했는데 8가지 상품등록정보를 .jsp파일에 구현시키는 부분이 힘들었다. 특히 상품이미지를 첨부파일로 받아서 화면에 썸네일 같이 보여주는 기능을 jQuery가 아닌 js파일을 만들어 시도하다가 시간을 지체했다. $() 함수는 document.getElementById() 함수를 단축형으로 나타낸  jQuery다. 유튜버들이 jQuery는 회사에서 쓴다면 배우고 아님 JS만 배워라 했는데 아주 많이들 쓰는군... 

오늘의 아웃풋

가장 아쉬운 건 오늘 페이지 완성시키고 싶은데 벌써 23시가 다 돼버렸다. 우아한 형제(배민)에서 하는 온라인 컨퍼런스도 봐야돼서 귀가 후 영상을 보면서 하루를 마무리 해야겠다. 다하고 자고 싶지만 내일도 있고 무리하면 안된다.

요약

  • NEXT TODO - sell한 상품이 있으면 내상점에도 추가해주는 기능, 카테고리 하위목록 변수화, product DB member id, email 받아 저장할 방법, sell.jsp 완성 

  • 프런트엔드... 상품이미지 jQuery의 늪에 빠져 보낸 하루

  • 백엔드 구현할 때 설계를 모듈 단위별로 하나씩 노션에 글로 설계한 다음 코드를 친 건 좀 멋있었다ㅋ

진행사항

  • 판매하기 화면 구현 - /sellproduct

    • 이미지 등록 (max 5) - .jpeg, .png, jpg...

      • 이미지 규격, 용량 안내문구 추가

      • 클릭 시 로컬 폴더 찾기 창 띄우기 - <input type="file">

    • 제목 - text

    • 카테고리 - dropdown(select > option)

    • 지역선택

      • 내 위치? / 주소검색 - 동 단위까지 출력

    • 제품 상태선택 - radio

      • 상/중/하

    • 가격 - text

    • 상품설명 - text

  • 판매상품(product) 등록정보 DB에 저장 - RDBMS

    • DB 컬럼

      • MEMBER ID - MEMBER 테이블과 join해서 사용할 수 있기 때문에(어떤 멤버의 상품인지 알아야 채팅이나 내상점에 표시할 수 있기 때문에 email, ID 둘 다 넣자)

      • EMAIL

      • 등록일 - date TIMESTAMP(9) WITH TIME ZONE

        • TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP WITH TIME ZONE

        • H2에선 TIMESTAMP 디폴트로 자동 현재 시간 UPDATE ON TIMESTAMP WITH TIME ZONE 기능을 제공하지 않고 있음 그래서 trigger 기능을 활용해 직접 만들어 써야함(참고링크)

      • 상품이미지 - imgPath VARCHAR(500) *VARCHAR2와 차이는 없지만 추후 oracle에서 VARCHAR는 다른 용도로 쓸 수 있다고 한 적이 있기 때문에 2 사용을 권장

        • DB에 주소값만 저장하고 실제 이미지는 Server에 저장하는 방식이 보편적임

        • 내 건 로컬서버를 이용한 Demo 프로젝트라서 등록된 이미지 파일은 로컬폴더로 저장

      • 제목 - title VARCHAR(50)

      • 카테고리 - category VARCHAR(50)

      • 지역 - region VARCHAR(50)

      • 상품상태 - quality VARCHAR(20)

      • 가격 - price INT(20)

      • 상품설명 - detail VARCHAR(1000)

    • CREATE TABLE product ( ID INT PRIMARY KEY, EMAIL VARCHAR2(50) NOT NULL, PR_REG_DATE TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP WITH TIME ZONE, PR_IMG VARCHAR2(500) NOT NULL, PR_TITLE VARCHAR2(50) NOT NULL, PR_CATEGORY VARCHAR2(50) NOT NULL, PR_REGION VARCHAR2(50) NOT NULL, PR_QUALITY VARCHAR2(20) NOT NULL, PR_PRICE INT(20) NOT NULL, PR_DETAIL VARCHAR2(1000) NOT NULL );

  • RDBMS

    • Important feature, Single DB, Several tables

    • DBMS의 view mechanism - join fields individually for each authorized personnel. It is about security.

    • RDBMS and DBMS are almost same feature, only difference RDBMS related to manipulate table and data.

  • SellProductController

    • GET은 화면만 띄워주고, POST는 ProductService를 통해 DB에 정보 저장

  • SellProductValidation

    • 모든 정보 입력하지 않았을 때 발생하는 Exception 추가

  • ProductService

    • .jsp 화면에서 받은 정보들을 Product 객체로 받아서 Mapper에 SQL로 넘겨줌

  • Product(VO)

    • DB 테이블 정보와 동일한 변수들 저장 → Getter/setter 생성

  • ProductMapper(xml)

    • Insert문으로 DB 동작 →parameterType은 Product 객체

    • id, email은 session으로부터 어떻게 받아줄지?

  • sell.jsp

    • img - (참고링크)

      • <label>은 <input>과 css? 사이에서 인터페이스 역할을 한다. 이를 위해 <input id="?">를 지정해줘야 한다. 또한 input type이 체크박스일 때, 라벨 text만 클릭해도 check가 된다.

      • js 파일 저장 시 디렉토리 경로의 target 폴더 쓰지마라. resources에 있는 파일의 클론인 것 같다. 거기 저장하면 프로그램이 인식하질 못한다. → resources > js > sell.js 로 설정한 뒤 절대경로로 src를 잡아주니 정상적으로 인식된다. 확인이 필요하다면 브라우저에서 f12를 눌려 .js가 정상적인 페이지 로드 200 코드를 가지고 있는지 보면된다.

      • jQuery $() 함수는 getElementById함수의 단축형이다. 고로 별다른 의미가 없다. 굳이 따지자면 괄호 안의 id를 호출한다. 라는 의미가 될 것이다.

      • '.change(function() {...' 값은 element 요소값이 변경될 때 function이 발생한다.

      • this.files는 html의 <input type="file">을 취합해 만들어진 filelist다.

    • 등록정보별 구역은 어떤 태그를 사용해서 나눠야할까?

      • 번개장터: 내가 생각한 것과 같은 <ul>, <li> 세트로 <div>를 새끼쳐가며 구현했다.

      • 당근마켓: article > section으로 작아지는 구역설정, 처음보는 태그라 검색해봐야함 <div>를 굉장히 많이 사용했고 텍스트는 <p id=?> 안에 적었음.

      • 네이버 중고나라: 카페 글쓰기 내에 있는 단순한 판매 기능들이지만 구역은 section으로 나누었음 → 나도 section을 써봐야겠다. (참고링크) <article>은 외부 데이터랑 나눌 때 쓴다고 함

      • 상품이미지 > 제목 > 지역과 같은 등록정보별 구획은 section으로 나눔. 하나의 section 안에서 관리해야하는 box는 <div class=?>를 지정해서 조작함

    • 카테고리 인자(name) 하나씩 복붙하는건 너무 비효율적이다. home.jsp에도 쓰고 있기 때문에 변수 지정해서 사용하는 게 맞을듯. 방법 찾자.

이슈

  • Validator - 갑자기 동작을 하지 않음 > message properties 설정 확인할 것

    • 해결완료

  • Vaildation message properties 설정 변경을 위해 파일 위치 target > classese 찾으니 존재하지만 디렉토리 트리에 뜨지 않음

    • project explorer > filters (icon) > uncheck something that causes classes hide

    • messagesource.properties와 application 연동 되지 않음. 해결해야 하지만 핵심기능은 아니라 안내 메시지일 뿐이기 때문에 일단 다음 작업으로 넘어가겠음

  • .js 사용중 script로 이미지 등록 후 화면에 띄우는 코드가 오류 → 동작하지 않음

  • 사람들이 JS랑 jQuery를 명시하지 않고 섞어쓰는 것 같다. jQuery는 외부 .js에서 쓰려면 설정이 어려워 html에 바로 쓰는듯 나도 html에 바로 적어야겠다.

    • 해결완료!

 

댓글 0

티스토리툴바