archives

https://forum.vuejs.org/t/putting-a-method-axios-inside-a-global-component/21729/2 axiosGet.jsexport function axiosGet (url) { return axios.get(url) .then(function (response) { return response.data.data; }) .catch(function (error) { return 'An error occured..' + error; }) } somehtml.html//... import { axiosGet } from './axiosGet'; // Filename would be axiosGet.js, you don't need the js extension..

기본적인 부트스트랩 연동은 http://qkqhxla1.tistory.com/964 에서 다뤘었다. 그런데... 나처럼 초보들은 저런게 있어도 이쁘게 화면배치를 잘 못한다. http://qkqhxla1.tistory.com/965 에서 아주 기본적인 부트스트랩을 사용해서 로그인 페이지를 만들었었는데, 너무... 그렇다. 디자인을 아무리 못한다고 해도, 기능구현에 초점을 맞췄다고 해도 저건 아니다 싶을정도로 안이쁘다. ..... 그래서 기능구현이 더 급함에도 불구하고 로그인 페이지 디자인 개선에 나섰다. 저렇게 메뉴 따로 폼 따로 있는거말고 로그인 페이지 따로 이렇게 큰 컴포넌트? 단위로 있는 부트스트랩 예시 페이지가 당연히 있을것같아서 동기들한테 정보를 구했고, https://bootsnipp.com/ ..

바로 전 글에서 flask에는 jwt라는걸 이용해 인증을 한다고 했다. 그리고 파이썬으로 테스트까지 완료하였다. 어떻게 동작하는지 확인하였으니 이젠 vue에서 jwt인증요청을 보내고 access_token을 받아서 저장까지 구현해봤다. 뷰에서는 어떻게 이러한것들을 저장할까. 찾다 발견한게 vuex이다. 아래는 vuex튜토리얼이다. https://vuex.vuejs.org/kr/ 이해가 잘 안가서 5번은 읽어본것 같다. vuex를 기반으로 /mystore안에 store를 만든다. (다른분이 짠걸 가져와서 변형했다..) /mystore/index.js import Vue from 'vue' import Vuex from 'vuex' const LOGIN = 'LOGIN' const LOGIN_SUCCESS ..

flask 에서는 jwt 인증이란걸 쓴다고 한다. 몇년전에 웹 공부할때 로그인 구현을 session과 쿠키에 넣어서 한적이 있었는데, 왜 굳이 flask에서는 jwt인증이란걸 쓰는지 모르겠다. 찾았더니 좋은 글이 나왔다. https://stackoverflow.com/questions/43452896/authentication-jwt-usage-vs-session JWT doesn't have a benefit over using "sessions" per say. JWTs provide a means of maintaining session state on the client in stead of doing it on the server.What people often mean when asking t..

앞의 Login.vue를 다시 보자. 일단 폼의 데이터를 뷰로 가져와야하는데 방법이 많을것같은데 생각나는게 v-model로 데이터를 동기화해서 가져오는 방법이 있어서 이렇게 했다.(이게 뷰에 적합한(?) 방법인지는 모르겠음)그리고 폼 -> 뷰로 가져온 데이터를 다시 ajax로 서버로 쏴줘야 한다. 책에 axios라는 vue ajax 가 있는데 구글링해가며 사용했다. 로그인은 uri /api/login로 구현하기로 마음먹었다. 쿠팡 Ldap id, pw를 입력하세요. Name Login credentials라는걸 선언해주고 폼과 credentials를 v-model로 바뀔때마다 서로 알아채도록 설정하고 버튼 클릭에 v-on:click='login'으로 로그인 함수를 호출하도록 하였다.(지금보니까 @clic..

로그인을 구현해보았다. 앞에서 vue와 flask의 연동을 다뤘지만 실질적인 데이터 이동은 없는 말 그대로 그냥 기본적인 vue 프론트를 flask에서 실행시키는 정도여서.. 이번엔 데이터가 왔다갔다하는 로그인 폼을 구현해보기로 했다. 혹시모르니까 파일구조 한번 캡쳐... 첫번째로 로그인을 구현할 뷰 페이지로 /src/components아래에 Login.vue를 만들었다. 로그인 페이지로 이쁘게 만들어보려다가 욕심이 너무 과하다 생각하여 그냥 기능만 되는 페이지를 만들기로 하였다. 로그인 체크는 회사의 ldap으로 할거기에 placeholder에 ldap 관련 문구를 넣었다. 폼은 바로 이전 글의 bootstrap-vue에서 가져왔다. https://bootstrap-vue.js.org/docs/comp..

https://alligator.io/vuejs/using-bootstrap4/ 를 참조해서 만들었다. 적용은 이 앞의글의 webpack 으로 만든 그 프로젝트에 계속 이어서 한다. 1. npm install bootstrap-vue bootstrap --save 명령어로 bootstrap-vue를 설치한다. 2. 나의 App의 main file.즉 /src/main.js에 bootstrap plugin을 추가해준다. 아래와 같다. import Vue from 'vue' import App from './App' import router from './router' import BootstrapVue from 'bootstrap-vue/dist/bootstrap-vue.esm' import 'bootst..

뷰를 공부하면서 if for 이런 기본적인 문법들은 그냥 휘리릭 보고 지나갔는데 컴포넌트 만드는 부분에서 막혔다. 일반적인 컴포넌트 만드는 방법이야 튜토리얼 페이지에 잘 나와있는데 이것보다 웹펙 구조를 파악해서 컴포넌트만 모아두는 곳에 가서 짜고 다른 곳에서는 그것을 가져오는... 그러니까 디자인패턴 처럼 이런 방법론을 바탕에 깔고 프로그래밍을 시작하는게 더 맞는것 같아서,(그리고 참고할 만한 레퍼런스가 있어서) 한번 만들어봤다. 1. https://kr.vuejs.org/v2/guide/single-file-components.html 를 참조해서 MyComponent.vue파일을 만들었다. 이것을 src/components안에다가 넣었다. 컴포넌트를 만들때, {{greeting}}을 태그로 감싸줬는데..

http://qkqhxla1.tistory.com/961에서 언급했듯이 목적은 flask를 백앤드로 하고, vue를 프론트로 돌리는거다. 파이썬 2버전이고, flask설치를 하고 app.py를 프로젝트의 가장 위에 만들었다.(사실 어디에만들어야할지 잘몰라서 여기에 만듬.) 그리고 우리팀의 위키와 여러가지 삽질해서 flask코드를 만들었다. # -*- coding: utf-8 -*- from flask import Flask import os class MyFlask(Flask): jinja_options = Flask.jinja_options.copy() jinja_options.update(dict( block_start_string='{%', block_end_string='%}', variable_..

일단 나는 웹 프론트, 백엔드 개발이 아예 처음이다. 우리 팀은 웹 서비스 관련된 팀이 아니기에 일반적으로 개발자로 취직하면 하는 자바 스프링이라던지 그런걸 안만졌다. 그래도 나중을 위해서 기초적인 프론트, 백정도는 혼자서 이렇게저렇게 만들어야 한다고 생각해서 공부중이다.(큰거 말고 작은거..) 처음으로 뷰 공부를 해보려고 팀에서 다른분이 만들어놓은 python flask + vue가 구현되어있는 소스를 뜯었다. 나처럼 웹에 대해 아무것도 모르는 사람이 그냥 만들어져 있는 소스를 뜯어보려고 하면 파일 구조부터가 이상하다. 가볍게 vue에 관해서 튜토리얼과 책 한권을 읽고, 소스를 뜯어보려고 했지만 파일 구조부터가 이해가 안간다. 아래는 https://github.com/vuejs-templates/web..

기본적인 지식이 전무할 경우 http://flask.pocoo.org/docs/0.12/tutorial/ 와http://flask.pocoo.org/docs/0.12/quickstart/ 와부트스트랩에 대해 기본적인걸 읽고 오자. 일단 flask를 시작한지 몇일 안되었고, 단순히 위의 docs만 읽었다. 부트스트랩은 한번도 해본 적 없고, 이번에 기회가 생겨서 연동한 삽질 내용만 적겠다. 일단 글을 쓰는 이유는 나는 웹 구축이 처음이다. 웹 구축을 하면서,해보려고 시도하면서 가장 어려웠던 점은 돌아가는 서버 위에 부트스트랩 같은 템플릿(?초보라 맞는 말인지 모르겠네요) 을 가져와서 올려놓는 것이었다. 개인만의 블로그나 페이지를 만들고 싶을때, 대부분 백엔드는 대충 할수 있다. 프로그래밍적인 로직이 필요하..

http://dev-momo.tistory.com/entry/javascript-ES6-Proxy 좋은글.

인프런에서 무료강좌를 해주는데 매우매우매우매우 좋은듯 https://www.inflearn.com/course/react-%EA%B0%95%EC%A2%8C-velopert/

http://homoefficio.github.io/2017/02/19/Blocking-NonBlocking-Synchronous-Asynchronous/ 좋은 글 공유.

deferred와 promise는 비동기 처리 관련 자바스크립트 객체다. Promise는 비동기 처리 로직을 추상화 한 객체와 그것을 조작하는 방식을 말한다. deferred와 promise의 개념.http://stackoverflow.com/questions/17308172/deferred-versus-promise 의 대답인데 쉽게 잘 설명해놓은것 같다.down voteacceptedFirst: You cannot use $.Promise(); because it does not exist.A deferred object is an object than can create a promise and change its state to resolved or rejected. Deferreds are ty..

이벤트는 4가지 종류가 있다. 1. 마우스 이벤트 : 마우스 버튼 클릭했을때 등.2. 키보드 이벤트 : 키보드를 눌렀을때 등.3. 태그요소 고유 이벤트 : ex) img태그같은겨우 이미지가 모두 로딩되면 load이벤트가 발생한다. 4. 사용자 정의 이벤트 : 개발자가 만든 이벤트. 이벤트의 단계. 단계1 : 캡쳐 단계.단계2 : 타깃 단계.단계3 : 버블링 단계. 구글링해서 찾은 이미지인데 5번에 있는 (text)에 접근한다고 가정하자. 1번에서 이벤트가 시작되어 순서대로 가다가 10에서 끝난다. 캡쳐 단계는 목적지까지 가기 전의 경로들을, 타겟 단계는 접근하려는 타겟에 접근한 단계, 버블링 단계는 끝내고 다시 돌아오는 단계이다. 1. 캡쳐 단계.eventphase속성값이 1로 출력되며 이벤트 등록은 $..

노드 다루기 아이디 이름으로 노드 찾기$('#아이디') 태그 이름으로 노드 찾기$('태그') 클래스 이름으로 노드 찾기 $('.클래스') 속성으로 노드 찾기 $('[속성이름=값]') 찾은 갯수 구하기 $대상.length n번째 노드 접근하기 $대상.eq(index) 자바스크립트 dom 객체 접근하기 $대상.get(index), $대상[index] 순차적으로 노드 접근하기 $대상.each(function(index) { $(this)또는 $대상.eq(index); }) 찾은 노드 중에서 특정 노드만 찾기 $대상.filter('선택자') 찾은 노드의 자손 노드 중 특정 노드만 찾기 $대상.find('선택자') 인덱스 값 구하기 $대상.index(), $목록.index($대상), $목록.index(대상 dom..

참고 : http://www.nextree.co.kr/p4327/ 참고2 : https://opentutorials.org/module/532/6580 이거 두개면 될거같다. 테스트는 온라인에서 하지말고 콘솔에서 node가 되면 var a = /^([a-z0-9]{5,})$/.test('abc1'); // false var b = /^([a-z0-9]{5,})$/.test('abc12'); // true var c = /Abc/i.test('abc123'); // true console.log(a); console.log(b); console.log(c); 처럼 만들어서 node ~.js로 실행해서 true나오는지 false나오는지 체크한후 사용.

http://www.w3schools.com/cssref/css_selectors.asp 와 테스트해볼 사이트로는 http://www.w3schools.com/cssref/trysel.asp w3 schools 너무 좋다. jquery 참고용. http://www.w3schools.com/jquery/jquery_selectors.asp 자바스크립트는 아니지만 겨우 이거가지고 카테고리 만들기 싫어서 여따 넣어놓음.

1. 아래처럼 변수에 함수를 할당할 경우 바로 실행이 가능하다. var a = function (){ console.log('aksdfjasfdjlk'); }(); 근데 function a() {}같이 함수 선언시에는 안됨. 2. 리스트가 파이썬처럼 편하다. var a = [0, 1]; a[5] = 5; a.push('rara'); console.log(a); 결과 살펴보기. 3. 클래스같은 함수. 클래스인가? var m = function(name){ this.name = name; }; m.prototype.get_name = function () { return this.name; }; var mym = new m('cats!'); console.log(mym.get_name()); 4. 유명한 클..

보호되어 있는 글입니다.

1. 자바스크립트에서 사전을 만들때 키나 값을 문자열로 안넣어도 된다. var a = {airline: {'korean_air':'하하하!'}, 'number':'555'}; document.writeln('airline'); airline이라는 변수?처럼 키값을 선언했는데 그냥 저렇게 에러 안뜨고 사용이 가능함. 2. function선언시 두가지가 가능하다. var f = function(a,b) { return a+b; } function f(a,b) { return a+b; } 두가지의 차이점은 다음과 같다. 선언하기도전에 사용가능한가와 사용불가능. http://stackoverflow.com/questions/336859/javascript-function-declaration-syntax-var..