화면을 수정했는데, 클라이언트의 브라우져에 캐시가 남아서 이전 화면이 나오는 경우가 있다. 직접 브라우져 설정 들어가서 캐시를 지워달라고 요청 할 수도 있지만, 그게 한두번이 아니게 되니 코드에서 캐시를 지울수 없는지 찾아보았다. HTML 메타태그 이용하기 JSP, Java 사용시 자바 코드 지만 html과 같음. response.setHeader( "Pragma", "no-cache" ); response.setDateHeader( "Expires", -1 ); response.setHeader( "Cache-Control", "no-cache" ); JS, CSS 파일 캐시 사용 방지 js나 css등 정적파일도 종종 변경을 해도 캐시문제로 적용이 되지 않는 경우가 많다. 그럴 경우 파일의 url 뒤에..

들어가며: 모든 사이트에 하나씩은 있는 팝업을 구현하는 방법에 대해서 설명을 하려고 합니다. 팝업을 열어주는 방법은 매우 간단하게 구현이 가능하지만, 오늘 하루 열지 않기, 하루 동안 열지 않기를 구현하기 위해서는 쿠키(cookie)를 사용해야 합니다. 쿠키는 간단하게 말하면, 하이퍼 텍스트의 기록서(HTTP)의 일종으로서 인터넷 사용자가 어떠한 웹사이트를 방문할 경우 그 사이트가 사용하고 있는 서버에서 인터넷 사용자의 컴퓨터에 설치하는 작은 기록 정보 파일을 말합니다. 사용자의 접속을 기록으로 남길 수 있고, 사용자가 방문한 시간으로부터 30초, 10분 등 다양하게 쿠키를 저장하고, 만료(expire)를 시킬 수 있습니다. 만료를 시킨다는 내용은 그 시간 이후에 이 쿠키파일을 없애겠다 라는 말입니다. ..

들어가며 웹페이지를 구현하다 보면 데이터를 비동기 식으로 호출할때가 있습니다. 데이터를 요청하는 호출 이후에 페이지는 로딩은 됬는데, 데이터가 채워지지 않는 경우가 있습니다. 그렇기 때문에 사용자들에게 데이터를 호출하고 있는 상태입니다. 라는 페이지 로더를 구현을 해야합니다. 아래와 같은 그림 회전을하고, 데이터가 전부 로딩이 완료가 되면 로더는 화면에서 사라지고, 내가 사용자애들에게 보여주고자 하는 페이지를 보여주면 됩니다. 아래 예제는 html파일, css파일, 그리고 javascript파일을 작성했습니다. 참고해서 사용하고 싶은 곳에 로더를 구현해보세요. 로딩 페이지 (loading-page.html) 아래는 로딩 페이지를 구현한 html파일입니다. div 태그로 loader, container를 ..

들어가며 웹 페이지를 생각하면 무엇이 제일 먼저 생각 나는가? 저는 html이 생각이 납니다. 그렇기 때문에 이번 포스팅에서는 .html의 파일을 읽어 client에게 전달하는 FileSystem을 이용한 Webserver에 대해서 정리해 볼까 합니다. 프로젝트 시작하기 프로젝트 ROOT/docRoot/ 아래 index.html, next.html의 두 파일을 생성하면 됩니다. 이 파일은 클라이언트(브라우저)에서 요청하면 응답으로 보내줄 두개의 화면입니다. 아래 index.html의 페이지를 먼저 보여주고, 해당 페이지에서 Go Next를 누르면 next.html의 페이지로 이동하는 예제입니다. 소스코드 index.html과 next.html은 [오른쪽 마우스 클릭] --> [페이지 소스보기]를 통해서 ..

파이썬(Python) beautifulSoup 사용해서 html page 파싱(parsing) 데이터 scrap을 할때 많이 사용하는 beautifulsoup을 이용해서 html page를 parsing 하는 코드 (아래 참고) 코드 간단 설명 특정 tag의 값(text)을 가져오기 html page의 값을 가져온 이후에 soup.p의 tag의 값을 가져온다 p의 tag를 갖고 있는 text를 가지고 와서 words로 split p의 id로 가져오기 모든 paragraph의 리스트를 가져오기 p의 tag 중 important class의 값을 갖고 있는 paragraphs 가져오기 span의 요소 안에 포함된 모든 div를 가져오기 코드 from bs4 import BeautifulSoup import ..

파이썬에서 response를 보내는데, utf8이아닌, 유니코드 그대로 보내지고, 화면에 출력되는 문제가 발생했다. 정말 파이썬 하면서 encoding 문제는 진짜… 항상 마주할때마다 이렇게 해서 고쳐야지~라고 생각하고 고쳤을때 바로 안되면, 그냥 당황스럽기 짝이없음. { "code": 100, "data": { "\uc548\ub155": 2, "\ud558\uc774\ub8e8": 2 }, "mesg": "success", "method": "get", "target": "/api/test", "time": 0.001 } 아무래 utf8로 encoding을 해도 결과는 같음, postman에서 json으로 보면 아주 예쁘게 보여서 content-type을 appliction/json으로 보내면 되나 ..

웹페이지는 HTML로 작성이 되어있고, HTML은 element와 attribute로 구성되어 있다. HTML에서 ‘id가 foo인 요소에 포함되어 있는 텍스트를 가져와’라는 규칙으로 필요한 정보를 추출할 수 있다. 하지만 실제로 제대로 된 형태를 갖추지 못했기 때문에 HTML의 요소를 tree 형태로 변환해서 쉽게 접근이 가능하게 해주는 BeautifulSoup라이브러리를 사용하면 쉽다. 파이썬에서 HTML을 파싱하기 위해서는 BeautifulSoup, requests, html5lib이 필요하다. 파이썬에서 기본적으로 제공하는 라이브러리인 HTML parser는 완벽한 HTML 구조가 아니면 제대로 작동하지 않기 때문에 html5lib이 필요하다. $ pip install beautifulsoup4 ..

JS를 이용한 HTML include HTML에서 보통 머릿말, 꼬리말, 메뉴바 등이 흔하게 중복된다.(서버사이드언어나 동적언어를 사용하지 않는다면 메뉴가 바뀔때마다 전부다 수동으로 바꾸어 주어야한다.) 이러한 문제를 해결하는 방법에는 여러가지가 있겠지만 AJAX를 이용해서 해결해보자 1. 사용법 에 를 넣어준다. 에 를 넣고 를 호출해준다. 여기서는 navbar를 관리하고 있다. 2. includeHTML.js 코드 function includeHTML() { var z, i, elmnt, file, xhttp; z = document.getElementsByTagName("*"); for (i = 0; i < z.length; i++) { elmnt = z[i]; file = elmnt.getAttr..

자바스크립트(JavaScript)를 들어가며 1. 자바스크립트란? 약칭 js라고 하며 객체 기반의 스크립트 프로그래밍 언어이다. 주로 웹브라우저(스크립트엔진-인터프리터가 내장되어 있다)에서 사용한다. CSS가 디자인을 담당한다면 js는 클라이언트 단에서 웹페이지가 동적으로 랜더링하는 것을 담당해준다. 최근에는 node.js로 서버사이드부분에도 상당히 유명해졌다. 뿐만 아니라 앵귤러, 리액트, 리액트 네이티브는 웹과 앱개발에서 매우 상승세타고있다.. 주변에서 하도 리액트리액트거려서 리액트공부해야하나 싶을정도다ㅋㅋㅋ 결국 할거지만 2. 자바와는 관계가 있나요? 자바스크립트는 자바와 이름이 비슷해서 착각을 할 수 있다. 자바와 문법, 구문이 유사한 점도 있지만, 이는 C언어를 조상으로 물려받았기 때문이며, 두..

HTML PART1 코드카데미 Learn HTML & CSS: Part I 를 소개한다. HTML, CSS는 웹의 기초이니 분명히 잘알아야 한다. HTML이야 태그 몇개없으니 금방 알게되지만 CSS같은 경우 레퍼런스문서나 잘 정리된 표들고 찾아 쓰는게 일반적이다ㅋㅋ 그래서 쓰면서도 (특히 비슷한 속성값일때) 이게 뭔지 뭔차이가 있는지 모를때가 있다. 코드카데미를 풀어가면서 조금이라도 햇갈릴 여지가 있는 것들을 정리해보았다. 아그리고 이거하면 영어독해 강제로 하게된다 사실 문제푸는것보다 독해하는게 더걸리는기분 2. HTML기본 a태그: target="_blank" 를 쓰면 새 탭으로 연다 W3C 표준: 들여쓰기는 스페이스 2칸 와 태그의 차이점은 눈에 보이는 효과는 같으나 시각장애인에게 음성으로 읽어줄 때..