pai-plznw4me / code-sharing Goto Github PK

View Code? Open in Web Editor NEW

1.0 3.0 0.0 144 KB

Python 1.27% HTML 1.28% CSS 2.77% JavaScript 94.68%

code-sharing's People

Contributors

Stargazers

Watchers

code-sharing's Issues

onload function 내에서 생성한 변수 reference 가져오는 법

window.onload = function init() {
 ... 
var firepad = Firepad.fromCodeMirror(firepadRef, codeMirror, {
    defaultText:
      '// JavaScript Editing with Firepad!\nfunction go() {\n  var message = "Hello, world.";\n  console.log(message);\n}',
  });
}

문제점:

위 onload function 에서 생성한 변수 fireaapd를 가져와 안에서 해당 변수를 사용해야 한다.

try 1 :

함수 안에 전역변수 설정하고 함수를 실행한다. 그 후 <script> 안에서 해당 전연벽수의 호출 가능 여부를 확인 -> 가능함

<p id='test'>Hello</p>
<div id='test1'>Hello</div>
<script> 
 function test_func(){
   global_str = 'abc';
   console.log(global_str+!);
} 
test_func()
console.log(global_str+'!')
document.getElementById('test1').innerHTML = test_str
</script>

codepen 에서 위 코드를 확인하면
위 코드에서는 전역변수로 설정한 global_str function 밖에서 제대로 인지한다.

try 2:

<Head> 에서 전역 변수를 정의하면 <body> 에서 해당 변수를 사용가능하다.

위 방식은 적용 불가능하다.
어디에 전역변수가 정의되어 있느냐가 문제가 아니다.
문제는 onload fucntion 에서 실행 되기 전 onload function에 정의되어 있는 변수를 사용하기 때문에 발생하는 문제이다.

try 3

onlaod 는 호출시 DOM 내용뿐만 아니라 Contents 의 내용도 모두 구성후 onload function 을 호출한다.
DOM Tree 구성 ->각 DOM elements의 contents 완성 -> onload function 호출 흐름으로 web page 가 구성 되기 때문에
onload function 안에 있는 전역변수가 DOM elements의 contents 완성 단계에서 호출 될 수 없는 것이다.

위 문제를 해결 할려면 DOM Tree 구성 후 해당 function 을 부르면 문제가 해결 된다.

DOM Tree 구성 -> init() 호출 -> DOM elements 구성 식으로 가기때문에
DOM elements 구성시 init()호출에서 설정한 전역변수를 사용할 수 있게 된다.

아래 reference 에 위 문제를 해결 하는 function 을 소개 한다.
reference

document.ready
window.addEventListener('DOMContentLoaded', function(){ // func();});
위 방식은 잘못된 방식이다.

DOMContentLoaded 이벤트는 초기 HTML 문서를 완전히 불러오고 분석했을 때 발생합니다. 스타일 시트, 이미지, 하위 프레임의 로딩은 기다리지 않습니다. ref

그러므로 작동하지 않는다.

onload function 에서 생성한 변수 정보 가져오기

├── code_sharing
│   ├── __init__.py
│   ├── __pycache__
│   │   ├── __init__.cpython-36.pyc
│   │   ├── settings.cpython-36.pyc
│   │   ├── urls.cpython-36.pyc
│   │   └── wsgi.cpython-36.pyc
│   ├── asgi.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── db.sqlite3
├── manage.py
├── python_code_share
│   ├── __init__.py
│   ├── __pycache__
│   │   ├── __init__.cpython-36.pyc
│   │   └── views.cpython-36.pyc
│   ├── admin.py
│   ├── apps.py
│   ├── migrations
│   │   └── __init__.py
│   ├── models.py
│   ├── tests.py
│   └── views.py
└── templates
    ├── __init__.py
    ├── codeshare.css
    ├── codeshare.js
    ├── firepad_test.html
    ├── index.html
    ├── lib
    │   ├── codemirror.css
    │   ├── codemirror.js
    │   ├── docs.css
    │   ├── logo.png
    │   └── matchbrackets.js
    └── python.js

templates/codeshare.js 에서

window.onload = function init()

init() function 에서 생성한 변수를 어떻게 참조 할수 있을까?

IndentationError 발생

commit 번호 4ff086401c985a384f92ecfa5ec628d86eb94448
상황 :
firepad 에서 위 아래 내용 작성후 save_snippet button 누를시

import tensorflow as tf 
import numpy as np
print('hello')

아래와 같이 맨 앞줄이 한칸이 띄어져 python compile 시 IndentationError 에러가 발생

onclick eventhandler 등록

button 에 eventhandler 을 VanillaJS 을 활용해 등록하는 법

시도 1

<button id='btn' onclick='func()'></button>

시도 2

<button id='btn' onclick='func()'></button>
document.getElementById("btn")
.addEventListener("click", function() {
    var text = document.getElementById("text").value;
    var filename = "GFG.txt";  
    download(filename, text);
}, false);

django 에서 css , js 가 적용되지 않는 이슈

html 파일을 직접 열면 header 에 있는 아래 경로 지정 코드가 작동하나
django 을 통해 열면 열리지 않는다.

django 로 실행 했을때 css 파일 경로를 불러오는 방법

<head>
 <link rel="stylesheet", href="./run_firepad.css">
</head>

시도 1 (작동 하지 않음)

절대 경로로 지정하기
상대경로로 되어 있는 부분을 절대 경로로 지정한다.

<link rel="stylesheet", href='/Users/seongjungkim/PycharmProjects/code-sharing/templates/run_firepad.css'>

작동하지 않는다.

시도 2. (작동함)

Django 템플릿 문법을 사용하기

settings.py 에 아래 구문을 추가한다.

STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static'),]

그리고 아래와 같은 폴더 구성을 만든다.
(css, html 파일이 각각 static, templates 에 나뉘어져 있다. )

code_sharing
├── code_sharing
├── db.sqlite3
├── manage.py
├── python_code_share
├── static
│ └── run_firepad.css
└── templates
└── run_firepad.html

css 을 불러올 html 에 아래 코드를 추가한다.

<!DOCTYPE html>
{% load static %}
<!-- See http://www.firepad.io/docs/ for detailed embedding docs. -->

<html>
  <head>
    ...
    <link rel="stylesheet" type="text/css" href="{% static 'run_firepad.css' %}">

javascript

javascript 경우에도 css 와 유사하게 문제점을 해결

static file 에다가 추가할 javascript 파일 생성 및 코드 작성
code_sharing
├── code_sharing
├── db.sqlite3
├── manage.py
├── python_code_share
├── static
│ └── run_firepad.css
│ └── run_firepad.js <-- 추가
└── templates
└── run_firepad.html
<head>tag 에다가 javascript parsing

<head>
<script src = "{% static 'run_firepad.js' %}"> </script>
</head>

javscript. 에 정의된 함수 사용

 <body>
<button onclick="save_snippet()">
 </body>

pai-plznw4me / code-sharing Goto Github PK

code-sharing's People

Contributors

Stargazers

Watchers

code-sharing's Issues

onload function 내에서 생성한 변수 reference 가져오는 법

문제점:

try 1 :

try 2:

try 3

onload function 에서 생성한 변수 정보 가져오기

IndentationError 발생

onclick eventhandler 등록

django 에서 css , js 가 적용되지 않는 이슈

시도 1 (작동 하지 않음)

시도 2. (작동함)

javascript

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent