[그림 1]과 같이 텍스트 줄 바꿈이 되지 않아서 이것저것 만져보다가 원인을 찾았다. 원인은 CSS에서 공백과 줄 바꿈을 지정하는 white-space의 속성 값이 nowrap로 지정되어 있었기 때문이다. white-space의 속성 값을 normal로 변경하여 [그림 2]와 같이 보이도록 할 수 있었다. 자동 줄 바꿈이 되지 않도록 하는 nowrap은 성가셨지만 오른쪽의 "숟갈 아이콘"과 "숫자"가 줄 바꿈 되지 않도록 할 때는 유용했다. 참고한 내용은 다음과 같다. https://www.tabmode.com/homepage/white-space.html 初心者のためのHTMLとエクセル講座：HTML・CSSを使ったホームページ作成やエクセル(EXCEL)・フォ 空白や行の折り返しを指定するwhite-space ww..

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

마이페이지의 메시지함에서 윈도우 크기에 따라-반응형으로-다른 형태로 메시지 목록을 보여주고 싶었다. CSS에서는 미디어 쿼리 등으로 반응형에 따라 다른 화면을 렌더링 할 수 있다. 하지만 이번에는-컴포넌트화 된-table로 만든 [그림 1]과 같은 메시지 목록과 [그림 2]와 같은 ul로 만든 메시지 목록을 v-if를 이용해 화면 크기에 따라 달리 렌더링 되도록 해야 했다. 따라서 CSS로는 구현할 수 없었고, 알아보다가 아래의 코드와 같은 방법을 적용할 수 있었다. ※ 코드에서 '...'은 해당 기능과 상관없는 코드로서 가독성을 위해 생략하였음을 표시한 것이다. template 부분 script 부분 export default { ... data() { return { ... window: { widt..

겸상 서비스는 카카오 로그인 API를 이용한다. 로그인 후 프로필 정보를 보려고 하는데 [그림 1]과 같은 현상이 발생했다. 콘솔 창을 보니 [그림 2]와 같은 AxiosError 메시지와 제목의 에러가 떠 있었다. Axios를 이용해 서버에 GET 요청을 하는데 이때 로그인 사용자의 토큰 정보가 함께 전달된다. 이 토큰이 제대로 전달되지 않는 문제로 보였다. F5 키를 눌러 "새로 고침"을 하면 이 문제는 사라진다. 그래서 로그인 코드 안에 아래와 같이 새로 고침 하는 라우터 코드를 추가해 주었다. this.$router.go(); // 새로고침

카카오 로그인 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..