초보 개발자

아래와 같은 코드가 있다고 가정해보자. v-if가 처음 false라서 보이지 않을 것이다. 그리고 mount된 후 load의 값을 true로 변경하여 그 보여질 것이다. 그리고 ref값이 target인 DOM에 접근하려고 했으나 과연 값은 어떨까? 처음에 생각했을 때 당연히 dom이 출력될 것이라고 생각하였지만 실제로는 undefined가 출력이 되었다. 이 이유는 Vue가 DOM업데이트를 비동기로 하기 때문이라고 한다. 따라서 저 값을 제대로 얻으려면 어떻게 해야할까? 이때 사용하는 것이 바로 nextTick이다. Vue가 데이터를 변경한 뒤 DOM업데이트를 마칠 때 까지 기다리려면 데이터가 변경된 직후에 nextTicㅏ을 사용하면 된다. 이건 DOM이 업데이트 된 후에 호출이 된다. 콜백함수의 형태를..

저는 Vue.js와 Axios를 이렇게 사용합니다. #1. Axios 모듈화 - YouTube 이 강의를 참고 하였습니다!! 먼저 간단한 서버를 만들고 거기에 로그인 요청과 글작성 요청을 보내어 받아오는 과정을 통해서 axios의 사용법을 익혀보려고 합니다. 먼저 서버에 로그인 요청이 왔다면 받아온 값들 (body안에있는 값)이 맞지 않다면 errors obj에 key value 값을 추가해주고. if문을 통해서 그 error obj의 key 값이 하나라도 존재 하는 경우 ( 값이 맞지 않는 경우에 해당 ) response로 401에러를 보내고 데이터로 error obj를 보내준다. 이 조건에 해당하지 않는다면 ( 아이디와 비밀번호가 일치한 경우) 200 상태코드를 보내고 token을 넣어 보내준다!! ..

클래스 바인딩 Vue에서 클래스 바인딩 하는 것을 알아보자!! 먼저 red라는 클래스에 컬러를 red로 지정해두고, p태그를 보면 class를 괄호로 감싼뒤 red(클래스명) : isRed로 key value형식으로 만들어 둔 것을 확인할 수 있다. isRed의 값이 true, false에 따라서 red라는 클래스가 적용이 될 수도, 안 될 수도 있다. false라면 적용이 안되고, true라면 적용이 된다. 따라서 버튼을 클릭하면 isRed값을 반대로 바꿔줌으로써 클래스를 적용할 수 있다. 버튼을 클릭 하면 아래와 같이 바뀐다, 클래스를 여러개 사용하고 싶다면 class="{ red : isRed, bold : isBold }"이렇게 오브젝트 형식으로 늘려나가면 된다. 이 때에 bold라는 클래스를 사..