6주 프로젝트 중 3주가 지난 가운데 토요일에 중간발표를 했다.
우리 조는 오픈비듀를 활용한 "보이스 1대1일 연애상담소"라는 주제를 가지고 서비스를 기획했다.
따라서 익명을 강조한 게시판과 댓글 그리고 보이스채팅을 3주동안 구현했다.
프로젝트를 하면서 느낀점은 협업은 나 혼자만 잘해서는 불가하다는 것이다. 우리 조원이 부족하고 아쉬웠다는 뜻이 아니라 소통이 정말 중요하다고 깨닫는 순간이 몇번있었다.
- 디자이너와 협업
프론트엔드는 디자이너와 소통을 하는 접점이 많다.
원래 현업에서는 기획과 디자인이 끝나면 개발자들이 기능구현을 시작한다고 들었다. 하지만 우린 6주라는 시간동안 기획 디자인 기능을 모두 끝내야 했고, 아쉬움이 남는 순간에도 빠르게 치고 가는 결단력이 필요했다. 하지만 우리조 디자이너님들은 더 높은 퀄리티를 위해 이미 최종이라고 체크 해뒀던 페이지들을 계속해서 수정했고 결론적으론 내가 이미 끝냈다고 생각했던 페이지와 디자이너님들이 수정한 페이지의 모양이 다르게 나타났다.
수정을 했으면 했다고 말을 해주셨으면 좋았을텐데 그 부분이 아쉽다고 느껴졌고 우리는 디자이너님들께 우리가 디자인 구현을 마친 부분은 따로 체크를 해둘테니 수정을 하게 되면 우리에게 따로 언급을 부탁한다고 말씀드렸고 그 이후 수정 부분을 빠르게 체크할 수 있게 됐다.- 백엔드와 협업
기능을 구현하는데 있어서 프론트엔드와 백엔드의 협업은 불가피한 관계이다. 따라서 현재 어디까지 구현이 됐고 어느 기능을 테스트할 수 있는지 계속해서 테스트 해야했다.
우리는 백엔드가 어떤 형태로 데이터를 넘겨달라고 했는지 미리 파악할 필요가 있고 프론트보다 api짜는데 속도가 늦게 될 경우 그에 따라서 서버에 연결전까지 모듈을 미리 작성해두면 된다. 내가 이번에 그 경우에 해당됐고 미리 서버테스트를 기다리고 있었고 그 상황을 백엔드에게 알렸다. 하지만 백엔드쪽에서는 형태 변경을 요구했다. 이미 모듈이 다 짜여진 상태에서 형태 변경 요구에 당황스러웠지만, 협업이니만큼 작성해둔 코드를 전면 수정할 수 밖에 없었다. 미리 그 부분에 대해서 수정중이라고 말씀을 주셨다고 잠시 대기했을텐데 소통의 부재로 시간이 버려진 느낌에 너무 아쉬움이 남았다.
이번에 백엔드의 형태 변경으로 나는 여러가지 새로운 매소드를 검색하며 활용할 기회가 생겼다.
백엔드가 요구한 형태는 체크박스에 체크 된 부분과 아닌 부분을 boolean값으로 배열로 만드는 것이었는데, 구글링 끝에 체크박스에 체크 안 된 부분까지 값을 받아오는 과정을 찾는게 내 역량에서 찾기는 힘들었다.
따라서 체크박스보다 더 큰 범위로 input의 상태관리에 대해서 검색했고 따라서 이 글에서 힌트를 찾을 수 있었다.
이번주 새롭게 사용하게 된 기술
체크박스의 value의 기본값을 useState를 활용해 false로 고정시키고 return 뒤에 위치한 input의 value는 true로 변경해서 체크 한 부분만 onChange함수를 이용하여 true로 바꾸는 방법이다.
하지만 여기서도 난관이 생겼다. true가 boolean이 아닌 string으로 읽히는 것.. 난 또 구글링을 했고 그 결과 어떠한 데이터를 Boolean형으로 변경하려면 Boolean()이라는 매소드를 활용해야한다는 것을 알았다.
이젠 문자열을 불리언 형태로 바꿨다면, 객체형태를 배열형태로 변경해야 했다. 그 때 나는 객체의 value값들만 뽑아내는 Object.values({객체로 되어 있는 변수})를 활용하여 원하는 형태를 만들어낼 수 있었다!
그리고 우리는 페이지들 속 컴포넌트의 크기가 커서인지 라우팅을 할 때 스크롤을 내렸다면 스크롤이 멈춘 그 위치가 다른 페이지에서도 그 스크롤의 위치 그대로 이동하는 현상이 있었다.
이 블로그를 활용하여 리액트 라우터를 활용하여 그 현상을 라우트할 때마다 페이지의 상단으로 이동할 수 있게 됐다.
백에서 게시글이나 댓글에서 받는 날짜형태가 밀리초단위까지 나오게 되는데 우리가 원하는 형태는 "몇분전", "몇일전" 이런 모양인데 백에서는 이렇게 처리하는 로직이 상당히 복잡하다고 한다.
따라서 프론트측에서 변경할 수 있는 방법이 있나 검색해 본 결과 시간 알려주는 패키지가 있다는 것을 알게 됐고, 우린 보다 쉽게 원하는 형태로 변경할 수 있게 됐다.
