에러핸들링 (10) 썸네일형 리스트형 Cannot update a component (xxx) while rendering a different component (xxx) 위의 웹 페이지에서 왼쪽의 컴포넌트 목록에서 각 메뉴를 클릭하면 오른쪽의 화면의 내용이 전환된다. 웹 버전을 모바일 버전으로 변경을 하게 되면 아래처럼 변환되고 좌측 상단의 메뉴 버튼을 클릭하면 메뉴가 표출된다. 지금이야 잘 작동을 하지만 최초 버전에서 제목의 에러 메시지를 만나게 되었다. Cannot update a component (`Main`) while rendering a different component (`MenuBar`). To locate the bad setState() call inside `MenuBar`, 화면의 컴포넌트 구조는 단순하다. 웹 버전일 때는 아래와 같고 모바일 버전에서는 다음과 같다. 문제는 모바일 버전에서 목록을 클릭할 때 마다 Main 컴포넌트의 인덱스가 변하.. (에러핸들링)Non-interactive elements should not be assigned interactive roles 위의 코드 처럼 태그에 onClick 이벤트 리스너 속성을 추가하였다. 이럴 경우 2가지의 에러 메세지를 마주하게 된다. 마주치는 에러 메세지는 아래와 같다. 태그 요소가 button이 아닌 경우에 onclick 속성을 주게 되면 가장 많이 보게 되는 에러 메세지이다. "Visible, non-interactive elements with click handlers must have at least one keyboard listener." 위 에러 메세지의 의미는 태그에 onClick 추가했더니 keyboadr 리스너를 달아야 한다는 것이다. 위의 에러 메세지에 대한 정책은 아래 링크에 있다. click-events-have-key-events 위의 에러 메세지에 대응하기 위한 정책을 바탕으로 한 개선.. (에러핸들링) vue 부모 - 자식 컴포넌트간 props 전달과 리렌더링 방법 1. 에러 내용 Tab 의 idex를 props로 App.vue에 전달하여 다시 하위 컴포넌트로 전달해 준 후 index 값에 의존하는 컴포넌트를 리렌더링해야 하는 상황 2. 장애 요소 Vue 라이브러리에서 리렌더링 하는 조건이 React에 비해 까다로운 점 리렌더링하는 다양한 메소드(created(), mounted(), watch 등)와 선언된 변수의 값의 변화에 따른 리렌더링 조건 검토 어려움 index값에 의존하는 컴포넌트별로 최적의 방법 모색이 어려움 3. 미완의 핸들링 App.vue의 자식 컴포넌트인 TestTab 컴포넌트를 만들어 Tab index의 변화에 따른 값의 변화가 가능한지 여부만 구현해 보았음 App.vue /* TestTab 컴포넌트에 ref = "child_component" .. (에러핸들링) 하위 디렉토리에 소속된 local repository에 git remote설정할 경우 상위 디렉토리에 git remote 설정이 같이 되는 경우의 처리 ● 문제 상황 github page 배포 테스트를 위해 local repository를 생성하였다. local repository는 상위 디렉토리에 소속되어 있다. local repository에 git remote 설정을 해주면 그 local repo가 소속된 디렉토리의 상위 디렉토리에도 동일한 git remote가 설정되는 문제가 발생하였다. 상위 디렉토리에 git remote remove 명령을 주어서 git remote 설정을 없앤 후에 하위 디렉토리를 원격 저장소와 연결하게 되면 상위 디렉토리까지 git remote 가 설정되는 현상이 반복되고 있었다. ● 해결 방법 git clean, git remote remove, git init, git rm --cached 등 다양한 명령어를 통해서 위.. (에러핸들링) (AWS EC2) had too many unstable restarts AWS를 통해 서버를 작동시키려고 한다. PM2 라이브러리를 설치하고 authbind를 통해 권한을 부여한 뒤 터미널을 종료해도 백그라운드에서 실행 되게 하였다. 그런데 계속해 작동시킨 서버 컴퓨터가 원인을 알 수 없게 종료가 되고 많다. PM2 log를 통해 작동 상황을 알아보니 계속해서 작동을 시켰다가 도저히 안되니 ' had too many unstable restarts'라는 오류 메세지를 주고 Stopped 처리 해버렸다. 2가지 이유가 있다. 1) endpoint 내가 실행시키는 서버 측면의 js 파일의 endpoint를 잘못 지정한 경우다. stackoverflow 답변 2) node의 모듈에 오래된 거나 나쁜 버전의 라이브러리들이 설치된 경우 stackoverflow 답변 나의 경우는 2번.. (에러핸들링) axios body 값 설정 axios의 메소드를 사용하는 방식은 2가지이다. 우선 ES6 형태로 import 해주는 건 동일 import axios from 'axios'; 그러나 주의 해야 하는 건 const ___ require 형태는 2가지 방식 중 한 가지만 적용되기 때문에 고민 타임 줄여주는 ES6 형태로 import 하자. 1) 기본 타입 axios({ }) axios({ url: 'https://localhost:4000/users/login', method: 'post', data: { userId: this.state.username, password: this.state.password }, withCredentials: true }) axios 모듈 안에 객체로 필요한 정보들을 넣어 준다. 특히 data라고 명.. (에러핸들링) https session 통신에서 withCredentails: true axios로 통신 get 요청에서 session 기반의 통신을 하고 있다. axios post 요청을 할 때 withCredentials : true를 하면 쿠키에 세션Id가 저장되고 세션Id를 기반으로 해서 인증이 이루어지게 된다. 마찬가지로 axios.get 요청을 할 때도 withCredentials : true 이미 받은 세션id를 서버 측면에서 확인하고 유저 정보를 클라이언트로 보내주게 되어있다. 그런데 미치겠는데 계속해서 에러 메세지만 뜬다. 유저정보를 받지 못해서 그렇다. 첫번째 체이닝인 then() 까지는 result값이 잘 들어오는 것을 확인했다. 그런데 두번째 체이닝 then()에서는 값이 들어오질 않는다. 그냥 에러로 처리가 되고 catch체이닝에서 err 처리를 해준다. 몇번을 다시.. (에러핸들링) (클라이언트 측면)https 통신의 response 결과값 axios 라이브러리 post 메소드 사용하여서 https 통신을 구축했다. post 요청 후에 결과값을 콘솔로 찍어 보았다. 결과값의 변수명은 result이고 result를 찍어 보았다. 서버 영역에서 post의 요청에 대한 설정한 데이터는 data 영역이고 객체 형태로 { message: 'ok' } 로 기재가 되어 있다. reponse 객체의 data라는 key에 res.send 혹은 res.json의 정보가 담겨지는 것을 알 수 있다. 그렇기 때문에 클라이언트에서 해당 데이터에 접근하려면 result.data.message로 할 수 있다. 이전 1 2 다음
