일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- EC2
- dict
- 카톡
- git
- 튜플
- RDS
- Vue
- S3
- merge
- TypeScript
- MongoDB
- crud
- lambda
- socket io
- SSA
- node
- pandas
- Class
- Props
- async
- SAA
- react
- flask
- 중급파이썬
- wetube
- docker
- 파이썬
- 채팅
- AWS
- NeXT
- Today
- Total
목록vue.js (16)
초보 개발자
axios에서 콜백함수에 arrow function이아닌 function()을 사용하면 this를사용할 때 뷰 인스턴스를 가르키는 것이 아니라 함수 내부를 가르키기 때문에 왠만하면 arrow function을 사용해야 한다!! then catch 뒤에 또 then을 적으면 실행이든 오류이든 상관없이 마지막에 then안에 있는 구문이 실행된다. 파라메터에 res 안적어줘도됌 로그인 정보를 state에 저장해두었는데 새로고침을 하면 풀려버린다. 이러한 문제점을 해결해보자 로컬 스토리지에 정보를 남겨둘 수도 있다. 토큰을 로컬스토리지에 올려둔 뒤 새로고침했을 때 정보가 사라져도 다시 이토큰을 활용하여 값을 가져오려고한다.
이제 action을 사용해서 지금까지 만든 기능을 리팩토링 해보려고한다. 지금까지 만들었던 방식은 methods에서 api에 요청을 보내면 api에서(api/auth.js login) 정보를 받아온 뒤 여기서 state에 commit하여 state를 저장했던 방식이다. 지금 해볼 것은 methods에서 action에 정의한 함수를 dispatch로 실행하면서 payload를 넘겨준다. action에서는 이를 받아서 api에 요청을 보낸 뒤 받아온 값을 같은 폴더에 있는 mutaion으로 commit을 보낸다. 즉 method에서는 action을 dipatch보내는 것 하나, api에서는 단순히 요청을 보내는 것만. action에서 이 api를 사용하여 받아온 값을 commit하여 state에 저장하는 역..
저는 Vue.js와 Axios를 이렇게 사용합니다. #3. 인증토큰 다루기 - YouTube 로그인해서 받아온 토큰을 vuex에 저장해서 관리해보도록 하자!! store폴더 밑에 auth.js파일을 만든 뒤 아래와 같이 설정해주자. 비동기관련코드는 action을 사용해서 사용해야하지만 이 부분은 조금 있다 리팩토링하고 일단 이렇게 넘어가자 먼저 auth.js에 있는 login함수를 아래와 같이 조금 바꾸었다. response.status가 200이면 state에 토큰을 저장한다! 로그인 하기 전 state를 보면 token이 null 이지만 로그인 버튼을 클릭하면 아래와 같이 바뀌게 된다!! 이번엔 이 state에 저장된 abcd를 가지고 axios요청을 보낼 때 intercept를 사용하여 token이..
저는 Vue.js와 Axios를 이렇게 사용합니다. #1. Axios 모듈화 - YouTube 이 강의를 참고 하였습니다!! 먼저 간단한 서버를 만들고 거기에 로그인 요청과 글작성 요청을 보내어 받아오는 과정을 통해서 axios의 사용법을 익혀보려고 합니다. 먼저 서버에 로그인 요청이 왔다면 받아온 값들 (body안에있는 값)이 맞지 않다면 errors obj에 key value 값을 추가해주고. if문을 통해서 그 error obj의 key 값이 하나라도 존재 하는 경우 ( 값이 맞지 않는 경우에 해당 ) response로 401에러를 보내고 데이터로 error obj를 보내준다. 이 조건에 해당하지 않는다면 ( 아이디와 비밀번호가 일치한 경우) 200 상태코드를 보내고 token을 넣어 보내준다!! ..
slot 자식 컴포넌트에 값이아닌 템플릿을 보낼 수 있는 기능이다. 전에는 단지 이런식으로 안에 props라던지 이런 걸 넘겨주었지만 이 컴포넌트 사이에 html태그를 넣어 컴포넌트에 전달하는 것이다. 먼저 GoGo라는 component가 있다. 이 안에 를 두개 만들고 각각에 #headerrr , #default를 넣었다. 내용은 각각다르다. 위 이미지는 GoGo 컴포넌트이다. 위에서 적은 값을 받아오기 위해서 을 열어주어야한다. name에 #headerrr을 적어주면 #headerrr에 적힌 태그들만 읽어온다. 반대로 #default를 적은 내용은 별도로 name을 적지 않은 slot에 들어간다. 이 때 컴포넌트에서 데이터를 보내줄 수도 있다. myname을 data라는 이름으로 보낸다. 다시 상위 ..
클래스 바인딩 Vue에서 클래스 바인딩 하는 것을 알아보자!! 먼저 red라는 클래스에 컬러를 red로 지정해두고, p태그를 보면 class를 괄호로 감싼뒤 red(클래스명) : isRed로 key value형식으로 만들어 둔 것을 확인할 수 있다. isRed의 값이 true, false에 따라서 red라는 클래스가 적용이 될 수도, 안 될 수도 있다. false라면 적용이 안되고, true라면 적용이 된다. 따라서 버튼을 클릭하면 isRed값을 반대로 바꿔줌으로써 클래스를 적용할 수 있다. 버튼을 클릭 하면 아래와 같이 바뀐다, 클래스를 여러개 사용하고 싶다면 class="{ red : isRed, bold : isBold }"이렇게 오브젝트 형식으로 늘려나가면 된다. 이 때에 bold라는 클래스를 사..
간단히 CDN으로 VUE script를 추가하여 html에서 바로 VUE를 사용할 수 있다. 아래의 주소를 html에 넣으면 된다. 뷰 생성 먼저 div#hello를 만든 뒤 script에 new Vue를 통해 인스턴스를 만들고, 그 안에 el에 css 셀렉터로 div의 아이디 값인 #hello를 적어주면 div#hello안에는 이제 Vue를 사용할 수 있게 된다고 한다. 따라서 hi라는 data를 넣어서 잘 동작하는지 확인해보자! 아래는 html을 브라우저에서 실행시킨 화면이다. 잘 출력이 되는 걸 확인할 수 있다. 메서드 메서드도 만들어서 사용할 수 있다. 데이터를 조금 수정한 뒤에 메소드에서 데이터를 사용해보려고 한다. 다른 곳에서 data나 method에 접근하려면 this 키워드를 적어주면 가능..
데이터 바인딩 데이터 바인딩이란 JS데이터를 HTML에 꽂아넣는 문법이다. 바닐라 자바스크립트의 데이터 바인딩 스타일은 아래와 같다. document.getElementById().innerHTML = ?? vue에서는 간단히 데이터바인딩을 할 수 있다. data(){ return{ } } 이러한 형태로 object를 리턴해주면 이걸 바로 위의 template에서 사용할 수 있다고 한다. props 더보기 props라는 곳에서는 변수명과 타입을 명시해주는 것 같다. ByeBye.vue를 App.vue에 import 해와서 컴포넌트 형식으로 채워 넣었더니 화면에도 잘 출력이 되는 것을 확인할 수 있다 데이터 바인딩 쓰는 이유? 1. 하드코딩 해놓으면 나중에 변경이 어렵다. ( 쇼핑몰 상품처럼 변동이 생길 ..