웹개발 관련 (6) 썸네일형 리스트형 Creating a Simple CKEditor4 Plugin 기능 요구사항 1. 글상자 영역의 배경과 윤곽선 색상을 변경할 수 있다. 2. 글상자 영역의 윤곽선 두께를 변경할 수 있다. 플러그인 파일 먼저 CKEditor4 설치 후 plugins 디렉토리안에 bgstyle폴더를 생성한다. ckeditor root/ plugins/ bgstyle/ icons/ bgstyle.png dialogs/ bgstyle.js plugin.js 플러그인 소스 코드 CKEDITOR.plugins.add('bgstyle', { icons: 'bgstyle', init: function( editor ) { CKEDITOR.dialog.add('bgstyleDialog', this.path + 'dialogs/bgstyle.js') editor.addCommand('bgstyle'.. CKEditor4를 이용한 html 메타데이터 캔버스 구현 구현 방향 글상자안에서 작성이 끝나면 캔버스 이미지를 만들어서 썸네일 역할을 하려고한다. 구현 // Drawing DOM Objects into a canvas function draw(target) { if (target.attributes[2] || target.attributes[3]) target.setAttribute("width", 0) target.setAttribute("height", 0) const canvas = target; const dpr = window.devicePixelRatio; let ctx = canvas.getContext('2d'); if (!ctx) return const htmlMeta = CKEDITOR.instances.introduction.getData(.. 한글 웹 폰트 경량화해보기 ttf/eot/woff/woff2 각각의 브라우저들은 모두 폰트파일 지원범위가 다르기 때문에 4종류가 있다. 용량은 ttf > eot > woff > woff2 으로 ttf가 가장 크고 woff2가 가장 작다. 폰트 형식에 따른 브라우저 지원 범위는 다음과 같다. https://products.aspose.app/font/ko/applications 무료로 글꼴 변환해주는 사이트이다. Visual Studio Cod Extension - Better Comments 코딩을 하면 주석을 달게 될 일이 많은데 좀 더 직관적으로 달고 싶은 아쉬움이 있었다. 그래서 알게된 Better Comments!! 주석의 내용을 카테고라이징 할 수 있다. * 내용 설명 ! 주의 사항 ? 궁금한 사항 TODO 해야 할 일 여러 사람과 같이 코드를 작성한다면 색상별 의미에 대해서 먼저 정의하고 가도 괜찮을 것 같다. (커스텀이 가능하다고 한다.) 1. 확장탭을 선택한다. 2. better-comments 항목을 선택한다. 3. Tags > setting.json을 클릭한다. 참고: https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments&ssr=false#overview Web Server와 WAS(Web Application Server) 및 Apache Http Server 설치 Apache HTTP Server를 이용해서 같은 서브넷의 다른 기기로 내 컴퓨터 웹 서버에 접속 할 수 있도록 찾아보던 중 Web Server와 WAS의 개념이 모호해서 정리가 필요했다. Web Server는 HTTP 요청을 받아 정적인 컨텐츠(.html .jpeg .css etc)를 제공하는 컴퓨터 프로그램 ⇒ 클라이언트(웹 브라우저, 웹 크롤러)의 요청을 서비스하는 기능 예) 클라이언트에 이미지 파일을 보내는 과정 클라이언트는 HTML 문서를 먼저 받고 그에 맞게 필요한 이미지 파일들을 다시 서버로 요청하면 그때서야 이미지 파일을 받아온다. Web Server를 통해 정적인 파일들을 Application Server까지 가지 않고 앞단에서 빠르게 보내줄 수 있다. 그래서 웹 서버가 필요한 이유는?!.. CSR(Client Side Rendering)과 SSR(Server Side Rendering)의 차이 두 렌더링 방식 중 각 어플리케이션의 구조 또는 서비스 페이지의 특징에 따라 적절히 사용하는 것이 중요한 것같아 이번 기회에 정리를 했다. Client Side Rendering 사이트에 접속 -> 브라우저가 서버로부터 인덱스 파일을 받아옴 -> 받아온 인덱스 파일은 비어 있기에 사용자에게는 아무 화면도 보여지지 않음 -> 모든 로직이 담긴 자바스크립트를 요청 -> 동적으로 HTML을 생성할 수 있는 웹 어플리션 로직이 담긴 JS 파일을 받아옴 -> 사용자는 웹사이트가 보여짐 이 기술을 활용한 방식으로 SPA가 있다. 페이지가 딱 한개 존재하고 사용자 어떤 행위를 취했을 때 다른 페이지를 불러오지 않고 자바스크립트를 이용해 사용자가 보고 있는 부분을 DOM의 조작을 통해 변경한다. server side .. 이전 1 다음
