GaramX study https://www.garamx.com/dokuwiki/ 2026-05-06T13:40:41+00:00 GaramX https://www.garamx.com/dokuwiki/ https://www.garamx.com/dokuwiki/lib/tpl/darkblue/images/favicon.ico text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) study:ace https://www.garamx.com/dokuwiki/doku.php?id=study:ace&rev=1744711518&do=diff Ace Editor Ace Edit text/html 2025-06-23T15:39:57+00:00 Anonymous (anonymous@undisclosed.example.com) study:ai https://www.garamx.com/dokuwiki/doku.php?id=study:ai&rev=1750693197&do=diff 이머전스(Emergence) text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) study:angular https://www.garamx.com/dokuwiki/doku.php?id=study:angular&rev=1744711518&do=diff Angular AngularJS와는 구분되어지며, AJAX, SPA(Single Page Application) MVC시대를 거처 Web Component로 대변되는 FrontEnd Framework의 일종임. Angular.io Mazdik - 러시아 Angular Home 한글입력문제 시작하기 C:\>echo "Angular 시작하기" "Angular 시작하기" C:\>explorer https://nodejs.org C:\>explorer https://www.visualstudio.com C:\>explorer https://angular.io C:\>explorer https://cli.angular.io C:\>node -v v8.11.4 C:\>npm -v 6.4.1 C:\>code -v 1.30.2 61122f88f0bf01e2ac16bdb9e1bc4571755f5bd8 x64 C:\>ng version _ … text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) study:babel https://www.garamx.com/dokuwiki/doku.php?id=study:babel&rev=1744711518&do=diff BABEL Babel과 Webpack을 이용한 ES6 환경 구축 ① Babel과 Webpack을 이용한 ES6 환경 구축 ② 1.package.json { "name": "mama", "version": "0.1.0", "description": "Mama's Library", "main": "mama.js", "keywords": [ "mama", "javascript", "taekgu", "taekgu lim", "library" ], "author": { "name": "Lim, Taekgu", "email": "taekgu@gmail.com", "url": "https://www.taekgu.xyz" }, "scripts": { "build_old": "babel src -w --out-dir lib", "build": "webpack", "start": "n… text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) study:clock https://www.garamx.com/dokuwiki/doku.php?id=study:clock&rev=1744711518&do=diff SVG Clock을 만들어보자 * 참조 SVG Clock SVG를 이용하면 Web페이지에 실시간 시계를 표시할 수 있지 않을까? 가능할 것같은데.. 누군가 만들었겠지? text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) study:css https://www.garamx.com/dokuwiki/doku.php?id=study:css&rev=1744711518&do=diff cascading 적용순서 * !important * style attrribute * id selector * notation : #[id_name] * class selector * syntax : .[class_name] * tag selector * syntax : [tag name] [tag name2] * a:link { color: red; } a:visited { color: purple } text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) study:dropdown https://www.garamx.com/dokuwiki/doku.php?id=study:dropdown&rev=1744711518&do=diff Dropdown Menu Sample <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Test2</title> <style> .dropbtn { background-color: #ea2129; color: white; padding: 16px; font-size: 16px; border: none; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f1f1f1; … text/html 2025-07-05T13:58:18+00:00 Anonymous (anonymous@undisclosed.example.com) study:earth https://www.garamx.com/dokuwiki/doku.php?id=study:earth&rev=1751723898&do=diff 지질시대 컴오실때 석탄 퍼오시면 튀긴 쥐포 100마리 드릴께요. 지질시대구분 고생대 (Paleozoic Era) 캄브리아기 (Cambrian Period, 약 5.4억 ~ 4.85억 년 전) : 생명체의 폭발적인 다양화가 일어난 시기로, 삼엽충 등 다양한 무척추동물이 바다에서 번성했습니다. text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) study:ecma2015 https://www.garamx.com/dokuwiki/doku.php?id=study:ecma2015&rev=1744711518&do=diff ECMA2015(ES6) JavaScript Mama’s book * Standard ECMA-262 최신 ES2022 - 2019 * JavaScript MDN * Vanilla Javascript * 재미있는 2-Way 데이터 바인딩 * DOM 요소를 서로 또는 JavaScript 객체와 바인딩하는 방법을 보여주는 코드와 데모입니다. * rxjs - Angular에서 사용하는 two way data binding 라이브러리 * 웹 프로그램 튜토리얼(정리잘되어있음) * Javascript BootStrap * Javascript 요약집 * Clone Function * regexp예 * Maro Pattern * avgrund - popup jQuery lib * 화살표 함수와 메소드 정의 * edge로 가기 * DevTool열기 `Control+Shift+J` `Command+Option+J`(Mac의 경우)를 눌… text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) study:googlemap https://www.garamx.com/dokuwiki/doku.php?id=study:googlemap&rev=1744711518&do=diff Google Map Content-Security-Policy를 설정해야 됨. CSRF, CORS와는 다른 보안정책임. response.setHeader("Content-Security-Policy", "default-src *; style-src 'self' fonts.googleapis.com 'unsafe-inline'; script-src 'self' www.gstatic.com maps.googleapis.com api64.ipify.org 'unsafe-inline' 'unsafe-eval';frame-ancestors 'self';img-src * data: 'unsafe-inline' blob:; worker-src 'self' blob:;"); text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) study:gradle https://www.garamx.com/dokuwiki/doku.php?id=study:gradle&rev=1744711518&do=diff Gradle Build Tool 현재 제가 알고 있는 것은 빌드 도구라는 것 밖에 없다. 조금 더 자세한 것을 알게되면 공유하겠다. 설치는 <https://gradle.org>를 참조하시기 바랍니다. 빌드명령어는 gradle build 실행명령은 gradle bootRun text/html 2025-07-05T13:44:34+00:00 Anonymous (anonymous@undisclosed.example.com) study:home https://www.garamx.com/dokuwiki/doku.php?id=study:home&rev=1751723074&do=diff 생각해 * 웹 프로그램 튜토리얼(정리잘되어있음) * Map과 VO에 대하여 - 이야기꾼1 * Dictionary * 悟性 * 로보틱스 My Study * Html * SVG Clock을 만들어보자 * GoogleMap * Angular * Python * Ruby * Bootstrap * Datagrid * JUI * jQuery * TypeScript study TypeScript * HTML Tag History * Spring * Spring 시작하기 * myBatis * myBatis * JavaScript ECMA2015(ES6) * Javascript Handbook * Test * Jade * Jade * React * Facebook에서 공개한 Open Source * Tic Tac Toe로 배우기 * Babel + Webpack * No… text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) study:html https://www.garamx.com/dokuwiki/doku.php?id=study:html&rev=1744711518&do=diff HTML5 HTML-Mozilla flexbox로 만들 수 있는 10가지 레이아웃 CSS로 footer를 하단에 고정하는 5가지 방법 CSS Element Queries Html Input HTML5요소 detect resize of Element 의미요소 의미 요소(semantic element) 의미 요소(semantic element)란 그 자체로 의미를 가지고 있는 요소를 가리킵니다. 즉, 요소가 자기 스스로 브라우저와 개발자 모두에게 자신이 사용된 의미를 명확히 전달해 주는 요소를 의미합니다.… text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) study:html2canvas https://www.garamx.com/dokuwiki/doku.php?id=study:html2canvas&rev=1744711518&do=diff html2canvas And jspdf 회사에서 업무를 진행하면서 현재 화면을 pdf로 만들어야하는 일이 있었다. 기존에 html을 pdf로 스프링에서 만드는 업무는 진행을 했었다. 이때는 이전에 포스팅을 했었으니 참고 하시면 좋을 것 같다. (Spring에서 html2pdf를 사용해서 pdf파일 만들기) text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) study:html5 https://www.garamx.com/dokuwiki/doku.php?id=study:html5&rev=1744711518&do=diff HTML5 var list = document.querySelectAll("li"); console.log(toString.call(list); input 추가된 types 입력 type의 유효성검사를 자동으로 해줌. * color * date * datetime * datetime-local * email * month * number * range text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) study:jquery https://www.garamx.com/dokuwiki/doku.php?id=study:jquery&rev=1744711518&do=diff jQuery Excel Download fullCalendar FullCalendar-Example Demo FullCalendar-Example Tree Structure Fancytree - Fancytree이용하려면 * Dynatree - old version DOM ready $(document).ready(function(){ console.log("ready!"); }); //Shorthand for $( document ).ready() $(function(){ console.log("ready!"); }); Avoiding Conflicts with Other Libraries var $j = jQuery.noConflict(); // $j is now an alias to the jQuery function; creating the new alias is optional. text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) study:monaco_editor https://www.garamx.com/dokuwiki/doku.php?id=study:monaco_editor&rev=1744711518&do=diff About Monaco Editor Microsoft Monaco Editor install > npm install css-loader monaco-editor style-loader --save-dev package.json { "name": "helloworld", "dependencies": {}, "devDependencies": { "css-loader": "^1.0.0", "monaco-editor": "^0.14.3", "style-loader": "^0.23.1", "webpack": "^4.20.2", "webpack-cli": "^3.1.2" } } text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) study:mybatis https://www.garamx.com/dokuwiki/doku.php?id=study:mybatis&rev=1744711518&do=diff myBatis DataSource 설정 * Tomcat sample <environment id="development"> <transactionManager type="JDBC"/> <dataSource type="JNDI"> <property name="data_source" value="java:comp/env/jdbc/webDb"/> </dataSource> </environment> text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) study:organization_chart https://www.garamx.com/dokuwiki/doku.php?id=study:organization_chart&rev=1744711518&do=diff Organization Chart * Jquery OrgChart * OrgChart Sample text/html 2025-06-20T09:40:31+00:00 Anonymous (anonymous@undisclosed.example.com) study:robot https://www.garamx.com/dokuwiki/doku.php?id=study:robot&rev=1750412431&do=diff Robot 감속기 1. 감속기 기술 개발 방향 로봇 감속기 기술은 다음과 같은 방향으로 발전하고 있습니다. * 소형화 및 경량화: 로봇의 크기와 무게를 줄이는 것은 로봇의 이동성, 에너지 효율성, 그리고 다양한 환경에서의 활용도를 높이는 데 필수적입니다. 특히 협동 로봇, 서비스 로봇, 휴머노이드 로봇 등 사람과 가까이에서 작동하거나 이동성이 중요한 로봇의 경우, 감속기의 소형화 및 경량화 기술이 더욱 중요해지고 있습니다. 이를 위해 새로운 소재(예: 알루미늄 등 경량 소재) 적용, 구조 최적화, 부품 수 최소화 등의 기술 개발이 활발히 이루어지고 있습니다.… text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) study:script_test https://www.garamx.com/dokuwiki/doku.php?id=study:script_test&rev=1744711518&do=diff Test Unit webpack + karma + jasmine devrafalko / webpack-karma-jasmine 제안하는 package: * ES2015의 자바스크립트를 컴파일하기 위한, specs와 tests를 .js로 묶기 위한 karma-webpack and babel-loader * bash보고서를 위한 karma-mocha-reporter * browser text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) study:typescript https://www.garamx.com/dokuwiki/doku.php?id=study:typescript&rev=1744711518&do=diff TypeScript 기초 IDE는 VS, VSCode 혹은 IntelliJ(요놈을 많이들 사용하고 있는 것같음) * 프로그램설치 * node.js * Directory 생성후 * npm init -y * npm i typescript * Typescript 설치 --> node.js Global에 설치하려면 text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) study:vscode https://www.garamx.com/dokuwiki/doku.php?id=study:vscode&rev=1744711518&do=diff VS Code * JDK설정 java.home를 설정한다. * keyboard shortcuts 편집Key alt+shift+I -->줄단위편집 alt+shift+화살표 --> 컬럼단위 PlugIn Beautify js-beautify for VS Code Launch 사용 Microsoft사의 개발툴이라면 기대되는 것이 빵빵한 디버깅기능이라고 할 수 있다.