Today I Learned

vue-cli 설치vue 게시판 만들기데이터는 json형태로 로컬에서 불러옴list와 create 부분 구현난이도가 높을 줄 알았는데 의외로 쉽게 해냈다.json 처럼 데이터를 가져왔는데. 역으로 create시에는 제대로 내용이 쉽게 안들처럼

Vue-board의 Delete, update 기능 구현Vue-board의 마스터 브런치에 PR하였음Vue-board의 Create 컴포넌트를 update 용도로도 사용가능하게끔하는 내용조금 더 Git에 대해서 친숙해지고 있다.로컬에서 json형태의 데이터이지만 (새로

Vue로 Login 기능을 중점으로 만들기위해서 준비ESLint와 Prettier 써보기로 함ESLint와 Prettier이 뭔가 덕지덕지 붙은 것들 마냥 소스를 제대로 못 고쳐주고 있다.내일 다시 셋팅하고 ESLint와 Prettier 두가지가 제대로 작동하게 만들어

스터디 내용 ESLint와 Prettier 두가지 플러그인을 여러가지 플러그인과 써서 충돌이 난거 같았다. 어제 브런치들을 다 삭제(잔디도 뽑힘 ㅠㅠ)하고 다시 새로 셋팅했다. 내가 쓸 것들만 가져와서 쓰니 별문제 없었고 알고보니 쓸데없는 룰을 너무 많이 주었다. 스

Vuetify를 가지고 컴포넌트를 제작Login page 컴포넌트 제작 후 Router 연결주말이라 조금 집중이 안되어 가볍게 스터디 해보았다.Vuetify는 Bootstrap과 비슷하였지만 레이아웃 위주인 Bootstrap에 비해서 부분 수정이 가능한 점이 매력적이였

vue data상의 user 목록을 조회하여 아이디 매칭 후 비밀번호 매칭실제 DB에 연결은 나중에 하며 일단 싱글페이지 상에서 매칭스터디 도중에 ESLint에서 "no-unused-vars" 해당 에러가 뜸ESLint의 "no-unused-vars" 에러 때문에 애먹

어제 하루는 개인적인 사정으로 공부를 못했다. 불찰이다. 그래서 오늘은 좀더 집중했다.Vuex를 이용하여 State, Mutation, Action을 이용해 로그인정보를 유지하는 기법을 스터디했다.Vuex는 중요한 정보를 프로젝트내에 공통적으로 쓰이거나 중요정보를 중심

Store(vuex)의 payload 기능vue-router의 라우터가드를 통해서 로그인한 유저와 로그인을 안한 유저를 분별하여 다른 페이지와 다른 메뉴를 보이게 한다.router의 beforeEnter로 라우터가드를 연결하여서 페이지를 들어가기전에 Vuex의 상태를

https://reqres.in/ 페이크 데이터를 이용한 axios 사용.get으로 사용시 then, catch, then 역할기존에 포스트맨을 알고 있어서 API에 대해서 대략감은 있었다.프론트엔드초심자면 데이터에 대한 부담감을 가지게 된다. node를 배워

Post로 로그인 토큰을 요청로그인 토큰이 성공하면 유저정보를 요청하여서 로그인한다.어제와 별다를것 없는 내용이였다.axios의 Postaxios의 get로그인 부분 action소스

token을 로컬스토리지에 저장token을 저장하면서 바로 dispatch("getMemberInfo") 하여서 로그인시킨다.토큰저장 액션과 로그인 실행 액션은 따로 둔다.토큰이 저장되었다면 라우터에서 beforeCreate(){ this.$store.dispatch(

Node를 이용한 서버만들기Koa를 사용하여서 Node서버 구성nodemon을 이용하여 서버변화시 재실행Koa를 통하여 Node로 서버를 열수 있었다.app.listen(3000)을 통해서 3000포트를 열고 접근이 가능했다.async와 await으로 데이터를 불러올때

mysql DataBase 만들기mysql DataBase 연결knex 사용하여 연결koa, koa-router를 받아서 router 기준으로 table 불러오기mysql에 테이블을 연결하는데 문제가 생겼다. mysql을 업그레이드하라고했는데 알고보니 DB의 유저 아이

Vue에서 XMLHttpRequest로 서버를 호출하여서 데이터를 받아왔다.Vue에서는 XMLHttpRequest 대신 axios라는 것이 있는데 이것은 브라우저, 노드.js에서 XMLHttpRequest 역할을 수행해준다.XMLHttpRequest를 그냥쓰면 된다고하

axios 연결 후에 나중에 대량의 api를 만들 생각으로 api파일을 따로 두고 index.js에 axios 내용을 넣는다.axios 안에 DOMAIN 정보와 에러코드일 경우와 로그인으로 보내는 라우터 메소드를 만들어 준다.기본적인 request를 만들어 method

Login api 구현Login error시 에러부분 수정Login시 로컬스토리지에 토큰값 확인로그인 기능은 쉽게 구현했다. email과 password만 가져와서 넘겨주면 되었다.그치만 token 설정하는 것이 까다로웠다.token을 로컬스토리지에 넣어도 Http h