고리타분한 개발자

목표세션과 쿠키의 필요성 인지하기쿠기와 세션의 차이를 이해하기내가 사용하고 있는 서버언어의 쿠키, 세션 이용방법 찾아보기세션쿠키보다 안전하고, 조금 더 많은 정보를 저장할 수 있음쿠키가 클라이언트 측(웹브라우저)에 이전 통신 정보를 저장하는 것(HTTP 통신은 이전 통신 상태, 정보를 알지 못함): 장바구니, 로그인 정보 등 쿠키 보안 이슈사용자의 웹브라우저와 서버가 통신하는 과정에서 중요한 정보(로그인시 아이디 비밀번호)가 왔다갔다하는데 중간에 탈취가능성클라이언트 컴퓨터 해킹 - 쿠키 정보 탈취 가능성 세션(쿠키 방식 + 서버 측 db에 정보 저장) 혼용쿠키 방식 - 브라우저 저장(사용자 식별자값만 저장), 실제 값(비밀번호)은 서버 db에 저장, key - value 방식쿠키 보안 이슈 해결: 식별자..

기본적인 컴포넌트 사용에 대하여 알아보았으니, 이젠 컴포넌트가 어떻게 사용되는지 연습해볼 차례입니다. 우선 진행하기에 앞서 "https://bulma.io/" 사이트를 한번 둘러봐주세요. 이번시간에는 bulma라는 api를 사용하도록 하겠습니다. DOCTYPE html> body { padding-top: 40px; } Hello World Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum fe..

이번에는 지난 포스트에 이어서 여러개의 컴포넌트를 사용하는 방법을 알아보도록 하겠습니다.지난번에는 task라는 이름의 template를 출력하는 컴포넌트를 만들어 보았는데요, 이번시간에는 좀더 나아가 task-list라는 리스팅 컴포넌트를 만들어 보도록 하겠습니다. DOCTYPE html> // main.jsVue.component('task-list', { template: ` {{task.task}} `, data() { return { tasks: [{ task: 'Go to the store', complete: true }, { task: 'Go to the email', complete: false }, { task: 'Go to the farm', complete: true }, { task..

때론 코드를 재사용할 일이 생기기도 합니다. 이번시간에는 components를 사용하는 방법에 대해 알아보겠습니다. DOCTYPE html> // main.jsVue.component('task', { template: 'Foobar'}) new Vue({ el: '#root'}) 위에는 index.html과 main.js 두개의 코드가 있습니다. main.js는 index.html의 src로 연결 되어있죠. main.js를 보면 task라는 이름의 component가 정의되어 있습니다. 이 컴포넌트는 Foobar를 뿌려주는 template를 가지고 있습니다. 컴포넌트는 과 같은 방법으로 사용할 수 있습니다. 결과값은 아래와 같이 나오게 됩니다. 하지만 여기에는 한가지 흥미로운 사실이 있습니다. slot..

이번시간에는 Vue computed사용법을 익혀보도록 하겠습니다. 코드부터 살펴보면, {{message}} {{reversedMessage}} var app = new Vue({ el: '#root', data: { message: 'Hello World' }, computed: { reversedMessage() { return this.message.split('').reverse().join(''); } } }) Vue data부분에 message값을 'Hello World'로 주었습니다. 이 값은 {{message}}로 받을 수 있죠. computed부분에서는 message를 역순으로 변환하는 함수를 넣어줍니다. 즉, Hello World는 dlroW olleH가 되겠죠. computed에서 지정..

이번 포스트에서는 제목과 같이 Attribute 와 Class 바인딩을 해볼 차례입니다. 우선 기본적인 button에 title을 주는 코드르 알아보도록 합시다. Hover Over 위와같이 입력후 버튼에 마우스를 가져다 대면, 저 글씨가 나오죠.이번에는 Vue data에 binding 시켜보도록 하겠습니다. Hover Over Me var app = new Vue({ el: '#root', data: { title: 'Now the title is being set through JavaScript.' }, }) 이쯤되면 v-bind를 통해 vue data부분에있는 title을 바인딩 시켰다는 설명이 없어도 코드만으로 이해할 수 있으실거라 생각되어 집니다. 참고로 'v-bind:' 는 ':'로 대체할 ..

안녕하세요. 지난시간에는 addEventListener 를 사용하여 버튼에 이벤트를 주었는데요, 이번 포스트에서는 v-on directive event listeners를 사용 해보려고 합니다. v-on은 vue에서 기본으로 제공하는 directive입니다. 사용법은 v-on:option 이런식으로 v-on뒤에 :option을 붙여주면 됩니다. 저희는 버튼을 클릭해서 리스트를 추가하는 이벤트를 만들려고 하니, v-on:click이런식으로 사용하면 되겠죠?코드를 통해 확인 하겠습니다. DOCTYPE html> Add Name var app = new Vue({ el: '#root5', data: { newName: '', names: ['Park', 'Lee', 'Kim', 'Jung'] }, method..

이번엔 기본적인 리스팅에 대해서 포스팅을 해보려고 합니다. 리스팅을 하기전에 데이터 바인딩을 먼저 간단하게 복습 해보고 진행하는 것이 좋을것 같네요. 아래 코드는 간단한 데이터 바인딩 입니다. DOCTYPE html> {{foo}}, {{name}} new Vue({ el: '#root', data: { foo: 'bar', name: 'monkey' } }) 결과: {{foo}}, {{name}} 자, 그럼 이번에는 array를 바인딩 해볼까요? DOCTYPE html> {{names}} new Vue({ el: '#root1', data: { names: ['Park', 'Lee', 'Kim', 'Jung'] } }) 결과: {{names}} array 바인딩이 정상적으로 작동하였으니 리스팅을 할 차..

자, 이번에는 코딩을 도와줄 Vue Devtools를 설치 해볼텐데요. 크롬 확장 프로그램입니다. 물론 크롬에서만 사용 가능하지요. 구글에 vue dev tools를 검색후 아래 확장 프로그램을 다운 받아 줍니다. 설치가 완료되면 아래와 같이 크롬 상단에 확장프로그램 아이콘이 생길탠데요. Vue 코드가 없다면 Vue.js not detected라고 표시되어질 겁니다. 이전 포스트에서 vue를 사용하여 코드를 작성하였음에도 불구하고 Vue.js not detected라고 표시되어지는 이유는 바로 로컬 경로 때문인데요. 이 문제를 해결하기 위해 파일 URL에도 접근을 허용할수 있게 해주어야 합니다. 방법은 확장프로그램 관리에서 Vue.js devtools를 찾은뒤 파일 URL에 대한 액세스 허용란에 체크 표..

개요안녕하세요!!! 항상 angularJS를 사용해오다가 directive의 심한 학습곡선과 개발된지 오래된 framework인 만큼 버전 업그레이드도 더디고 있긴있나...? 아무쪼록 무언가 새로운 것을 공부 해보려는 찰나에 Angular, React, Vue 중에서 VueJS가 그나마 쉽고 공식 홈페이지도 이쁘게 잘 되어있어서 google의 지원을 받는 angular와 facebook의 react를 과감히 포기하고 선택하게 되었습니다. ㅎㅎ. 아무튼, vue api를 쭉 한번 보고 vuex와 nuxt를 진행하기전에 데이터 바인딩부터 시작해서 리스팅, 이벤트 리스너, 필터등을 복습해보고자 합니다. 간략하고 빠르게.JS vs Vue JS여러분들은 자바스크립트에서 querySelector를 가지고 data ..