프로그래밍/웹 (51) 썸네일형 리스트형 Django 웹프레임워크 설치 ி django - 파이썬으로 작성된 오픈소스 웹 프레임워크 - MVC(Model-View-Controller) 아키텍처 패턴 사용 - 객체 관계 매핑(ORM) 지원: Python 객체를 사용하여 데이터베이스와 상호 작용 - URL 라우팅: URL 매핑할 수 있는 URL 라우팅 시스템을 제공 ி django 설치 설치 후 프로젝트 생성(mysite) > pip install django > django-admin startproject mysite 마이그레이션 적용 migration은 테이블 및 필드의 생성, 삭제, 변경 등과 같이 데이터베이스에 대한 변경사항을 반영 > python manage.py makemigrations ( 마이그레이션 생성 ) > python manage.py migrate ( .. Fiddler 웹소켓 데이터 캡쳐 * fiddler script1 Handler 클래스 내에 아래 함수를 정의하면 웹 소켓 데이터 확인이 가능하다. static function OnWebSocketMessage(oMsg: WebSocketMessage) { FiddlerApplication.Log.LogString(oMsg.ToString()); } * fiddler script2 Fiddler 로그 탭의 WebSocket 트래픽 프레임은 그룹화되지 않으므로 프레임 간에 탐색이 어렵고 연속 프레임은 디코딩되지 않아 바이너리로 표시되며 트래픽이 많은 경우 Fiddler가 중지될 수 있다. Main 함수 및 Handler 클래스 내에 아래 스크립트를 추가하여 위 문제를 해결한다. static function Main() { // ... //.. node js로 웹소켓(websocket) 통신 구현 ி 웹소켓 * 웹소켓은 ws 혹은 wss(secure 버전) 프로토콜을 이용한다. * HTTP 통신은 요청/응답 시 연결이 바로 끊기지만 ws는 최초 연결 후 계속 연결을 유지한다. * 서버 하나에 여러 클라이언트가 접근해 지속적으로 데이터를 송수신하는 서비스에 유용하다. ex) 채팅, 웹 게임, 주식 차트 등.. 주식/코인 차트는 실시간으로 정보를 보여줘야하기 때문에 클라이언트가 매번 차트 정보를 요청해야하지만 웹소켓 이용 시 서버에 요청할 필요없이 소켓을 통해 새로운 데이터를 전달받는다. * http와 ws는 같은 포트를 공유한다. http://test.com:8001, ws://test.com:8001 * node 서버 소켓 생성 // ********* app.js 파일 // HTTP 서버(expr.. 워드프레스 마케팅 블로그 운영 및 SEO를 위한 필수 플러그인 ி 검색엔진 최적화를 위한 4가지 1~3번 항목은 SEO와 직접적인 연관은 없지만 사이트 로딩 시간이 길어져 이탈하는 방문자를 줄이기 위함 ① 이미지 용량을 줄이고 CDN 활용(Smush 플러그인) ② CSS, js 등을 압축해 트래픽 절감(Better WordPress Minify 플러그인) ③ 브라우저 캐시 적용(W3 Total Cache 또는 WP Super Cache) ④ 안전하지 않은 http 대신 https를 사용하는 것이 구글 SEO 스코어에 좋음 ி SEO 및 블로그 운영을 위한 플러그인 SEO Yoast SEO SEO 향상 플러그인 RankMathYoast와 동일한 플러그인으로 둘 중 하나를 사용하면 됨. (무료 버전에서 제공하는 기능은 RankMath가 많은 편) 게시글 각 페이지에 D.. 웹 브라우저 한글깨짐 해결 브라우저에서 위 글자처럼 한글이 깨지는 경우 개발자도구 콘솔창에서 document.characterSet으로 현재 페이지의 인코딩 설정 상태 확인 다른 인코딩으로 읽으면 한글 깨짐( UTF-8로 작성된 텍스트를 EUC-KR로 읽을 때 등.. ) 아래 세 가지 방법 중 한 가지를 사용하여 한글깨짐 해결 1 크롬 인코딩 강제 설정 Set Character Encoding 설치 https://chrome.google.com/webstore/detail/set-character-encoding/bpojelgakakmcfmjfilgdlmhefphglae?hl=ko 사용법 브라우저 화면 우클릭 > Set Character Encoding > 인코딩 2 개발자도구 인코딩 설정 스크립트 적용 한글이 깨지는 페이지로 이.. Chrome 개발자 도구 단축키 개발자 도구 열기 Ctrl + Shift + I / F12 : 개발자도구 열기 Ctrl + Shift + C : element 선택 상태로 개발자 도구 열기 Ctrl + Shift + J : console 탭 선택 상태로 개발자도구 열기 / 한 번 더 누르면 개발자도구 하나 더 열기 공통 패널 단축키 F1 / ? : General Settings 다이얼로그 열기 Ctrl + ] : 다음 패널 Ctrl + [ : 이전 패널 Ctrl + Shift + E : 선택된 소스코드 실행(실행시킬 소스코드를 마우스 드래그로 선택, 실행 시 Console 패널에 표시) Ctrl + Shift + F : 전역 검색( 모든 파일에서 일치하는 텍스트 검색 ) Ctrl + O 파일 명으로 찾기 Ctlr + 1 ~ Ctrl +.. 캐시 관리 서비스 워커(Service Worker) 생성 ி worker Web worker 스크립트를 백그라운드에서 실행할 수 있는 쓰레드를 생성하는 기술 웹 워커는 UI 쓰레드와 별개로 존재하므로 DOM에 접근 불가 그러나 자체적인 Global scope에서 Window scope와 똑같은 기능을 제공하기 때문에 지원 가능 Shared worker 윈도우 창이나 iframe, 워커등의 다른 브라우징 컨텍스트에서도 접근 가능 특정 사이트에 로그인 후 새로운 탭을 띄워 중복 로그인, 중간에 어떤 탭에서 로그아웃 했으면 Shared worker에서 자신을 참조하고 있는 모든 브라우저 컨텍스트에 문자를 보내 다른 탭에 있는 로그인 된 사이트도 로그아웃 Service worker 다른 문서나 다른 소스로부터 발생되는 이벤트에 대응하기 위한 이벤트 드리븐 방식 지속적.. 자바스크립트 async / await async & await 콜백 지옥처럼, 프로미스 체이닝도 반복되면 코드 가독성 저하 비동기 처리를 위한 async/await은 Promise를 간편하게 동기적으로 실행하는 것처럼 보이게 만드는 API 새로 추가된 문법이 아닌 기존에 존재하는 Promise를 간단 조작하기 위한 syntax sugar async 키워드가 붙은 함수는 항상 Promise를 반환 async 기존 방식(Promise) // 프로미스 사용 시 반드시 resolve와 reject를 호출해야 함 function fetchUser() { return new Promise((resolve, reject) => { // return `ellie`; // 프로미스 pending 상태 resolve(`ellie`); // 프로미스 fulfi.. 1 2 3 4 ··· 7
