이번 글은 중고거래 웹사이트 프로젝트를 진행하면서 구현한 판매상품별 판매자 - 구매자 채팅기능(Chat Application)에 관한 글입니다. 레퍼런스는 당근마켓 입니다. 새로 배운 API나 서버 통신 개념이 많았고 채팅 기록을 불러오고 표현할 때 간단히 알고리즘을 사용하기도 했던 터라 총 3부로 나눠서 블로그에 업로드할 예정입니다. Salle 프로젝트 코드 Github(진행중) 1부: Chat Application 설계, 후기 & WebSocket 설명, Config 설정하기 2부: DB 설계 & 상품 페이지(productInfo)에서 채팅 시작하기 3부: 채팅 리스트(chatList) 만들기 + WIL(What I learned) 정리 최종 구현완료된 ChatApplication Ⅰ. Chat Ap..

Ⅰ. 판매자 프로필 스펙 & 이슈 사용자의 입장에서 중고거래를 할 때 판매자의 지난 상품 리스트로 레퍼런스 체크를 하는데요, 뿐만 아니라 판매자도 본인의 등록한 상품들을 수정하거나 삭제할 수 있는 하나의 관리화면이 필요합니다. 프로필 페이지를 만들기 위해 필요한 정보는 판매 상품 목록(productList), 판매 상품 개수(productCount), 판매 완료 개수 정도(soldProductCount)이 있으며 추가할 기능으로는 판매자 본인에 한해 판매글 수정과 삭제 권한 부여가 있습니다. 서버에서는 DB의 PRODUCT 테이블을 그대로 불러오는 SELECT, 수정할 경우 UPDATE, 삭제는 DELETE들(SQL DML(Data Manipulation Language) 들을 사용해주기만 하면 됩니다...

메인 화면의 로그인/회원가입 탭은 LoginSession의 유무에 따라 사용자 ${nickName}님 으로 탭 화면이 전환됩니다. 그런데 Login 과정에서 비밀번호나 이메일이 틀린경우에도 LoginSession이 채워져 메인 화면에 ${공란}님 으로 뜨는 오류가 있었습니다. 몇가지 가설을 세우고 차례대로 해결해가면서 문제를 파악하려 했습니다. 가설 1. 로그인이나 회원가입에 실패해도 Model의 Member 객체에 입력값이 들어있다. LoginInterceptor 클래스에서 session.setAttribute(name, value) name을 "member"로 처리하고, LoginController나 RegisterController 입력값도 "member" name으로 model에 담아줬습니다. 그..

검색창은 home 화면에 위치합니다. 사용자가 화면을 줄였을 때 검색창과 로고가 보이되 비율에 맞춰 shrink 되지 않도록 CSS display를 설정하고 싶었습니다.(ex.네이버, 당근마켓) 그래서 youtube로 CSS 공부를 해보았습니다. 100% 맞진 않으니 참고만 해주세요. display는 크게 block, inline-block, inline, flex가 있습니다. block은 벽돌이라 생각하면 됩니다. 벽돌은 하나의 row를 모두 차지합니다. 따라서 행이 바뀝니다. inline은 그와 반대인 개념이며 inline-block은 둘이 섞은 것인데 화면에 들어가있는 라던지 컨텐츠 width가 사용자가 브라우저 크기에 모두 들어간다면 inline으로 표시되다가 크기를 축소해버려 같은 row에서 모..

검색하면 등록된 상품이 나오는 검색기능을 구현했습니다. 먼저 제가 원하는 검색 기능 스펙은 띄어쓰기가 틀려도 단어가 같으면 검색해주는 기능이었습니다. 그래서 시행착오 끝에 온전한 검색 + 띄어쓰기 없애는 가공을 거쳐 검색 기능을 SQL문 만으로 구현해냈습니다. 당근마켓은 다른 단어와 섞여있어도 검색이 되는데(ex.'자전거차' -> '자전거' 검색됨) 아마 Elasticsearch에 형태소 분석기 API도 사용한 것 같습니다. 제가 구현한 것은 교보문고 도서검색('자전거' 검색안됨) 기능과 유사합니다. Frontend에서 CSS로 원하는 검색창과 display 형태를 구현하는데 시간을 썼기 때문에 검색창 기능은 FE(Frontend)와 BE(Backend)로나눠서 업로드 하겠습니다. 검색 기능을 고도화 하..

Github commit를 Eclipse에서 직접해주고 있습니다. 저번부터 non-fast-forward 오류가 발생해 commit-push 되지 않고 stage에서 파일만 업데이트 되었다고 사라지는 문제가 있었습니다. 다행히 간단히 master fetch 경로를 remove 후 add하면 해결할 수 있는 문제였습니다. 저는 해결방법을 잘 설명해놓은 블로그를 참고했으니, 링크로 대체합니다. Eclipse Github non-fast-forward 해결방법 참고한 블로그 링크 [Eclipse] Github push 오류 (rejected - non-fast-forward) 해결하기 이클립스에서 Github로 push를 하는 과정에서 다음과 같은 오류와 마주 보곤 합니다. 이때는 먼저 이클립... blog...