nana_log

좋아하는 걸 좋아하는 나나 🤟

Blog/Library

이 글은 Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex 강의를 바탕으로 작성한 글입니다. 멋진 강의 감사합니다 (__) 시리즈: Todo 웹앱 만들기(2) 7. UX 업그레이드 이제부터는 꼭 필요한 기능은 아니지만, 있으면 사용자 경험을 개선하는 데 도움을 주는 기능을 개발합니다. 이름 저장하기 저는 서비스의 트렌드 요소 중 하나는 '개인 맞춤'이라고 생각합니다. 로그인 한 사용자에게 맞는 홈 화면을 보여주는 네이버처럼요. 그래서 전 이름을 불러주는 서비스를 좋아합니다. (나에게로 와서 꽃이 되었다... 🌸) Momentum 서비스와 비슷하게, 처음 만난 사용자에게 이름을 묻고 저장하는 과정을 추가해 보겠습니다. 없던 기능이 추가된 거라 개발이 좀 꼬였는데 실무라 생각..

2020. 5. 30.

Blog/Library

이 글은 Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex 강의를 바탕으로 작성한 글입니다. 멋진 강의 감사합니다 (__) 시리즈: Todo 웹앱 만들기(1) 5. 할 일 목록 구현하기 지난 글에서 퍼블리싱까지 마쳤으니, 이제부터 기능을 개발할 차례입니다. 🚀 할 일 추가하기 TodoInput은사용자가 입력한 내용을 받아와 localStorage에 저장하는 기능을 담고 있습니다. Web Storage API는 직관적으로 key/value 데이터를 안전하게 저장할 수 있습니다. 로컬 스토리지는 브라우저를 종료해도 데이터가 계속 남아 있지만, 세션 스토리지는 세션이 종료되면 데이터도 사라집니다. 각각의 오리진에 대해 다른 스토리지 객체가 localStorage와 session..

2020. 5. 28.

Blog/Library

이 글은 Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex 강의를 바탕으로 작성한 내용입니다. 멋진 강의 감사합니다 (__) 1. 프로젝트 구상 Todo List를 보여주는 간단한 웹 페이지를 만들어보겠습니다. localStorage를 활용해 리스트를 추가/삭제하려고 합니다. 얍, 이런 느낌으로 만들어보려고 해요 🙋‍♀️ (디자인은 미래의 나에게 맡긴다!) 여기에 필요한 컴포넌트를 나열하면 이렇겠네요. - header : 웹앱 이름과 오늘 날짜를 보여줍니다 - title : 몇 개의 할 일이 남았는지 보여줍니다 - input : 할 일을 입력받습니다 - controller: 필터와 모두 삭제 기능이 들어 있습니다 - list : 할 일 목록을 보여줍니다 - footer :..

2020. 5. 26.

Blog/Library

이 글은 Vue.js 시작하기 - Age of Vue.js 강의를 보고 작성한 노트 필기입니다. 뷰는 1도 모르지만 친해지고 싶은 사람이 공부를 위해 작성한 글입니다 :-9 필요할 때마다 수정/보완해 나갈 예정입니다. Vue.js 소개 Vue는 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크 입니다. 공식 페이지 - vuejs.org - kr.vuejs.org (한국어) 위 사이트에서 상세한 공식 문서를 제공하고 있습니다. Reactivity Reactivity는 Vue가 가진 가장 큰 특징이라고 할 수 있습니다. Vue가 하는 일을 흉내내보면 이렇습니다. 위 코드를 실행 후, 콘솔에 viewModel.str = "안녕하세요!"`와 같이 입력하면 해당 글씨가 화면에 바로 나타나게 됩니다. 이를 V..

2020. 5. 21.

Blog/CSS

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

2020. 5. 17.

Blog/JavaScript

ES6에서 추가된 const와 let에 대해 정리해 봅니다. 예전 블로그 내용을 가져와 살짝 다듬었습니다. const와 let 키워드를 처음 접하는 초보자가 보시면 좋을 것 같아요 :) 프롤로그 예전에 자바스크립트 강의를 듣다가 스크립트 파일에 적힌 const와 let이란 키워드를 보고, '허허허 강의 잘못 클릭했네 이건 JS강의가 아니잖아 허허' 이러고 뒤로가기를 누른 적이 있습니다. 그때 var 말고도 다르게 변수를 선언할 수 있다는 걸 알고 엄청난 충격을 받았죠...... 너무 충격을 받아서 일기까지 썼을 정도 😵 ES6가 뭐지? const와 let은 ES6에서 등장했습니다. 그런데 ES가 뭐죠? 이건 ECMAScript를 뜻합니다. Ecma라는 곳에서 '이거 표준안으로 합시다 땅땅'하고 정한 내용..

2020. 4. 29.

Blog/JavaScript

this는 이것을 뜻합니다! (그러니까 '이게' 뭐죠...... 😵) 자바스크립트 내에서 this는 '누가 나를 불렀느냐'를 뜻한다고 합니다. 즉, 선언이 아닌 호출에 따라 달라진다는 거죠. 그럼 각 상황별로 this가 어디에 바인딩되는지 알아봅시다. 1. 단독으로 쓴 this 묻지도 따지지도 않고 this를 호출하는 경우엔 global object를 가리킵니다. 브라우저에서 호출하는 경우 [object Window]가 되겠죠? 이는 ES5에서 추가된 strict mode(엄격 모드)에서도 마찬가지입니다. 'use strict'; var x = this; console.log(x); //Window 2. 함수 안에서 쓴 this 함수 안에서 this는 함수의 주인에게 바인딩됩니다. 함수의 주인은? win..

2020. 4. 28.