A. 개발
- Developer Roadmaps (https://roadmap.sh/)
- 웹개발정보(css, javascript, etc..) (https://developer.mozilla.org/ko/)
- Html (https://www.w3schools.com/)
- 설명이 별로 없고, 실습이 가능함
- 자바스크립트 (https://developer.mozilla.org/en-US/docs/Learn/JavaScript)
- 한글을 제공하고, 설명이 잘되어 있음
- CSS (https://developer.mozilla.org/en-US/docs/Web/CSS)
- reactjs (https://reactjs.org) (https://ko.legacy.reactjs.org/)
- javascript compiler (https://babeljs.io/)
- 브라우저에서 호환성 높은 코드로 변환하기 위해서 자바스크립트를 컴파일한다.
Z. 문서작업
- markdown 문서 양식 Basic formating systax Pages
- 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 사용예
- SVG Edit
- Boxy SVG (https://boxy-svg.com/app) : 그림을 그린 후, Ctrl+A, Ctrl+C 하면 태그가 복사된다.
728x90
'Etc > IT info' 카테고리의 다른 글
CPU Benchmarks 정보 (0) | 2022.04.20 |
---|---|
Mobile App Tools (0) | 2019.10.14 |
VR, AR 관련 (0) | 2019.10.14 |
Site ranking by country (0) | 2019.10.14 |