웹 프로그래밍
- React Lifecylce method 2021.09.25
- Subnet Mask 2019.04.15
- window.onload vs $(document).ready() vs $(window).load() 2018.10.16
- Client Web Server 와 Request Response 2018.09.12
- Cross-origin resource sharing 2018.09.12
- Bootstrap Javascript 기능별 data-attribute 정리 2018.05.24
- Display 속성 2016.12.18
- JavaScript xml 파싱 2016.02.05
- JavaScript xml 사용 2016.01.27
- JavaScript 함수 선언 2016.01.04
React Lifecylce method
2021. 9. 25. 00:07
Subnet Mask
2019. 4. 15. 19:32
반응형
SubnetMask란?
- NetMask를 이용하여 네트워크를 나누는걸 Subnetting이라 하며 네트워크를 합치는게 Supernetting이라 한다.
- Subnet Mask는 IP 주소 체계의 네트워크ID와 호스트ID를 넷마스크를 통해 변경하여 네트워크 영역을 분리하는 것이다.
- Subnet Mask를 이용하여 호스트ID를 네트워크ID로 변환(Subnetting) 가능하고, 반대의 경우(Supernetting) 역시 가능하다.
- Subnet Mask는 IP주소와 동일하게 32bit의 2진수로 되어 있다. /25 숫자는 연속 1bit의 개수를 의미합니다.
- 1과 0은 연속적이야 하며 중간에 섞일 수 없습니다. Ex) 1111111.11011111.11111111.00000000 불가
- /25 는 Subnet Mask가 25bit라는 의미로 255.255.255.128이라는 의미를 가진다. 그러면 호스트ID에 할당할수 있는 범위가 [0~127], [128~255]가 되며 네트워크가 2개로 나눠지게 된다
- /26 은 255.255.255.196가 되며 할당받을 수 있는 호스트는 [0~63], [64~127], [128~191], [192~255]가 되며 네트워크가 4개로 나눠지게 된다.
- 따라서 하나의 bit를 가져올 때 마다 네트워크 크기는 2배로 증가하며 할당할 수 있는 호스트 수는 2로 나눠지게 된다.
|
194.139.10.0/26 |
194.139.10.0/26 |
Network Address |
|
194.139.10.1 ~ 194.139.10.62 |
Host IP |
|
|
194. 139.10.63 |
Broadcast Address |
|
|
194.139.10.64/26 |
194.139.10.64/26 |
Network Address |
|
194.139.10.65 ~ 194.139.10.126 |
Host IP |
|
|
194. 139.10.127 |
Broadcast Address |
|
|
194.139.10.128/26 |
194.139.10.128/26 |
Network Address |
|
194.139.10.129 ~ 194.139.10.190 |
Host IP |
|
|
194. 139.10.191 |
Broadcast Address |
|
|
194.139.10.192/26 |
194.139.10.192/26 |
Network Address |
|
194.139.10.193 ~ 194.139.10.254 |
Host IP |
|
|
194. 139.10.255 |
Broadcast Address |
* 참고 사이트 : http://korean-daeddo.blogspot.com/2016/01/blog-post_26.html
서브넷 마스크와 서브넷팅 계산법
서브넷 마스크를 이용하여 서브넷팅을 하는 이유와 계산법을 알려줍니다.
korean-daeddo.blogspot.com
반응형
window.onload vs $(document).ready() vs $(window).load()
2018. 10. 16. 09:56
반응형
window.onload는 모든 DOM 요소가 로딩된 후 실행
$(document).ready()는 dom이 준뵈 되거나 준비 상태일 때 실행
$(window).load()는 모든 이미지, 텍스트, css, stylesheets와 JS File이 로딩된 후 실행.
$(document).ready 보다 이후 실행.
참고 사이트 : https://www.techiediaries.com/javascript/document-ready-vs-window-onload-vs-window-load/
* 추가로 JQuery에서 $(function(){ code...});와 같이 사용되는 구문은 $(document).ready(fucntion() {code...}) 코드와 동일하다.
반응형
'웹 프로그래밍 > JavaScript' 카테고리의 다른 글
| JavaScript xml 파싱 (0) | 2016.02.05 |
|---|---|
| JavaScript xml 사용 (0) | 2016.01.27 |
| JavaScript 함수 선언 (0) | 2016.01.04 |
Client Web Server 와 Request Response
2018. 9. 12. 17:10
반응형
Client 란?
- 사용자가 사용하는 브라우저
- 항상 Request를 보내는 객체
- Web Server에 request를 전송하여 받은 응답값을 웹 페이지에 표시
Web Server 란?
- Client의 요청에 대한 문서를 제공하는 서버
Request Headers 란?
- 웹 브라우저에서 웹 서버에 전달해주는 데이터
- Request Header로 전달 받은 값으로 웹 서버에 적용
Response Headers 란?
- 웹 서버에서 웹 브라우저로 전달해주는 데이터
정리 된 사이트 : https://developer.mozilla.org/ko/docs/Web/HTTP/Overview
반응형
'웹 프로그래밍 > HTTP' 카테고리의 다른 글
| Cross-origin resource sharing (0) | 2018.09.12 |
|---|
Cross-origin resource sharing
2018. 9. 12. 16:09
반응형
자바스크립트 코딩을 하다 알게된 오류에 대해 서술.
1. A 사이트에서 B 사이트 팝업창을 띄움
2. B 사이트 팝업창 버튼을 클릭시 A사이트의 브라우저 탭에 다른 A사이트 페이지를 띄움.
B 사이트 소스에 자바 스크립트 opener.window.open을 이용하여 2번 기능을 구현할려고 하였다.
하지만 CORS 문제로 인해 opener 접근 자체가 되지 않는다.
Request headers의 Origin과 요청한 웹 서버의 Access-Control-Allow-Origin에 허용 되지 않아 발생!
POST같은 요청을 보낼 때, 요청이 어느 주소에서 시작되었는지를 나타냅니다. 여기서 요청을 보낸 주소와 받는 주소가 다르면 CORS 문제가 발생하기도 합니다.
Cross-origin resource sharing
Cross-origin resource sharing(CORS)는 어느 한 웹 페이지에서 다른 웹 도메인의 웹 사이트 페이지에 자원 접근 요청을 막는다.
특히 Ajax 요청은 same-origin security policy 정책에 의해 기본적으로 접근이 불가능하다.
CORS는 아래의 로직으로 실행된다.
*출처 : Wikipiedia 문서 - https://en.wikipedia.org/wiki/Cross-origin_resource_sharing
CORS와 관련된 Headers
Request headers
- Origin
- Access-Control-Request-Method
- Access-Control-Request-Headers
Response headers
- Access-Control-Allow-Origin
- Access-Control-Allow-Credentials
- Access-Control-Expose-Headers
- Access-Control-Max-Age
- Access-Contorl-Allow-Method
- Access-Control-Allow-Headers
CORS의 해결법
접근할 다른 도메인의 웹 서버의 헤더에 아래 값을 추가하면 된다.
Access-Control-Allow-Origin : 접근을 허용할 웹사이트 도메인
Ex) 네이버에서의 접근을 허용할려면 Access-Control-Allow-Origin : http://www.naver.com
참고 사이트 : https://developer.mozilla.org/ko/docs/Web/HTTP/Access_control_CORS
반응형
'웹 프로그래밍 > HTTP' 카테고리의 다른 글
| Client Web Server 와 Request Response (0) | 2018.09.12 |
|---|
Bootstrap Javascript 기능별 data-attribute 정리
2018. 5. 24. 10:08
반응형
Modals
data-toggle="modal" - Triggers click to open a modal dialog referenced by data-target="element"data-target="target-element" - The element that the modal should open (can be #id or .class)data-dismiss="modal" - Triggers close of the modal on click
Dropdowns
data-toggle="dropdown" - Triggers click to open a drop-downdata-target="#" - Only exists to help when use the dropdown on link to prevent url change
ScrollSpy
data-spy="scroll" - Triggers the SpyScroll on the element (usually goes to <body>data-target="target-element" - The element that the scroll-spy should by applied todata-offset="X" - X represents the number of pixels from top when calculating position of scroll
Togglable tabs
data-toggle="tab" - Triggers click to open the relevant tab referenced by data-target="element"data-toggle="pill" - Same as tab but for pill-stylingdata-target="target-element" - The element that the modal should open (can be #id or .class)
Tooltips
data-toggle="tooltip" - Triggers adding a tooltip to the element
data-animationdata-containerdata-delaydata-htmldata-placementdata-selectordata-templatedata-titledata-triggerdata-viewport
Popovers
data-toggle="popover" - Triggers click to open a popover
data-animationdata-containerdata-contentdata-delaydata-htmldata-placementdata-selectordata-templatedata-titledata-triggerdata-viewport
Alert messages
data-dismiss="alert" - Triggers click to close the alert box created by bootstrap
Buttons
data-loading-text="Loading..." - Show a text while loading (note that it's deprecated)data-toggle="button" - note the singular Makes a button single toggle-button data-toggle="buttons" - note the plural Makes a group of buttons a toggle-buttonsdata-complete-text="Finished" - Text to change on button when the method complete is called
Collapse
data-toggle="collapse" - Triggers click to collapse the referenced elementdata-target="element" - The referenced elementdata-parent="element" - The parent element, used for accordion-style collapsing
Carousel
data-ride="carousel" - Triggers a slide-show (carousel) on the containerdata-target="element" - The referenced carousel element that this element is part ofdata-slide-to="X" - X is the number of the next slidedata-slide="prev|next" - Triggers click to toggle the carousel to the prev|next slidedata-interval="X" - The amount of time to delay between automatically cycling an itemdata-pause="hover" - Pause the cycling on mouse overdata-wrap="true" - Whether the carousel should cycle continuously or have hard stopsdata-keyboard="true" - Whether the carousel should react to keyboard events
Affix
data-spy="affix" - Triggers affix (emulating the sticky positioning effect)data-offset-top="X" - Number of pixels to offset the element from topdata-offset-bottom="X" - Number of pixels to offset the element from bottom
반응형
Display 속성
2016. 12. 18. 18:32
반응형
CSS Display 속성
- 어떤 식으로 요소를 보여줄지 설정하는 property
속성 값
inline : 기본값으로 일반적으로 표시된다. <span> 태그와 유사.
block : 대상 좌우로 줄바꿈 된다. <p> 태그와 유사
inline-block : block 형식으로 된 대상이 inline값 처럼 표시됩니다.
table : <table>태그처럼 표시
table-row : <tr>태그처럼 표시
table-column : <col>태그처럼 표시
tatble-cell : <td>태그처럼 표시
table-header-group : <thead>태그처럼 표시
table-row-group : <tr>태그처럼 표시
inherit : 부모 요소의 표시값을 상속받는다.
반응형
JavaScript xml 파싱
2016. 2. 5. 22:12
반응형
JavaScript에서 xml문서를 파싱하는 방법
DOM파서 이용
DOM파서는 xml파일을 읽을때 문자열로 읽어져서 그 문자열을 xml객체로 만들어줄 때 사용한다.
var parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml"); //text에 xml파일에서 읽은 문자열들이 들어있다.
XML객체에서 데이터를 얻는 방법
xmlObject.documentElement; //xml 객체에서 문서 요소를 얻는다.
xmlObject.documentElement.childNodes // 얻은 문서 요소 내 하위 노드들을 가진다.
위 방법처럼 계속 하위노드들을 파고들어 필요한 내용을 얻을 수 있다.
다른 방법으로는 xml문서를 object나 json 객체로 바꿔서 xml 객체 내 정보들을 이용할 수 있다.
네이버에서 제공해주는 xml문자열 파싱 함수
네이버에서 제공해주는 xml문자열을 Object로 바꿔주는 함수이다. 파라미터로 xml형식으로 된 문자열을 넣어주면 된다.
이 함수는 CDATA로 value가 선언된 xml 형식 문자열에서 사용해야한다.
알아보니 한국 웹 사이트에서 사용되는 xml문서들은 CDATA형식이지만 외국 사이트에서 제공해주는 xml 문서는 제대로 작동 안될 수 도 있다.
var JINDO = new Object();
JINDO.xml2obj = function(xml)
{
var obj = {}, que = [], depth = 0;
// attribute를 해석하기 위한 함수
var parse_attr = function(oobj, str) {
str.replace(/([^=\s]+)\s*=\s*"([^"]*)"/g, function(a0,a1,a2) {
oobj[a1] = a2;
});
}
// 주석, XML선언, 태그 사이 공백 등의 의미 없는 코드를 삭제
xml = xml.replace(/<(\?|\!-)[^>]*>/g,'').replace(/>\s+</g, '><');
// 하위 노드가 없는 태그는 하나의 닫힌 태그로 수정
xml = xml.replace(/<([^!][^ >]+)(\s[^>]*)?><\/\1>/g, '<$1$2 />').replace(/^\s+|\s+$/g, '');
// 함수 객체를 정규 표현식 처리의 인자로 줘서 iterator로 사용
xml = xml.replace(/<\/?([^\!][^ >]*)(\s[^>]*)?>(<\/$1>|<\!\[CDATA\[(?:(.|\s)*?)\]\]>|[^<>]*)/g, function(a0,a1,a2,a3)
{
// IE에서 일치하는 내용이 없으면 undefined로 전달되므로
// 빈 문자열로 변경해 다른 브라우저와의 호환성을 맞춤
if (typeof a1 == 'undefined') a1 = '';
if (typeof a2 == 'undefined') a2 = '';
if (typeof a3 == 'undefined') a3 = '';
if (a0.substr(1,1) == '/') { // 현재 태그가 닫는 태그라면,
// 깊이를 1만큼 감소
depth--;
} else if (que.length == 0) { // 객체 큐에 객체가 없다면,
que[depth] = obj; // 초기의 객체를 큐에 넣고
parse_attr(obj, a2); // attribute를 해석
} else {
var k = a1, o = {}, is_closed = false;
is_closed = (a2.substr(-1,1) == '/');
if (a3.length > 0 || is_closed) { // 텍스트 노드가 있다면
o = a3; // 추가할 객체는 문자열 객체
// CDATA라면 전달받은 그대로 리턴하고
// 그렇지 않다면 decode 해서 리턴
if (o.substr(0,9) == '<![CDATA[' && o.substr(-3,3) == ']]>') o = o.substring(9, o.length-3);
else o = o.replace(/</g, '<').replace(/>/g, '>').replace(/&/g, '&');
}
// 객체를 할당하기 전에 태그 이름이 이미 존재하는지 살펴보고
// 이전에 존재하는 태그라면, 배열로 만든다. 이미 배열이라면 현재의 객체를 배열에 추가
if (typeof que[depth][k] == 'undefined') {
que[depth][k] = o;
} else {
var v = que[depth][k];
if (que[depth][k].constructor != Array) que[depth][k] = [v];
que[depth][k].push(o);
}
// attribute를 해석
parse_attr(o, a2);
if (!is_closed) que[++depth] = o;
}
return '';
});
return obj;
}
---------------------------------------------------------------------------------------------------------------
구글에서 검색해서 찾은 xml 객체를 JSON으로 바꿔주는 함수
이 함수는 xml 문서를 Json객체로 바꿔주는 함수이다.
function xmlToJson(xml)
{
// Create the return object
var obj = {};
if (xml.nodeType == 1) { // element
// do attributes
if (xml.attributes.length > 0) {
obj["@attributes"] = {};
for (var j = 0; j < xml.attributes.length; j++) {
var attribute = xml.attributes.item(j);
obj["@attributes"][attribute.nodeName] = attribute.nodeValue;
}
}
} else if (xml.nodeType == 3) { // text
obj = xml.nodeValue;
}
// do children
if (xml.hasChildNodes()) {
for(var i = 0; i < xml.childNodes.length; i++) {
var item = xml.childNodes.item(i);
var nodeName = item.nodeName;
if (typeof(obj[nodeName]) == "undefined") {
obj[nodeName] = xmlToJson(item);
} else {
if (typeof(obj[nodeName].push) == "undefined") {
var old = obj[nodeName];
obj[nodeName] = [];
obj[nodeName].push(old);
}
obj[nodeName].push(xmlToJson(item));
}
}
}
return obj;
};
반응형
'웹 프로그래밍 > JavaScript' 카테고리의 다른 글
| window.onload vs $(document).ready() vs $(window).load() (0) | 2018.10.16 |
|---|---|
| JavaScript xml 사용 (0) | 2016.01.27 |
| JavaScript 함수 선언 (0) | 2016.01.04 |
JavaScript xml 사용
2016. 1. 27. 15:58
반응형
자바스크립트에서 Api를 사용하기 위해 xml를 사용해야 하는 경우가 있다.
function Xml(){
var xmlHttp = new XMLHttpRequest(); //xml 요청을 받을 변수를 선언해서 만든다.
xmlHttp.open("GET","http://openapi.naver.com/search?key="+NAVER_SEARCH_API_KEY+"&query="+targetSearch+"&target=news&start=1&display=6",false); //open함수로 xml문서를 받아온다.
xmlHttp.send(null);
console.log("XML",xmlHttp); //로그를 찍어 잘 받아왔는지 확인.
}
NAVER_SEARCH_API_KEY는 네이버에서 발급받은 검색 API 인증키이다.
targetSearch는 검색할 검색어이다.
위 방법은 네이버 검색 API에서 xml문서를 받아올 때 사용하는 저가 찾은 방법입니다.
반응형
'웹 프로그래밍 > JavaScript' 카테고리의 다른 글
| window.onload vs $(document).ready() vs $(window).load() (0) | 2018.10.16 |
|---|---|
| JavaScript xml 파싱 (0) | 2016.02.05 |
| JavaScript 함수 선언 (0) | 2016.01.04 |
JavaScript 함수 선언
2016. 1. 4. 20:31
반응형
Java Script에는 여러가지 방법으로 함수를 선언할 수 있다.
1.
function 함수명(파라미터){
실행 코드;
}
2.
var 함수명 = fucntion(파라미터){
실행 코드;
}
3.
var 함수명 = new Function('파라미터','실행코드');
위 세 방법은
함수명('파라미터') 로 실행이 가능하다.
3번째 방법은 문자열로 함수 body를 작성해야되서 불편함으로 잘 사용하지 않는 편이다.
반응형
'웹 프로그래밍 > JavaScript' 카테고리의 다른 글
| window.onload vs $(document).ready() vs $(window).load() (0) | 2018.10.16 |
|---|---|
| JavaScript xml 파싱 (0) | 2016.02.05 |
| JavaScript xml 사용 (0) | 2016.01.27 |