1차 프로젝트를 무사히 마치고 바로 2차 프로젝트를 시작했다. 이번 2차 프로젝트는 1차 보다 조금더 심화된 웹사이트를 선정하게되었는데, 우리조는 그중에 오늘의집을 선택당하게되었다. 이 오늘의집은 내가 선택한 사이트인데, 진짜 그냥 내가 자주이용하는 사이트라 난이도는 생각하지 않고 선택을하게 되었다.

유투브 링크 : https://www.youtube.com/watch?v=hbioq0JMqZc

클론코딩 사이트

오늘의 집

이번 오늘의집 클론코딩은 사이트가 크게 두가지로 분류가 가능하다. 첫번째로, 사용자가 커뮤니티를 만들어 서로서로 좋은 정보를 공유할 수 있고, 두번째로는 상품을 판매하는 사이트 이렇게 두가지로 나뉜다. 그 중에서 우리조는 커뮤니티를 클론코딩해보기로 했다. 😆

Team member

Front-end

• 김지원, 박영태, 양석문, 장문정

Back-end

• 장기석, 정우진, 추재호

Trello

구현 부분

나의 역활

나는 커뮤니티 페이지에서 사진올리기 기능이있는데, 거기서 인터리어 사진을 올리면, 그 사진이 피드로 만들어 지는 상세페이지 부분을 담당하기로 했다. 그래서 사진을 올릴시, 그 사진에 마음에 드는 가구를 좌표를 찍어 마크할 수 있는데, 그 부분도 팀원과 같이 도와서 하기로 했다.

상세페이지

1. 댓글 추가, 삭제, 페이지네이션 기능 구현하기 / 통신하기

댓글기능은 맨처음 westagram을 만들면서 해본 부분이라 수월하게 진행을 했다. 다만, 그 당시 통신을 하지 않았고, 백엔드와 맞추면서 개발을 하지않았기에, 그냥 기능적으로만 댓글추가, 삭제만 해서는 의미가 없었고, 더군다나 이 기능을 하기 위해서는 'POST', 'DELETE' method 로 통신을 해야 했는데, 난 'GET'만 해봤다....

솔직히 통신을 해보면서, 어떻게 시작해야되는지를 몰라서 초반에는 어려움을 좀 많이 겪었다. 그래서 여기저기 동기들께 물어보고, 어떤 값을 백에서 받아와야 되는지, 어떤 값을 보내줘야되는지 같은 것들을.. 페이지네이션의 경우는 1차 프로젝트에서 해본 경험이 있어서 가능했지만, 다른것들이 어려웠다.

• postId=${paramsId} 은 컴포넌트를 통해서 받아온 각각 feed 의 id 값인데, 이것을 쿼리스트링으로 받아서, 백에서 보내준 정보들을 받아온다(이미지, 텍스트 등등)

• POST 통신의 경우는, 내가 백엔드 즉, 데이터베이스로 사용자가 작성한 댓글을 보내줘야하는 것인데, 여기서 comment, postId 를 보내줌으로써, 저장이 되는 것이다. 그래서 결국, 사용자가 로그아웃후 다시 로그인을 하면 댓글이 사라지지 않고 저장이되는 것이다.

• commentId=${comments.id} 은 각각의 댓글마다 있는 하나하나의 id 값이다.
• 그 id 값을 내가 삭제하고 싶은 댓글을 클릭했을때, 그 id를 DB에서 삭제를 해주고, window.location.reload() 를 이용해 강제 새로고침을 해준다.

위의 두 사진은 댓글추가 삭제를 하기 위한 통신을 위한 로직이다.

3. 좌표찍기

오늘의 집을 보면 사용자가 사진을 올려서 피드를 만들수 있는데, 거기서 마음에 드는 가구에 마크를 찍을수 있다. 거기서 제품정보를 넣어두면 마우스오버시 그 제품이 어떤것인지 확인이 가능한 기능이있는데, 상세페이지에 그 기능이 연결이 되어있어서, 좌표를 받아올수 있다.

기능 설명

브라우저에서, 사용자가 클릭시, 찍은 좌표가 x,y 인데 내가 알아야 할 부분은 사용자가 찍은 사진 속의 x,y 좌표이다 근데 그걸 알려면 전체 화면 - 사진을 빼고 거기서 다시 사진 width 를 나누어 주면 그 값이 출력이 가능하다.