카카오 로그인 API로 회원 가입한 사용자의 탈퇴 기능에 스윗얼럿을 적용했다. 탈퇴 기능 실행 시 두 번의 스윗얼럿 창이 뜨도록 코딩했다. 첫 번째 얼럿은 정말 탈퇴할 것인지 묻는 창이고, 두 번째 얼럿은 탈퇴가 잘 진행되었음을 알려주는 창이다. 그런데 두 번째 얼럿에서 [그림 2]와 같은 에러가 발생했다. 이 문제는 화살표 함수를 적용하여 해결하였고 [그림 3]과 같이 원하는 두 번째 스윗얼럿을 만나볼 수 있었다. 화살표 함수 적용 전 코드 ... success: function () { this.$swal({ title: 'ㅠ_ㅠ', text: '꼭 다시 만나요~', icon: 'success', iconColor: '#ffcb00', confirmButtonText: '확인', confirmButt..

겸상을 마친 이후에는 겸상을 한 밥장과 숟갈의 매너를 서로가 평가하게 된다. [그림 1]은 해당 기능을 구현하던 중 만나게 된 에러이다. 처음 이 에러를 만났을 때 답답했는데 그 이유는 콘솔에는 에러를 알려주고 있지만 화면은 정상적으로 렌더링 되고 있다는 점이다. 원인은 서버로부터 받아온 데이터의 비동기 처리로 인해 발생한 문제였다. 즉, 데이터가 undefined 상태일 때 렌더링이 이루어지기 때문이다. 구글링 해보니 이 문제에 대한 해결 방법 3가지를 확인할 수 있었다. 나의 경우 아래의 코드와 같이 commonQuestions, babjangQuestions 배열을 초기화하여 해결할 수 있었다. export default { ... data() { return { ... commonQuestions..

숟갈이 원하는 밥상에 숟갈을 얹을 때 밥장에게 구애(?)의 메시지를 함께 보내려고 한다. 여러 방법이 있겠지만 모달을 띄우고 textarea에 메시지를 작성하는 방법으로 구현하고자 했다. 모달은 다른 곳에서도 사용할 수 도 있으므로 slot으로 만들어 재사용 가능하게 했다. id도 정확하게 잘 맞춘 후 작동을 시켰는데 헐, [그림 1]과 같은 결과가 발생했다. 모달을 아무리 클릭해도 반응하지 않았고 코드를 다시 살펴봐도 문제라곤 보이지 않았다. 테스트 코드를 만들고 거기서 작동시키면 잘된다. 뭐가 문제 일까? 한참을 삽질하다가 [그림 2]와 같은 정상적인 결과를 얻었다. 문제의 원인은 HTML에서 모달을 작성한 위치였다. "현재 신청한 숟갈들"을 모니터링해주는 div 안에 작성했던 게 문제였던 것이다. ..

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

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

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