data() {
            return {
                tableData: [
                    ['', '', ''],
                    ['', '', ''],
                    ['', '', ''],
                ],
                turn: 'O',
            };

this.turn  = 'X';이렇게 하면 turn에 관한 데이터는 알아서 잘변경 되지만

tableData[0][1] = 'O'; 와 같이 인덱스로 데이터에 접근해서 변경하는 경우는 데이터 변경부분이 적용되지않는다.

배열에 있는 매소드를 사용해 데이터를 바꾸는건 또 적용된다. ex) tableData.push(['', '', '']);

인덱스를 사용해서 배열을 변경하고 화면에도 적용하려면

import Vue from 'vue';

Vue.set(this.tableData[1], 0, 'X'); //tableData[1][0] = 'X';

or
//Vue임포트하기 귀찮으면
this.$set(this.$root.$data.tableData[this.rowIndex], this.cellIndex,this.$root.$data.turn);

이렇게 Vue.set을 사용하여 변경해주면 적용된다.

#나중에 컴포넌트가 많아지다보면 this.$root나 this.$parent.$parent.$parent이런식으로 너무복잡해져서 답이없다 이럴때쓰는게 vuex(대충 데이터 중앙통제실)을 써서 모든데이터를  한곳에서 관리하는 라이브러리를 사용한다고 한다.

가로 가운데정렬

<div style="text-align:center;"></div>

세로 가운데정렬

<style>
.center {
	position: relative;
    top: 50%;
    transform: translateY(-50%);
}
</style>
<div class="center"></div>
    

마진상쇄 예시

첫번째 div에는 margin-bottom 20px, 두번째 div에는 margin-top 20px를 줘서 총 40px의 마진이 생겨야하지만 마진상쇄가 일어나 20px밖에 표시가 안됨

See the Pen yLYvYgN by sizzF (@sizzf) on CodePen.

display: inline-block; width:100%; 로 해결

See the Pen JjYpYGW by sizzF (@sizzf) on CodePen.

tbody.addEventListener('click', function(e){
	console.log('커런트타겟', e.currentTarget); //커런트타겟 <tbody></tbody>
	console.log('타겟', e.target); //타겟 <td></td>
});

e.currentTarget : 실제 이벤트리스너를 단 대상이 표시됨

e.target : 실제로 이벤트리스너가 발생한 부분이 표시됨

mysql 연동을 위해 mysqlclient를 설치중 오류가 발생합니다.

아마도 자신의 환경에 맞는 패키지를 설치하지 않아서 생기는 문제같습니다.

https://www.lfd.uci.edu/~gohlke/pythonlibs/#mysqlclient.Then

위의 사이트에 접속하셔서 자신의 파이썬 버전에 맞춰 whl파일을 받으신후

pip install mysqlclient-1.4.6-cp37-cp37m-win32.whl

이렇게 직접 설치해주시면 됩니다.

자바스크립트에는 파이썬처럼 공식 스타일 가이드가 존재하지 않는다

여러가지 스타일 예시

pragmatic.js : http://markdaggett.com/blog/2013/02/15/pragmatic-javascript-style/

에어비앤비 스타일 : https://github.com/airbnb/javascript

idiomatic.js : https://github.com/rwaldron/idiomatic.js/

Node.js : https://github.com/felixge/node-style-guide

파이썬 패키지를 보면 __init__.py란 파일을 볼수 있습니다.

__init__.py는 자신이 들어있는 폴더가 일반폴더가 아니라 패키지임을 알리기 위해 사용되고 패키지를 초기화 시키는 코드를 넣을수 있습니다.

추가적으로 파이썬 3.3버전에서는 해당 파일이 없어도 자동으로 패키지로 사용할 수 있다고 합니다.

# __init__.py

__all__ = [sum, sub]

__all__ : 해당 패키지의 전체를 임포트 할때 (from 패키지명 import *) 포함될 모듈들의 리스트 입니다.

# test.py

from calculator import *

print(sum(1,10))

장고의 내장 로그인 기능 이용시 간단하게 로그인후 이전페이지로 이동할수있다.

로그인 폼안에 아래의 코드를 추가해주면 자동으로 적용된다.

<input type="hidden" name="next" value="{{ next }}">

너무편하다

파이참에서 작업하던 프로젝트를 라즈베리로 옮겨서 실행하니 

django.db.migrations.exceptions.NodeNotFoundError 에러가 뜨면서 실행이 되지않았다.

검색해보니 마이그레이션을 재설정하면 된다고 한다.

1. 프로젝트 내에 모든 마이그레이션 파일 제거

__init__.py를 제외한 모든것을 제거

find . -path "*/migrations/*.py" -not -name "__init__.py" -delete
find . -path "*/migrations/*.pyc"  -delete

2. 초기화후 스키마 생성

python manage.py makemigrations
python manage.py migrate

이렇게하고 다시 서버를 돌려보니 잘실행된다. 

유저정보를 가져와서 쿠키로 저장후 자바스크립트에서 읽어주면 된다.

django쪽 코드

def dashboard(request):
    response = render(request, 'index_main.html')  # django.http.HttpResponse
    user=request.user
    topic=user.topic
    response.set_cookie(key='topic', value=topic)
    return response

request.user : user객체 받기

user.topic : user객체에 topic이라는 값

자바스크립트쪽 코드

var topic=getCookie('topic');

function getCookie(name) {
	var value = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
	return value? value[2] : null;
}

getCookie(name) : 쿠키를 가져오는 함수