1. 들어가며

1차 프로젝트의 보다 개발하기에 좀 더 복잡한 사이트인 오늘의집 을 모티브로 사용자가 산 가구의 사진을 올리고 상품 검색하여 태그까지 달 수 있는 고품격 커뮤니티 사이트를 제작하게 되었습니다. 개발은 초기 세팅부터 전부 직접 구현했으며, 실제로 백앤드와 연결하여 카카오 로그인 후 서비스를 이용할 수 있습니다.

작업기간

개발기간 : 2022/10/3 ~ 2022/10/13
개발 인원 : 프론트엔드 4명, 백엔드 3명

기술스택

Front-End : React.js, styled-components
Back-End : Node.js, express, My SQL, JWT, multer, AWS(EC2,RDS)
Common : KAKAO social login, RESTful API
협업 : trello, ,figma, notion, github, postman

2. 기본 flow

1. 카카오 소셜 로그인
2. 필터 & 검색 기능
3. 컨텐츠 업로드(상품 태그 기능)
4. 콘텐츠 리스트 필터 구현
5. 콘텐츠 디테일 페이지(상품 태그, 댓글 기능)
6. 연관 검색어, 콘텐츠 검색 구현
7. 마이페이지 (좋아요, 팔로우)

3. [code] 프로젝트에서 내가 겪은 blocker 회고

콘텐츠 업로드 페이지

원래 기존 오늘의 집 사이트는 사진과 동영상을 선택하여 콘텐츠를 업로드할 수 있다. 또한 사진은 최대 10장까지 업로드할 수 있게 구현되어있다.

도전
동영상은 포기하더라도 사진은 최대 10장까지 올려서 미리보기 할 수 있게끔 구현하고 싶었다. filereader 객체로 for문을 돌리면 사진 미리보기 기능은 쉽게 할 수 있다.

문제
문제는 상품태그 기능이였다. 사용자가 클릭한 위치에 상품을 검색하여 특정 상품을 등록하고 이를 플러스버튼으로 표시를 해야하야 한다. 화면에 찍힌 위치를 px(픽셀) 단위가 아닌 %(퍼센트) 비율로 변환하여 저장하고 이를 통신할 때 보내주어야 한다.

원하는 위치에서만 좌표찍기
구글링을 해보면 마우스 클릭했을 때 브라우저 좌표 찍는 방법은 잘 나온다. 하지만 내가 구현해야 하는 기능은 엄밀히 따지면 사용자가 올린 미리보기 이미지 영역 안에서 상품을 태그할 수 있고 그 밖의 영역은 작동이 되면 안된다.

응용력
1. 브라우저 기준이 아닌 이미지 영역에서만 상품을 태그하여 좌표를 불러온다.
2. 찍힌 좌표를 px(픽셀) 단위가 아닌 %(퍼센트)로 변환하여 비율로 값을 관리한다.

이 2가지 부분을 캐치하고 해결 할 수 있는 방법을 찾아야했다.

정확한 문제 정의의 필요성
막상 글을 정리하면서 내가 직면한 문제는 이렇게 딱 2줄이였다. 전제적인 코드의 흐름에서 근본적인 문제를 정의해 놓고 코드를 치지 않으면 잘 적어놓았던 코드까지 건드려서 문제가 더 복잡하게 꼬인다는 것을 경험했다.

4. 느낀점

잘한점

집념
처음에는 어떻게 해야할지도 모르는 상태에서 여기까지 구현해 냈다는 점이 대견하다. 오늘의집 사이트를 보면서 상품 태그의 기능이 참 멋지다고 생각했지 이걸 내가 할 수 있다고 생각한 적은 없었다. 그래서 이번 기회에 도전해보자는 마음으로 욕심을 내어 다른 페이지는 생각하지 않고 업로드 페이지만 구현하는 데에 집중했다.

다양한 라이브러리 사용
1. 해시태그 2. 드래그
2가지 라이브러리를 사용해보았다.
github에 적혀 있는 사용법만 그대로 따라한다면 쉽게 연결되어 너무 편리했다. 단 내가 원하는 디자인으로 커스터마이징하는 것에는 한계가 있었다. 그래서 모달창은 결국 내가 다시 만들어서 작업해야했다.

아쉬운점

처음에는 10장을 업로드 할 수 있는 기능까지 구현하고 싶었다. 하지만 좌표 불러오는데에 너무 많은 시간을 할애하다보니 시간적인 여유가 없었다. 그리고 한 이미지에도 공간에 대한 정보 그리고 상품 좌표와 상품에 대한 정보까지 담아주어야 하기 때문에 이미 하나의 객체에 많은 정보들을 담아서 보내주어야 해서 거기에서도 작업하는데 시간이 걸렸었다.

개선방법

리액트로 작업하다보니 페이지 이외에 부분적으로 컴포넌트화 시켜서 js파일을 분리해서 작업했다. 그러다 보니 props로 데이터들을 계속 전달해줘야 하는 이슈가 생겨서 매개변수가 끝도 없이 길어졌다. 이러한 문제를 해결하기 위해 나온 것이 redux(전역상태관리)라는 것을 알게 되었다. 시간적 여유가 있을 때 redux로 코드리팩토링을 해보면 좋은 경험이 될 거 같다.

5. 마치며

사이트를 제작할 때 필수구현사항으로 있는 개발 기능이 아닌 기능을 만들다보니 검색을 해도 시원하게 나의 궁금증을 해결해주지 않아서 힘들었다. 정확히 내가 구현하고자 하는 기능의 flow 순서를 명확하게 정의해야할 필요성을 느꼈다. 또한 작동하지 않을 때 어떤 문제 때문인지를 잘 파악하는 것도 중요했다. trello로 일정 체크를 하는 것 처럼 코드의 흐름도 주기적으로 체크하면서 작업을 하는 연습을 해야겠다.