archives

기본적인 부트스트랩 연동은 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..

몽고디비에서 종종 중복제거된 아이템 갯수가 필요하다. 여러개의 도큐먼트가 있고 각각 name이라는 필드값을 갖고있는데, 각각의 필드값은 a일수도, b일수도, c일수도, ...일수도 있다. 여러개의 도큐먼트가 a라는 이름을 갖고 있을수 있고 또 다른 도큐먼트들은 b라는 이름을 갖고있을수 있다. 이 경우 중복되지 않은 name필드의 갯수를 구하고 싶을때 distinct라는걸 쓸수 있다. https://docs.mongodb.com/manual/reference/method/db.collection.distinct/ { "_id": 1, "dept": "A", "item": { "sku": "111", "color": "red" }, "sizes": [ "S", "M" ] } { "_id": 2, "dept"..

앞의 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..