개발로그

1. 2019 W3C HTML5 컨퍼런스 매년 과기부에서 주최하는 행사. - Vue.js 발표 자료 링크https://github.com/joshua1988/vue-five-common-mistakes - 흥미로운 주제들 - SVELTE - Project Fugu https://www.chromium.org/teams/web-capabilities-fugu - fugu는 복어라는 뜻. 잘쓰면 좋지만 잘못쓰면 독이된다... - fugu로는 네이티브에서만 가능한 파일시스템에 접근 가능하다. - PWA 최신 API 목록 https://developers.google.com/web/updates/capabilities 2. vim으로 자동 생성된 import 구문의 경로 앞에 붙는 '@'는 얼라이언스라고 하는데..

오늘 한 일 [node.js 교과서] 책 3장 [노드 기능 알아보기] 공부 완료. 프로그래머스 알고리즘 1문제 풀기 완료. 패캠 강사님이 주신 자료중 How DNS Works 1회독 완료. 9월 3일 열리는 JSConf Korea 2019 티켓을 양도하고싶다는 사람을 오픈채팅방에서 우연히 만나 극적으로 양도 받음..!! JSConf 운영진 프로필을 보다가 블로그를 벨로퍼트님이 만드신 velog로 운영하는 분이 있어서 들어갔다가 자연스럽게 가입함. 그러나 그곳에 TIL을 올리기엔 내 글이 너무 허접해 보여서 일단 기존 운영하던걸로 하기로 결정. 기존에 구글블로그를 메인으로 하고 티스토리를 작성용으로 썼으나, 구글블로그는 태그가 곧 네비게이션이 되는지라 태그지정을 마음껏 하기가 어려운 점, 템플릿이 예쁘지 ..

오늘 한 일 it 관련 컨퍼런스나 행사 관련한 소식을 다양하게 접하기 위해 프론트엔드 오픈채팅방에 질문하여 다양한 사이트를 수집하였다. (Festa, 이벤터스, 온오프믹스, meetup 등..) 또한 아깝게 놓친 좋은 컨퍼런스나 새로운 활동 모집 등이 많아서 안타까운 마음에 급하게 페이스북을 다운받아 여러 그룹을 팔로잉하고 알람을 켜두었다. 몇일 전 슬랙도 다운받아서 이상한 모임에 가입했다. 몇달 전에 사둔 Node.js 교과서 책을 이제야 정독하기 시작했다. 현재 [3장 노드 기능 알아보기] 읽는 중. 최근 포트폴리오를 새로 만들고 이력서도 새로 쓰느라 블로그를 소홀히 한 것 같아 오랜만에 TIL 작성중이다. 공부 내용이 별로 없어서 바로 느낀점. 지난 토요일 패스트캠퍼스 PWA 수업에 가서 온라인으로..

오늘 한 일 인프런 [Vue.js 완벽 가이드] 완강. 자바스크립트 노랭이 책 9장 [클라이언트 탐지] 요약본 1회독. 공부 내용 컴포넌트 디자인 패턴 컴포넌트 디자인 패턴은 총 4가지가 있다. common, slot, controlled, renderless common - 일반적인 컴포넌트 등록과 컴포넌트 데이터 통신 방식 slot - 슬롯 속성을 이용하여 컴포넌트의 독립성과 확장성을 키운다. 예를 들어 부모 컴포넌트에서 마크업 확장 가능. controlled - 컨트롤 태그(체크박스나 라디오버튼 등)를 컴포넌트화할 때 유용(?) 결합력을 높이는 방법인데 사실 이부분은 아직 잘 모르겠다... renderless - render() 함수를 이용하여 템플릿 없이 스크립트 태그로만 렌더링하는 방식이다. 데..

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

오늘 한 일 드디어 인프런 [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..