병원 가세요.
세 줄 요약 그래프, 다이어그램에는 그냥 Graphviz, Mermaid 쓰자. 정확하지 않아도 된다면 svgbob은 정말 좋은 대안이다. 정확도가 필요하다면 그냥 svg 쓰자. 배경 블로그든 뭐든, 정보 전달의 용이성을 위해 글에 시각 자료를 첨부할 때가 많이 있다. 이미지 표, 리스트, 각종 강조 효과 아스키 아트? 정보성 시각 자료의 유형은 이 셋 정도가 있는 듯하다. 각자 장단점이 있다. 이미지 표, 리스트 등 아스키 아트 장점 보기 좋다. 이미지를 만들지 않아도 된다. 데이터를 복사하기 용이하다. 일단 보이기는 한다. 가볍다. 복사가 되긴 한다. 단점 만들고 관리하기 어렵고, 텍스트 복사도 어렵다. 이것도 나름 공 들일 수 있는데, 어차피 이미지가 더 보기 좋다. 하지만 보기도 힘들고, 심지어 ..
vscode-icons 확장에 대해 간단하게 알아보겠습니다. Visual Studio Marketplace에서 확인할 수 있습니다. 이 글은 v11.10.0 버전을 기준으로 작성되었습니다. 세 줄 요약 파일명, 폴더명 등에 따라 적당한 아이콘으로 표시됩니다. vsicons.dontShowNewVersionMessage는 true로 설정! 아이콘 테마 기존에 쓰고 있는 게 따로 없다면 꼭 한 번 써 보세요 기능 커맨드 팔레트에서 Preferences: File Icon Theme을 선택, VSCode Icons를 선택하면 활성화됩니다. 파일 익스플로러에서 파일명, 폴더명에 따라 적당한 아이콘으로 보여줍니다. (지원하는 파일명/폴더명은 각 링크를 참고해 주세요) 여러 종류의 파일이 있을 때 (여러가지 툴의 ..
Code Spell Checker 확장에 대해 간단하게 알아보겠습니다. Visual Studio Marketplace에서 확인할 수 있습니다. 이 글은 v2.1.6 버전을 기준으로 작성되었습니다. 세 줄 요약 코드에서 자동으로 영어 스펠링 검사, 이상한 부분 강조 표시 단어를 직접 사전에 추가할 수 있음, workspace settings에 추가하는 걸 권장 큰 파일을 열었을 때는 많이 느려질 수도 있어요! 기능 코드에서 스펠링이 틀린 부분을 찾아서 강조해줍니다. 오타를 쉽게 발견할 수 있습니다. 저 문제의 Quick Fix에서 비슷한 단어를 보고, 바로 그 단어로 수정할 수 있습니다. 그런데 오타가 아니라면? 예를 들어 프로젝트 이름이 wrold일 수도 있겠죠? 그런 경우에는 그 단어를 사전에 직접 추..
SynthWave '84 테마에 대해 간단하게 알아보겠습니다. Visual Studio Marketplace에서 확인할 수 있습니다. 이 글은 v0.1.11 버전을 기준으로 작성되었습니다. 세 줄 요약 무지개색, 반짝이는 테마! 정말 예뻐요. 제가 쓰는 테마고, 강력 추천합니다 :+1: 코드 반짝이는 건 커맨트 팔레트에서 SynthWave '84: Enable Neon Dreams로 활성화 활성화를 하면, vscode의 내부 파일을 수정해요. 물론 안 해도 쓸 수 있어요 :) 사용법 이 테마는 특별히 설치하면 바로 모두 적용되는 게 아니라 SynthWave '84: Enable Neon Dreams 커맨드를 실행해서 활성화를 해야 합니다. (활성화 후 재시작이 필요합니다.) 활성화와..
Auto Close Tag 확장에 대해 간단하게 알아보겠습니다. Visual Studio Marketplace에서 확인할 수 있습니다. 이 글은 v0.5.14 버전을 기준으로 작성되었습니다. 세 줄 요약 XML 스타일의 여는 태그를 작성하면 닫는 태그를 자동으로 만들어줍니다. HTML이나 XML, JSX같은 코드를 작성할 일이 있다면 추천합니다. 개인적으로 "auto-close-tag.SublimeText3Mode": true 설정 추천 기능 여는 태그를 입력하면 닫는 태그를 자동으로 추가해줍니다. 그렇게 자동으로 닫는 태그가 생기면, 커서는 태그 사이에 놓입니다. Sublime Text 3 스타일로 닫을 수 있다는데, 이건 좀 있다 알아봐요~ 입력할 때만 아니라 원할 때 호출할 수 있도록 커맨드와 단축..
HTML 입문자를 위해 간단히 HTML 문법을 정리해 보겠습니다. 다른 코드를 보고 이게 정상적인 HTML이 맞는지 검증하는 데는 별 관심이 없습니다. 실제로 html, head, body 태그가 생략 가능하다거나 li, dt, dd, p 닫는 태그가 생략 가능하다거나, 혹은 XML같은 네임스페이스라거나 하는... 기타 등등 별 이상한 것도 쓸 수는 있겠지만, 좋은 코드를 짜는 데 있어서 그딴 거 필요 없습니다. HTML 문법을 꿰는 것이 아니라, 좋은 HTML 코드를 짜는 것이 목표입니다. 자세히 들어가지는 않고, 간단히 필요한 문법만 보겠습니다. "굳이 나는 모든 문법을 자세히 알아야겠다!" 하는 분이 계시다면 여기로... 우선 간단한 샘플 페이지를 보겠습니다. 테스트 줄바꿈 테스트 123 123 직..
HTML, CSS를 처음 시작하려고 HTML이나 CSS를 검색하면 관련 검색어나 검색어 자동완성으로 HTML5, CSS3도 나오는 것을 볼 수 있습니다. HTML5와 CSS3은 뭔가요? HTML, CSS와는 다른 건가요? HTML4, CSS3도 있나요? 이런 의문이 들 수 있습니다. 혼란스러울 수 있겠는데요, 간단히 정리해드리겠습니다. HTML5는 HTML이고, CSS3은 CSS입니다. HTML4, CSS2도 있지만, 그런 거 신경 안 써도 됩니다. 안 쓸 거에요... 지금 HTML이라고 하면 당연히 HTML5를, CSS라고 하면 당연히 CSS3을 말하는 게 맞으니 안심하고 잊으셔도 됩니다. 2022/02/08 - 그래서 저도 이번에 카테고리 정리하면서 HTML5 CSS3 이름 그냥 HTML CSS로 바..
첫 vscode 확장 리뷰 글이네요. indent-rainbow 확장을 소개하겠습니다. 테스트로 html 파일을 만들어봤습니다. git 저장소는 여기에서 볼 수 있습니다. 의도적으로 들여쓰기를 많이 하긴 했지만... 실제로 이런 수준의 들여쓰기를 흔히 볼 수 있습니다. 이 코드의 경우에는 ul이나 하나만 지우려고 해도 ul 안에 li 안에 ul 안에 li 안에 ul 안에 li 안에 ... 들여쓰기가 잘 된 상태라도 실수로 엉뚱한 ul을 닫는 태그까지 지워버릴 수도 있습니다. 이럴 때 indent-rainbow 확장이 매우 유용합니다. indent-rainbow는 들여쓰기 수준에 따라 들여쓰기에 무지개 색을 입혀주는 확장입니다. marketplace에서 indent-rainbow 확장을 받아주세요. 들여쓰..
잔디 빼곡히 심기는 글러먹은 것 같으니 Visual Studio Code 확장 리뷰를 올려보려 합니다. 제가 쓰고 있는, 유용하다고 생각하는 확장을 우선 리뷰할 생각이지만 제가 쓰는 확장이 많지도 않고, 제가 쓰는 확장 외에도 좋은 확장이 있을 수 있어 제가 리뷰해주기 원하는 확장이 있다면 언제든 부담없이 요청해주세요! 단, 제가 쓰는 방법을 모르거나, 너무 바쁘거나 별로인 확장은 리뷰를 올리지 않을 수도 있습니다! 아무도... 리뷰 요청을 안 해 주셨는데, 그냥 추천하는 거 있으면 알려주세요ㅜ!
GitHub, GitLab을 따로따로, 둘 다 쓰는 건 영 좋지 않은 생각인 것 같네요. 그래서 물만 줘도 잔디도 심기게! 해 봤습니다. GitHub의 잔디는 commit을, GitLab의 물_(?)_은 push를 세는 것 같은데 각 저장소의 remote에 GitHub과 GitLab을 모두 추가하고 git remote | xargs -L1 git push --all 모든 remote에 push하면 됩니다. ... 근데, 그래도 하기 싫어요ㅠ 2022/02/08 수정 - 결국 안 하기로 했어요. 몇 개 안 되지만 기존 글 읽으면서 하나하나 마크다운으로 수정하는데 티스토리 블로그 마크다운에 버그가 좀 있네요. 뭐 어떻게든 되겠죠!