초보 개발자

컴포넌트 생성 src폴더 밑에 components폴더를 생성한다. 그리고 그 안에 각각의 컴포넌트를 구성한다, 간단하게 만들어 보았다. 내용은 아래와 같다. 그리고 App.vue에서 이 컴포넌트들을 자식 컴포넌트로 사용해주어보자. 이렇게 import를 해온 뒤에 component에 등록을 해주고, 컴포넌트 태그 : 컴포넌트 내용 이렇게 들어간다. 우리는 import로 각 vue에 적힌 모든 내용을 저 TodoHeaders, TodoList, TodoFooter, TodoInput에 담아두었다. 템플릿에 아래와 같이 적어주면 된다. 아래처럼 케밥케이스으로 표현해주는 것이 vue에서 권장하는 방법이지만 앞으로는 파스칼케이스로 적어주려고 한다. 사실 todo-header태그는 아래처럼 해당 파일의 모든 내용을..

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을 넣어 보내준다!! ..

const module = { exports: {} }; const exports = module.exports; function require(path) { ... return module.exports; // require() 함수의 리턴값 } 전에 module.exports를 사용하면 하나밖에 안되고, exports를 사용하면 여러개가 된다고만 얼핏 알고 있었는데 사실 구조자체가 이러했던 것이다. module.export = { }는 obj자체를 바꿔버리기때문이고. exports.abc = 3 이런식으로 하면 exports obj안에 key,value를 집어 넣는 것이었다. module.export는 하나의 큰 obj로 설정! (큰거 한개) exports는 각각의 obj로 설정! (작은거 여러개) ..

이러한 코드가 있다고 가정해보자. 이 코드는 에러가 날까? 안날까? 잘 보면 console뒤에 세미콜론이 없다. 따라서 실행시키면 오류가 발생한다. 이걸 고치기 위해서 eslint라는 것을 사용해보려고 한다. npm init -y npm install eslint 폴더에 .eslintrc.js라는 파일을 만든 뒤에 module.exports = { } 이렇게 적어 준 뒤 package.json에 "scripts": { "lint": "eslint 파일명" }, 이렇게 적어준 뒤 린트를 실행시켜보자! npm run lint 근데 이상하게 아무 오류도 잡지 못한다. 실행시키면 분명히 오류가 발생하는데도 불구하고 말이다. 그 이유는 rules를 정해주지 않아서이다. .eslintrc.js파일로 돌아가보자. 아..

slot 자식 컴포넌트에 값이아닌 템플릿을 보낼 수 있는 기능이다. 전에는 단지 이런식으로 안에 props라던지 이런 걸 넘겨주었지만 이 컴포넌트 사이에 html태그를 넣어 컴포넌트에 전달하는 것이다. 먼저 GoGo라는 component가 있다. 이 안에 를 두개 만들고 각각에 #headerrr , #default를 넣었다. 내용은 각각다르다. 위 이미지는 GoGo 컴포넌트이다. 위에서 적은 값을 받아오기 위해서 을 열어주어야한다. name에 #headerrr을 적어주면 #headerrr에 적힌 태그들만 읽어온다. 반대로 #default를 적은 내용은 별도로 name을 적지 않은 slot에 들어간다. 이 때 컴포넌트에서 데이터를 보내줄 수도 있다. myname을 data라는 이름으로 보낸다. 다시 상위 ..