지난 7월 31일, 팀 프로젝트 13주 차의 마지막 날이었고, 최종 발표가 진행됐었다. 우리 팀은 12주 차 이전에 이미 계획했던 거의 모든 요구사항들의 구현을 완료했었다. 이후로는 QA 테스트와 테스트 중 발견된 이슈 대응 및 최종 발표 준비로 남은 시간들을 보냈다. 디자인이 구리다(?)는 멘토님의 코멘트가 있었기 때문에 팀 외부의 디자이너분께도 조언을 구하기도 했고-뜻밖에도-그분이 작성한 피그마도 확보할 수 있었다. 확실히 전문 디자이너에게 받은 피그마는 우리가 만든 서비스의 디자인 수준이 어디쯤에 있는지 객관적으로 바라보게 했다. 그렇다고 무작정 그 디자인을 적용할 수는 없었다. 첫 번째 이유는 QA 테스트와 발표 준비에는 넉넉했지만 디자인을 고치기에는 빡빡했던 일정 때문이다. 둘째는 확실히 더 세..

밥상의 상태 "모집 중", "모집 마감"은 밥장에 의한 숟갈 빼기, 숟갈의 숟갈 빼기, 그리고 모집 기간 이후 "모집 중"이 "모집 마감"으로 바뀌도록 되어 있다. 그런데 밥장이 숟갈을 뺀 경우와 모집 기간이 지난 경우에는 상태 표시가 정상적으로 작동하나 숟갈이 숟갈을 뺀 경우에는 딜레이가 발생했다. 길게는 1분도 넘었다. 이 문제를 해결하기 위해서 기존 코드를 수도 없이 고치고 새로운 메서드를 추가하기도 했다. 하지만 클라에서는 해결이 되지 않았다. 다른 팀원과 함께 코드를 수정한 후 커밋, 푸시하고 풀 받고 밥상을 만들고 숟갈 얹고 빼기를 수없이 반복했으나 문제는 해결되지 않았다. 별짓을 다하고 난 이후에 알게 된 사실은 밥상 상태 변경 API는 밥상을 생성한 자에 한에서만 작동한다는 것이었다. 애초..

밥상의 상태 표시는 "모집 중", "모집 마감"이다. 현재 시각을 기준으로 "식사 일시"가 지나지 않았고, 선택된 숟갈이 모집 정원에 미달한다면 "모집 중"으로 상태를 표시해야 한다. 이때 "식사 일시"가 지났는지 여부를 알 수 있는 방법을 코드로 작성할 때 어떻게 해야 하나 고민했다. 적용한 방법은 문자열로 되어 있는 "식사 일시" 정보를 new Date()를 이용해 날짜 정보로 바꾼 후 getTime()을 이용해 시간(연산이 가능한 숫자)으로 변환하여 계산하는 것이다. 해당 코드는 아래와 같다. 참고로 적용된 정규식은 날짜 정보를 YYYY-MM-DD hh:mm:ss 형태의 문자열로 변경한다. async doStatusInitial() { let nowTime = new Date( new Date() ..

"마이페이지 > 메시지함(mypage-message.vue)"은 부모 컴포넌트로 "정렬, 필터, 삭제 기능"을 가지고 있다. 자식 컴포넌트로는 메시지를 모아서 보여주는 컴포넌트와 페이징을 담당하는 컴포넌트로 분리되어 있다. [그림 1]과 같이 부모 컴포넌트에서 삭제 기능을 구현하려고 하다 보니-메시지를 모아서 보여주는-자식 컴포넌트의-check box에서-checked 된 정보를 부모 컴포넌트에서 받아서 처리해야 했다. 이 기능을 구현함에 있어 가장 먼저 떠올랐던 방법은 커스텀 이벤트와 emit을 이용한 방법이었다. 문제는 Vue.js의 문법에 맞게 정확하게 코딩하였음에도 불구하고 부모 컴포넌트에서는 어떠한 checked 정보도 받지를 못했다. 해당 자식 컴포넌트가 부모 컴포넌트의 직속 자식이 아니라서 ..

카카오 로그인 API 연동이 완료되었고 카카오 아이디로 로그인하면 [그림 1]과 같은 프로필 정보를 볼 수 있다. 지금 보고 있는 [그림 1]은 식사 매너 별점이 실제 서버에 저장된 점수와 동일하게 잘 표현된 경우이다. 당연히 이렇게 렌더링 되어야 맞는데 처음부터 그렇지는 않았다. 대수롭지 않은 이 화면은 수많은 삽질의 산물이다. [그림 1]은 서버로부터 로그인한 사용자 정보를 비동기 방식으로 가져와서 렌더링 한다. 별점 표시 기능은 재사용 컴포넌트로 만들어 import 하였다. 문제는 자식 컴포넌트인 별점 표시 기능에 props로 데이터를 보내는 시점이 비동기 처리가 완료되는 시점보다 빨라 자식 컴포넌트에서 받는 데이터의 값은 내 점수인 3이 아니라 undefined라는 것이다. 이러한 문제는 의외로 ..

겸상 팀 프로젝트에서 맡은 화면 및 기능 구현을 거의 마무리하였고 이제 API를 붙이고 있다. 밥상 목록 중 신청한 밥상만 추려서 가져오는 API를 붙이던 중에 경험한 일이다. [그림 1]과 같이 Postman에서는 GET 요청 시 body가 전달되고 원하는 응답을 받을 수 있었다. 하지만 Axios를 통해 요청하면 [그림 2]와 같은 현상이 발생하였다. 이 문제로 많은 시간을 보냈는데 결론은 Axios에서 GET 요청 시에는 body를 보낼 수 없다고 한다. 아래 링크는 참조한 자료이다. https://jacobgrowthstory.tistory.com/44 [Axios] get 요청 시 Query Params 보내기 (에러핸들링) 프로젝트 중 axios를 통해 get 요청 시 에러가 발생했다. req..

화면 레이아웃 개발자의 품격 4기의 진행상 DB설계는 2주로 잡혀 있었다. 따라서 6주 차에도 DB설계에 대한 발표를 했어야 하나, 우리 팀은 지난주에 DB설계가 통과되어 코멘트받은 몇 가지 부분만 수정하고 바로 화면 레이아웃 설계를 진행하고 그 결과를 6주 차에 발표할 수 있었다. 우리는 한 주간 Quasar라는 CSS 프레임워크를 사용해 화면 레이아웃을 그렸다. 그런데 그 결과는-다른 의미-에서 혹독했다. 이번 프로젝트는 애초에 기술 스택이 프런트엔드는 Vue.js로 백엔드는 Node.js의 express로 정하고 시작되었다. 우리 팀은 Vue.js의 버전 2.0과 3.0 중-부트캠프에서 직접 다뤘던 것이 가장 큰 이유로 작용하여-논의 끝에 3.0으로 결정하였다. 이제 이 버전에 맞는 CSS 프레임워..

겸상 프로젝트 팀 회의에서 선택된 숟갈에게 각 숟갈의 닉네임이 포함된 단체 메시지를 발송하는 것에 대해 부정적인 의견이 모아졌다. 숟갈의 프라이버시를 침해할 수 있다는 것이 이유였다. 사실 숟갈이 선택될 때마다 textarea에 동적으로 default 메시지를-자동적으로-생성하는 기능을 구현하기 위해 꽤 애를 먹었기 때문에 그런 팀원들의 의견이 반갑지 않았다. 그래도 팀 내 다수의 의견이므로 이 기능을 빼기로 했고, 아쉬우니 블로그에는 남겨 두고자 이 글을 작성한다. [그림 1]과 같이 함께할 숟갈이 모두 선택되면 textarea가 표시된다. textarea에는 사용자가 입력하지 않아도 default로 메모가 작성되어 있고 이 메모는 수정이나 삭제가 가능하다. 사실 여기까지의 구현은 매우 간단하다. 문제..