웹 페이지 만들고 배포하기 - HTML5 그동안 살펴본 HTML5 기초 문법만으로 엉성하지만 간단한 웹 페이지를 만들고 웹에 배포(www.netlify.com)까지 해 보았습니다. 처음 만들어본 페이지라 디자인 요소는 거의 사용하지 않았으며, 계산이 필요한 부분은 자바스크립트를 사용하여 결괏값을 페이지에 간단하게 뿌려지게 만들었습니다. HTML의 여러 기능들을 직접 적용하며 각각의 요소들이 어떻게 구현되는지를 살펴보는 게 주 목적입니다. 그러다 보니 페이지 구석구석 부족한 부분이 많지만 그래도 생각한 만큼의 필요 기능을 습득하는데 상당한 도움이 된 계기가 되었습니다. 이번에 작성된 웹 페이지는 프로그래밍 학습의 연장이라 생각하여 웹에 있는 HTML 템플릿 파일을 사용하지 않고 만들어 가독성이 다소 떨어질 수 있는 점을 미리 알려드립니다. ^^ .. 2021. 12. 14. 웹 페이지에서 나타나는 스크립트 난독화하기 - 자바스크립트 자바스크립트와 HTML은 파이썬이나 C/C++과 같이 서버에서 실행되는 게 아니라 사용자의 웹브라우저에서 해석되는 언어이다 보니 사용자가 언제든지 소스코드를 들여다볼 수 있습니다. HTML은 어쩔 수 없이 그대로 노출되더라도 자바스크립트 코드만이라도 그대로 노출되는 것을 막고 싶을 때 사용되는 난독화 툴(사이트)을 소개코자 합니다. 로컬에서 자바 스크립트를 실행 후 크롬 브라우저에서 F12 (개발자 도구) – source로 확인되는 소스코드입니다. 이같이 source가 무분별하게 수집되지 않도록 하기 위해 보호가 필요한 스크립트를 난독화합니다. 우선 난독화 전 스크립트입니다. 난독화 후 스크립트입니다. 난독화 전후 스크립트의 실행 결과는 같지만 후자의 경우 그냥 봐서는 전혀 해석할 수 없는 스크립트로 난.. 2021. 12. 13. 구글 차트 라이브러리를 이용하여 그래프 그리기 - 자바스크립트 자바스크립트로 만들어진 사이트에서 간단한 방법으로 데이터를 시각화할 수 있는 구글 차트를 사용해 봤습니다. 자바스크립트로 데이터를 시각화할 수 있도록 도와주는 라이브러리가 많이 있지만 저는 구글 차트를 이용하여 차트를 그려 봅니다. 단조롭게 보이긴 하지만 기능에 충실한 차트들이 많더군요. 구글 차트에 들어가 자신의 데이터와 적합한 차트를 골라봅니다. 그래프별 사용법, 옵션 등이 타 사이트들 보다 상세하게 문서화되어 있어 스크립트에 바로 적용할 수 있습니다. 저는 candlestick chart를 사이트에 적용했습니다. 차트 모양과 스크립트 예문, 데이터 세팅 구조 등도 상세하게 설명되어 있습니다. 캔들차트 형식에 맞게끔 다중 배열에 데이터를 입력하였으며 y 축의 상한과 하한을 정의하고, y 축 기준선을 .. 2021. 12. 13. HTML form 태그 submit 실행 전 다시 한번 확인 후 데이터 전달하기 JSON 파일 불러올 때가 엊그제 같은데 계획한 작업이 마무리되어 갑니다. 웹페이지를 구성하고 맨 마지막 페이지에 사용자들과 소통할 창구로 사용될 기능인 메시지 발송 폼을 추가하고자 합니다. 사용자로부터의 무분별한 메시지 발송을 걸러 내기 위해 form 태그의 submit 버튼에서 재확인하는 함수를 간단하게 작성해 봅니다. (항상 그렇듯 알고 나면 단순한데 알기 전엔 도통 이해가 안 가는 현상들이 꽤 있습니다. 에러메세지가 없는 에러가 해결하기 더 어렵습니다.) 이름, 이메일, 제목, 내용을 사용자로부터 입력받는 form 태그를 구성합니다.(form 태그를 구성하는 것만으로도 잘못 입력된 양식의 데이터(숫자, 텍스트, 이메일, 전화번호 등)를 걸러낼 수 있습니다.) form 태그로 구성된 데이터를 전송하.. 2021. 12. 13. 이전 1 2 3 다음
