인터렉티브 모션과 자바스크립트를 공부하고 있는 웹 퍼블리셔에요 :-9

Vue

이 글은 Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex 강의를 바탕으로 작성한 글입니다. 멋진 강의 감사합니다 (__) 시리즈: Todo 웹앱 만들기(1) 5. 할 일 목록 구현하기 지난 글에서 퍼블리싱까지 마쳤으니, 이제부터 기능을 개발할 차례입니다. 🚀 할 일 추가하기 TodoInput은사용자가 입력한 내용을 받아와 localStorage에 저장하는 기능을 담고 있습니다. Web Storage API는 직관적으로 key/value 데이터..

2020.05.28

Vue

이 글은 Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex 강의를 바탕으로 작성한 내용입니다. 멋진 강의 감사합니다 (__) 1. 프로젝트 구상 Todo List를 보여주는 간단한 웹 페이지를 만들어보겠습니다. localStorage를 활용해 리스트를 추가/삭제하려고 합니다. 얍, 이런 느낌으로 만들어보려고 해요 🙋‍♀️ (디자인은 미래의 나에게 맡긴다!) 여기에 필요한 컴포넌트를 나열하면 이렇겠네요. - header :..

2020.05.26

Vue

이 글은 Vue.js 시작하기 - Age of Vue.js 강의를 보고 작성한 노트 필기입니다. 뷰는 1도 모르지만 친해지고 싶은 사람이 공부를 위해 작성한 글입니다 :-9 필요할 때마다 수정/보완해 나갈 예정입니다. Vue.js 소개 Vue는 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크 입니다. 공식 페이지 - vuejs.org - kr.vuejs.org (한국어) 위 사이트에서 상세한 공식 문서를 제공하고 있습니다. Reactivity Reactivity는 V..

2020.05.21

CSS

오늘은 CSS 방법론을 다뤄보겠습니다 ;-) 말이 거창하긴 한데 쉽게 풀어쓰면 'CSS 클래스네임을 어떻게 지으면 좋을지' 고민해보는 거죠. 방법론에는 여러 가지가 있는데, 최근 BEM을 실무에 도입하면서 매력을 느끼고 있어요! 그래서 이번 포스트는 BEM에 대한 내용입니다. 한 번 읽어 보시면 도움이 되리라 생각합니다. (*이 포스트의 틀린 부분이나 고칠 점이 있다면 알려주세요! 감사히 배우겠습니다.) 1. BEM의 기본 구조..

2020.05.17

JavaScript

ES6에서 추가된 const 와 let 에 대해 정리해 봅니다. 예전 블로그 내용을 가져와 살짝 다듬었습니다. const와 let 키워드를 처음 접하는 초보자가 보시면 좋을 것 같아요 :) 프롤로그 예전에 자바스크립트 강의를 듣다가 스크립트 파일에 적힌 const와 let이란 키워드를 보고, '허허허 강의 잘못 클릭했네 이건 JS강의가 아니잖아 허허' 이러고 뒤로가기를 누른 적이 있습니다. 그때 var 말고도 다르게 변수를 선언할 수 있다..

2020.04.29

JavaScript

this는 이것을 뜻합니다! (그러니까 '이게' 뭐죠...... 😵) 자바스크립트 내에서 this는 '누가 나를 불렀느냐'를 뜻한다고 합니다. 즉, 선언이 아닌 호출에 따라 달라진다는 거죠. 그럼 각 상황별로 this가 어디에 바인딩되는지 알아봅시다. 1. 단독으로 쓴 this 묻지도 따지지도 않고 this를 호출하는 경우엔 global object를 가리킵니다. 브라우저에서 호출하는 경우 [object Window]가 되겠죠? 이는 ES5에서 추가된 strict m..

2020.04.28

JavaScript

문제 ReferenceError: primordials is not defined in node 라고 에러가 뙇! 떠서 당황당황 😣 검색해본 결과, Gulp 3 버전은 node 12 버전에서 제대로 동작하지 않는다고 합니다. 제가 작업한 환경은 node@11.13.0에 gulp@3.9.1였기에 잘 동작했는데, 최신 node 버전(12 이상)이 설치된 환경에서는 프로젝트가 실행이 되지 않았습니다(ㅠㅠ) 방법1 node 버전을 11로 다운그레이드하거나, gulp 버전을 4로 업그레이드합니다. (참..

2020.04.24