nana_log

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

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/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.

Blog/JavaScript

글과 일부 이미지의 출처는 [ 인사이드 자바스크립트(송형주, 고현준 저) ]에 있음을 밝힙니다 :-) 1. 함수 정의 우선 어떻게 함수를 만드는지 살펴봅시다. 1) 함수 리터럴 JS에서 함수는 뭐다? 객체다! 객체 리터럴 방식으로 객체를 생성했듯, 함수 리터럴 방식으로 함수를 생성할 수 있습니다. function add(a,b) { return a+b; } 위 리터럴의 구조를 살펴보면, [ function 키워드 + 함수 이름 + 매개 변수 + 함수 몸체 ] 로 이루어져있음을 알 수 있습니다. 여기서 함수 이름과 매개변수는 선택사항입니다. JS는 이름이 없는 '익명함수'를 생성할 수가 있거든요. 2) 함수 선언문 함수 선언문 방식은 함수 리터럴 형태와 같은데, 함수 선언문으로 정의된 함수는 반드시 함수명..

2019. 9. 10.

Blog/JavaScript

글과 일부 이미지의 출처는 [ 인사이드 자바스크립트(송형주, 고현준 저) ]에 있음을 밝힙니다 :-) 1. 자바스크립트 기본 타입 JS의 기본 타입으로는 숫자, 문자, 불린값, undefiend, null이 있습니다. 1) 숫자 C언어의 경우 정수냐 실수냐에 따라 int, float 등과 같이 다양한 숫자 타입이 존재합니다다. 반면에 JS는 느슨한 타입 체크 언어이므로 정수든 실수든 그냥 숫자 타입이죠. var num = 5/2; 위의 연산을 C언어에서 할 경우 소수 버린을 버린 2만 출력됩니다 (정수랑 정수끼리니까..) BUT!! JS에선 2.5가 나옵니다(정수건 실수건 넌 그냥 숫자야^^) 2) 문자열 길이가 1개이든 길든 JS는 그냥 문자! var str = ‘test’; console.log(st..

2019. 9. 5.