개발로그

오늘 한 일 인프런 [Vue.js 완벽 가이드] 진도율 77% 돌파 라우터 네비게이션 가드 학습 및 실습. async & await 학습 및 실습. 공부 내용 라우터 네비게이션 가드는 페이지를 이동하기 전에 라우터 단에서 한 번 막아주어 무언가 작업할 수 있는 기능이다. 컴포넌트 라이프사이클 훅(created)에서 데이터를 받아오면 페이지 이동된 후에도 이전 데이터가 보여지는데 네비게이션 가드로 이것을 해결할 수 있다. VueRouter의 해당 path에 beforeEnter 함수를 추가한다. 해당 함수는 (to, from, next) 세가지 인자를 받는다. to: 이동할 페이지, from: 현재 페이지, next(): (모든 할 일을 마친 뒤) 다음 페이지로 이동. (실행 안시키면 이동 안함) asyn..

해당 글은 인프런 [Vue.js 완벽가이드] 강좌에 올린 질문과 그에 대한 답변을 기록하였습니다. 질문 안녕하세요. 강의 잘 듣고 있습니다 :) 강의 중에 this.$store.state.user 부분을 줄이기 위해 computed를 사용하시면서 템플릿 부분 텍스트를 깔끔하게 하기 위해 computed를 거치는 것은 Vue.js 공식가이드에 나와있는 방식이라고 하셨는데, 그러면 mapState나 mapGetters는 언제 써야 하는것인가요? 물론 모든 방법이 다 의도한대로 작동할 것임은 알지만 제가 vuex 공식문서에서 본 바로는 "컴포넌트가 여러 저장소 상태 속성이나 getter를 사용해야하는 경우 계산된 속성을 모두 선언하면 반복적이고 장황해집니다. 이를 처리하기 위해 우리는 계산된 getter 함수..

오늘 한 일 프론트엔드 개발자를 위한 자바스크립트 프로그래밍 노랭이 책 8장 [브라우저 객체 모델] 완독. 인프런 [Vue.js 완벽 가이드] 강의 이벤트 버스와 하이 오더 컴포넌트에 대해 공부. 공부 내용 BOM 브라우저 객체 모델(BOM)은 브라우저 제조사에서 제공하는 브라우저 관련 기능을 모아놓은 객체 집합이다. window객체는 ECMAScript의 전역(Global) 객체로, 전역에 정의하는 모든 변수 및 함수는 window객체의 프로퍼티가 된다. ECMAScript에서 제공하는 네이티브 생성자 및 함수는 처음부터 window객체에 존재한다. window.open()을 통해 새로운 창이나 탭을 열면 opener프로퍼티를 이용해 새 창을 호출한 페이지를 참조 할 수 있다. location 객체를 ..

오늘 한 일 드디어 인프런 [Vue.js 완벽가이드] 진도율 50% 돌파! 공부 내용 각 뷰의 공통된 부분을 찾아서 하나의 컴포넌트를 만든다. 컴포넌트의 비즈니스 로직은 왠만하면 컴포넌트 파일에서 처리한다. 컴포넌트 데이터는 부모 뷰에서 받아서 props로 뿌려주는 방식이 있고, vuex store를 이용해서 컴포넌트에서 바로 state로 받아오는 방식이 있다. props로 뿌려주는 방식은 과정이 한 단계 추가되기때문에, 컴포넌트에서 바로 state로 받아오는 것이 vuex사용에 최적화된 방법이다. 그러나 props로 뿌려주는 방식은 부모 컴포넌트에서 어떤 데이터들이 바인딩 되는지 명시적으로 알 수 있기 때문에 어느 방법이 더 낫다고는 말하기 어렵다. 컴포넌트에서 데이터를 분기처리해주는 방법은 v-if/..

오늘 한 일 Vue.js 완벽 가이드 강의 2개 수강. 공부 내용 동적 라우트 적용하는 방법을 배웠다. { path: '/user/:id', component: UserView } routes>index.js 파일에 path를 "/user/:id" 이런식으로 정의해주면 /user/뒤에 오는 값이 파라미터로 인식되어서 $route.params.id로 데이터를 가져올 수 있다. 해당 라우트에 연결하기 위해서는 컴포넌트에 태그를 사용한다. {{ item.user }} 위와 같이 router-link 태그의 to 속성에 해당 path를 연결하여 해당 유저의 아이디 값을 동적으로 매핑해준다. vuex를 사용하면서 약간 애매한 부분이 생겼다. 컴포넌트 템플릿에 데이터를 바인딩할 때, this.$store.state..

오늘 한 일 Vue.js 완벽가이드 인프런 강좌 [중간정리 및 스타일링]까지 30% 수강 및 실습. 자바스크립트 노랭이 책 [7장 함수표현식] 완독. 공부 내용 axios / Promise axios는 Promise 객체를 반환하므로 .then과 .catch를 이용하여 비동기 처리를 할 수 있다. Promise 객체는 ES6에서 정의된 것으로, 콜백함수지옥을 해결해 줄 수 있다. new Promise로 객체 인스턴스를 만드는 순간 Promise는 대기 상태에 있게 된다. 그리고 http호출을 통해 값을 받아오게 되면 response를 가진 이행 상태가 된다. 그러나 값을 받아오지 못하면 실패 상태가 된다. 이것을 코드로 표현하면 다음과 같다. new Promise(function(resolve, reje..

오늘 한 일 파이썬 문법 공부 (반복문, 조건문, 함수) - 파이썬은 불필요한 중괄호, 대괄호 등을 거의 생략하는 편인것 같다. 그래서 더 헷갈림... 자바스크립트 노랭이책 [7장 함수 표현식] 절반 정독. 프로젝트 단위 실습을 못해서 (github에) commit을 못했다. 앞으로 1일 1커밋 실천해서 풀밭을 만들어야 겠다. 공부 내용 파이썬 반복문은 while 또는 for문. for문은 for i in (배열이름) 또는 for i in range(2, 7) (range() 함수는 2부터 6까지 배열 생성해줌) 파이썬 조건문은 if a > b: elif a < b: else 이런 식으로 괄호없이 조건문 뒤에 콜론(:)을 넣고 그 뒤에 중괄호도 생략하는 듯? 파이썬 함수 정의는 def exampleFun..

오늘 한 일 인프런 강의를 [라우터 기본] 파트까지해서 전체의 20%정도 들었다. 3일전, 노마드코더 강의 [2.2 Recap!]에 남긴 질문에 아직 답변이 없어서 한글이라 질문 해석이 안되는건가 해서 영어로 바꿔서 질문 올렸다. 공부 내용 Vue CLI를 사용해 보았다. Vue CLI 2.x 버전과 3.x 버전은 다른점이 많다. 2.x 버전은 vue init ~ 명령어를 사용하고 3.x 버전은 vue create 명령어를 사용한다. 2.x 버전은 Webpack 설정 파일이 노출되어 있고 3.x 버전은 숨겨져 있다. 2.x 버전은 node_modules를 설치하기 위해 한번 더 명령어를 입력해야 하고 3.x는 create 명령어 한 번에 모두 내려받는다. 2.x 버전은 github에 올라와있는 템플릿을 ..