숟갈을 선택하고 빼는 화면을 구현해야 하는 데 이미 선택했던 숟갈을 취소하는 기능이 포함되어야 한다. 이게 상당히 상그러운 일이었다. 이 기능을 구현하기 위해서 "지금 선택할 숟갈"과 "이미 확정되었던 숟갈"을 각각 구분하여 관리할 필요가 있었다. 그래서 "selectedSpoons, fixedSpoons"라는 배열 프로퍼티를 각각 두었다. 화면이 최초 렌더링 될 때 이미 확정되었던 숟갈 요소를 selectedSpoons에 넣는 과정을 두었다(this.selectedSpoons = this.fixedSpoons;). 그 이유는 [그림 1]과 같이 "함께할 숟갈"에 표시하고 정해진 인원수 관리(3인)를 용이하게 하기 위해서였다. 그런데 여기에서 문제가 발생했다. data() { return { ... se..

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

1. 입력한 후 "Enter" 키를 누르거나 포커스를 다른 곳으로 이동할 때 한 번에 출력. 데이터 바인딩을 하면 입력값이 실시간으로 출력된다. lazy 기능을 이용하면 "Enter"키를 입력할 때 출력되게 한다. 2. splice를 이용한 요소 추가, 변경, 삭제. data: { myArray: ['첫번째', '두번째', '세번째', '네번째', '다섯번째'] }, methods: { addLast: function(){ this.myArray.push("[맨 뒤에 추가]"); }, addObj: function(){ this.myArray.splice(index, 0, "[추가]"); }, changeObj: function(){ this.myArray.splice(index, 1, "[변경]"); ..

Vue.js에서 [그림 1] 같이 disabled 된 textarea의 disabled를 해제하고 focus를 주고자 하였다. 처음에는 커스텀 디렉티브로 v-focus를 만들어 textarea에 바로 적용했었다. disabled를 해제하면 즉시 focus on 될 거라 생각했지만 작동하지 않았다. autofocus도 마찬가지였다. 결국 해결했는데 ref를 이용한 방법이다. disabled를 데이터 바인딩을 하지 않고 적용한 상태에서 textarea에 ref를 주고 해당 ref를 찾아 disabled를 해제한 후 focus를 순차적으로 주는 방식으로 구현했다. 앞에서 focus가 작동하지 않았던 이유는 disabled가 풀리지 않은 상태에서 focus가 적용되었기 때문으로 보인다. 작동하는 코드는 다음과 ..

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

[그림 1]과 같이 노란색으로 데이트 피커(Datepicker)에 노란색(메인 컬러)을 넣고 싶었다. 그래서 원하는 색상 값으로 해당 컴포넌트의 스타일 부분에도 적용해 보고 인라인으로도 시도해봤지만 데이트 피커의 디폴트 색은 마치 최종 보스 같이 상처하나 입지 않은 모습이었다. 그러다가 문득 스코프 문제가 아닐까 하는 생각이 들었다. 데이트 피커가 적용된 컴포넌트에는 스타일 설정 값이

겸상 팀 프로젝트에서 맡은 화면 및 기능 구현을 거의 마무리하였고 이제 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 프레임워..