본문 바로가기

웹 프로그래밍96

[웹 보안] express-basic-auth로 접근 차단, 로그인 만들기 Node.js, express를 사용하고 있는데 1. 개발 서버의 robots.txt에 불필요한 접근도 막을 겸 (불필요한 크롤링 방지) 2. 보안도 신경쓸 겸 웹에 접근할 때부터 로그인을 만들어 보기로 했습니다. 기존의 로그인과 다른점은 웹 소스를 다운받기 전에 로그인을 걸어줌으로 조금 더 보안에 좋은 것 같습니다. 위 화면처럼, 다운 받는 요소가 로그인 전에는 아무것도 없습니다. 준비물 1. pm2 : 현재 사용중이라 쓰고 있지만, NODE_ENV 를 설정할 수 있다면 뭐든 괜찮습니다. 2. express-basic-auth express-basic-auth Plug & play basic auth middleware for express www.npmjs.com 구현 시작 1. express-bas.. 2020. 3. 30.
[SQL] QUERY 문 종류 (기본) Querying data SELECT Sorting data ORDER BY Filtering data WHERE SELECT DISTINCT AND OR IN BETWEEN LIKE LIMIT IS NULL Joining tables Table & Column Aliases Joins Inner Join Left Join Right Join Cross Join Self-join 2020. 3. 26.
Linux npm install (CERT_NOT_YET_VALID) npm install 시 CERT_NOT_YET_VALID라는 오류가 뜬다. 리눅스 시간이 안맞기 때문이다. sudo rdate -s time.bora.net 불러오는 중입니다... 명령어를 실행하면 시간이 맞춰진다. 시간이 맞는지 확인하려면 date라는 명령어를 치면 현재 시간이 나온다. 2020. 2. 19.
XML / JSON 비교, 차이 http://tcpschool.com/json/json_intro_xml 코딩교육 티씨피스쿨 4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등 tcpschool.com 위의 URL에서 가져 온 내용입니다. 쉽게 잘 설명해주셔서 저장 및 공유합니다. JSON과 XML의 공통점 둘 다 데이터를 저장하고 전달하기 위해 고안되었습니다. 둘 다 기계뿐만 아니라 사람도 쉽게 읽을 수 있습니다. 둘 다 계층적인 데이터 구조를 가집니다. 둘 다 다양한 프로그래밍 언어에 의해 파싱될 수 있습니다. 둘 다 XMLHttpRequest 객체를 이용하여 서버로부터 데이터를 전송받을 수 있습니다. JSON과 XML의 차이점 JSON은 종료 태그를 사용하지 않습니다. JSON의 구문이 XM.. 2020. 2. 12.
[JS] 웹페이지 로딩 후 JS 실행 웹을 처음 로딩할 때, 모든 소스가 다 다운로드 되지 않은 상태에서 JS를 실행하다보니 애니메이션같은 경우 끊김이 발생하여 보기 좋지 않았다. 그래서 window.onload $(document).ready() 등과 같은 것들을 사용해봤지만 효과가 좋지 않았다. $(window).on('load',function() { // script }) 이것으로 쓰는 것이 제일 효과가 좋았다. 2020. 1. 30.
Google Tag Manager_2 (with.Facebook) 배경 이 내용은 Facebook 픽셀과 Google Tag Manager를 사용하여 웹사이트에 이벤트 트래킹 코드를 추가하는 방법에 대한 설명입니다. 아래는 단계별로 설명해드리겠습니다 방법 페이스북 픽셀로 이동: 페이스북 비즈니스 관리자에 로그인하고 "이벤트 관리기" 섹션으로 이동하여 픽셀을 선택합니다. 이벤트 만들기: 이벤트 관리기에서 원하는 이벤트를 생성합니다. 이벤트의 이름과 유형을 설정합니다. 예를 들어, "추적하려는 이벤트의 이름"과 "PageView"와 같이 이벤트 유형을 선택할 수 있습니다. 픽셀 코드 복사: 이벤트를 만든 후, 생성된 픽셀 코드를 복사합니다. 구글 태그 매니저로 이동: Google Tag Manager에 로그인하고 작업하려는 계정 및 컨테이너를 선택합니다. 새 태그 만들기:.. 2020. 1. 10.
Google tag manager_1 태그 관리자란... 사용자의 행동 추적 도구 컨테이너 : 태그, 트리거, 변수 등 관련 구성의 모음 컨테이너는 Gooogle Ads, Google Analytics, 타사 태그를 포함하여 사이트 또는 앱에서 수동으로 코딩한 다른 모든 태그를 대체할 수 있다. 수동으로 태그를 삽입하면 관리가 어렵다. 웹페이지의 속도가 저하될 수 있다. 태그 매니저를 이용하면 직접 코드를 추가하지 않아도 된다. 태그 삽입 과정이 빨라지며 로딩속도도 빨라진다. 개발자에게 요청하지 않아도 된다. Set up & Deploy Tags Triggers Variables Data layer Variables Events Use 태그 관리자를 이용해 광고 및 리마케팅 태그를 설정한다. 태그 구현 전략 개발 태그 관리자를 구현할 때는 .. 2020. 1. 9.
[웹표준,웹접근성] HTML TAG 웹 접근성에 대해 공부하다보니 평소에 잘 쓰지 않던 태그들이 많다는 것을 알게 되었고, 이에 대해서 한번 리뷰를 해보려고 합니다. 정리하다 보면 좋은 태그들을 발견할 수 있지 않을까 싶습니다. !DOCTYPE 태그 정말 자주 보는 태그인데 정확히 어떤 의미인지 몰라서 알아봤습니다. 'doctype 선언'이라고 보통 읽고, document type 선언을 의미합니다. 페이지가 어떤 HTML버전으로 쓰였는지 설명합니다. HTML 4.01에서는 doctype 선언이 DTD를 조회한다고 합니다. 왜냐하면 HTML 4.01 SGML(tandard Generalized Markup Language) 기반으로 만들어졌기 때문입니다. DTD는 마크업 언어를 명시하고, 그래서 그 브라우저는 콘텐츠들을 정확하게 렌더하는 .. 2019. 12. 19.
[웹표준,웹접근성] 웹 접근성 가이드라인 2.1 리스트 (WCAG 2.1) 웹 접근성 가이드라인 2.1 리스트 (WCAG 2.1) Perceivable 인지할 수 있는(요소) Text Alternatives 텍스트 대체- 1.1.1 Non-text Content 비-텍스트 내용 Time-based Media 시간 기반 미디어 - 1.2.1 Audio-only and Video-only (Prerecorded) 오디오 전용, 비디오 전용(미리 기록) - 1.2.2 Captions (Prerecorded) 캡션,설명(미리 기록) - 1.2.3 Audio Description or Media Alternative (Prerecorded) 오디오 설명, 미디어 대체(미리 기록) - 1.2.4 Captions (Live) 캡션,설명(실시간) - 1.2.5 Audio Description.. 2019. 12. 17.

티스토리툴바