IT 북마크

A. 개발

1. Developer Roadmaps (https://roadmap.sh/)
2. 웹개발정보(css, javascript, etc..) (https://developer.mozilla.org/ko/)
3. Html (https://www.w3schools.com/)
   • 설명이 별로 없고, 실습이 가능함
4. 자바스크립트 (https://developer.mozilla.org/en-US/docs/Learn/JavaScript)
   • 한글을 제공하고, 설명이 잘되어 있음
5. CSS (https://developer.mozilla.org/en-US/docs/Web/CSS)
6. reactjs (https://reactjs.org) (https://ko.legacy.reactjs.org/)
7. javascript compiler (https://babeljs.io/)
   • 브라우저에서 호환성 높은 코드로 변환하기 위해서 자바스크립트를 컴파일한다.

Z. 문서작업

100. markdown 문서 양식 Basic formating systax Pages
101. Mermaid (https://mermaid.js.org/), syntax
     • text로 그래프를 그릴 수 있다. visual studio code에서 meraid가 모두 지원되는 plugin이 있다.
     • Markdown Preview Mermaid Support Plug-In Link
     • 설치 하면 vscode의 build-in Markdown preview 에서 그래프를 지원된다.(Shift+Ctrl+v) 그래프가 안나오면, vscode를 다시 시작해본다.

::: mermaid
graph TD;
    A([AA])-->|aa|B;
    A-->C;
    subgraph cluster1
    B-->D;
    B-->E;
    end
    subgraph cluster2
    C-->F;
    C-->G;
    end    
 classDef plain fill:#ddd,stroke:#fff,stroke-width:4px,color:#000;
 class B plain;     
:::

Markdown에서 mermaid사용예(VSCODE에서 Markdown Preview Mermaid Support 이용한 경우)

<pre class="mermaid">
graph TD;
    A([AA])-->|aa|B;
    A-->C;
    subgraph cluster1
    B-->D;
    B-->E;
    end
    subgraph cluster2
    C-->F;
    C-->G;
    end    
 classDef plain fill:#ddd,stroke:#fff,stroke-width:4px,color:#000;
 class B plain;
</pre>
<script type="module">import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';</script>

Html에서 mermaid 사용예

102. SVG Edit

• Boxy SVG (https://boxy-svg.com/app) : 그림을 그린 후, Ctrl+A, Ctrl+C 하면 태그가 복사된다.