구디아카데미 TIL-LOG[Today I learned-LOG] 벨로그 작성가이드(+마크다운 작성법)

구디아카데미·2023년 2월 27일
0
post-thumbnail

✅ Today I learned

🔻TIL?

TIL은 'Today I Learned(오늘 내가 배운 것)의 약자입니다. 그날그날 공부한 것을 정리하는 의미이지만, 보통 개발자가 소스코드 등을 기록하며 회고하고 정리하는 의미로 많이 쓰입니다. 개발을 공부하는 기록하는 학습 블로그가 취업 후 실무에서 활용하기 위한 코드를 기록하는 '기술 블로그'까지 연장됩니다.

🔻학습활용

  • 프로그래밍은 강의 > 훈련(소스코드 복습, 문제풀이)가 함께 진행되어야 실력이 늘 수 있습니다. 그런 점에서 학습 기록은 교육 받은 내용을 스스로 훈련할 수 있는 기회를 제공합니다.
  • 학습 내용은 휘발되기 마련입니다. 기록하면서 배운 내용을 복습하고, 기억을 상기시킬 수 있습니다.
  • 학습 내용이 누적되면 양이 많아지는데, 나중에 키워드를 통해 다시 찾아 보는데 편리합니다.
  • 자신의 실력과 상태를 확인할 수 있는 메타인지를 강화할 수 있어요.

🔻취업활용도

  • 취업시 포트폴리오, 이력서 등에 보유기술 작성시 도움이 될 수 있습니다.
  • 자기소개서에 기록, 정리, 꾸준함을 강점으로 어필할 수 있습니다.

🔻실무활용도

  • 실무에서 기존의 코드를 다시 활용하는 경우가 많은데, 특정 기능을 수행하는 코드를 인덱스 형식의 문서를 통해 기록하면 코드 리뷰 후 업무에 활용할 수 있습니다.
  • 개발 중에 생긴 문제들, 에러와 해결방법에 대한 내용을 정리해두면, 굉장히 유용합니다.
  • 잘 개발된 사이트의 샘플 소스를 정리하는 것도 활용도가 높습니다.
  • 공부가 계속적으로 필요하기 때문에 매번 새로운 기술을 습득하는데, 꾸준히 기록하게 되면 소중한 기술적 자산이 됩니다.
  • 고급 기술들을 다루게 될 때 기록해두면 이직할 때 도움이 많이 됩니다.


출처: https://velog.io/@_dodo_hee


🔻추천플랫폼

  • 벨로그, 티스토리, 네이버: 학습 기록이 목적인 학습 초반의 개발자 지망생들에게는 기록하기 쉽고, 시간이 절약될 수 있는 플랫폼을 추천합니다.
  • 깃허브, 노션: 코딩에 익숙해지거나, 취업 이후의 실무 개발자들에게는 프로젝트와 소스코드, 커밋 등을 효율적으로 할 수 있는 플랫폼 등이 좋습니다.
  • 각자 성향에 제일 잘 맞는 플랫폼을 선택하시는게 제일 좋겠지요!

🔻작성 방법

  • TIL-LOG에는 정해진 형식이 없습니다. 자신의 방법에 맞게 자유로운 형식으로 흐름과 주제들을 기록해나가면 됩니다.
  • 그래도 최소한의 가이드를 권장하자면, 학습내용, 코드, 잘한 점, 개선 점 등의 흐름으로 기록하면 좋습니다.
  • 하루에 30분 이내로 마치는 것이 좋습니다.
  • 본래 학습에 방해되지 않는 선에서 하는 것이 중요합니다. 형식이나 디자인, 요소 등을 꾸미는데 시간을 많이 할애 하지 않도록 합니다.
  • 무엇보다도 꾸준함이 중요합니다. 적은 양이더라도 매일 하는 습관을 들이면 좋은 자산이 될 것입니다.
  • 아래 여러 플랫폼에서의 사례들을 링크로 올려두었으니, 참고하시면서 자신만의 방법을 찾아가시기를 바랍니다.

티스토리 사례
네이버 사례

✅ 벨로그

벨로그는 마크다운을 이용해 소스코드 기록이 가능한 블로그 플랫폼입니다. 마크다운을 지원하는 플랫폼은 많이 있지만, 벨로그는 특히 정리와 가독성 측면에서 뛰어나기 때문에 개발자들이 가장 많이 활용하는 블로그 플랫폼입니다. 네이버 블로그와 같이 클릭으로 가능한 에디터 기능이 많지 않아서 불편할 것 같지만, 키보드로 업적을 이루는 개발자들들 사이에서는 편하고 효율적이다라는 평가가 대부분입니다. 유망한 개발자가 꿈이라면, 벨로그를 통한 기록이 큰 의미가 있을 것입니다. 벨로그를 이용하는 분들중 정리가 잘 된 사례 올려두었으니 참고바랍니다.

벨로그 사례1
벨로그 사례2

✅ 마크다운이란?

마크다운(markdown)은 일반 텍스트 문서의 양식을 편집하는 문법입니다. README 파일이나 온라인 문서, 혹은 일반 텍스트 편집기로 문서 양식을 편집할 때 쓰입니다. 마크다운을 이용해 작성된 문서는 쉽게 HTML 등 다른 문서형태로 변환이 가능합니다. [위키백과]

🔻특징

  • 작성법이 간단하다.
  • 가독성이 좋다.
  • 웹상에서 사용할 수 있는 글쓰기 도구다.
  • 개발자들이 블로그를 할 때 최적화된 도구이다.
  • html을 완전하게 대체하지는 못한다.

🔻작성시 화면

  • 작성하면서 변환된 결과를 바로 볼 수 있어서 편합니다.

🔻기초문법

소개 드릴 내용은 마크다운 기초 문법입니다.

  • 제목 넣기
  • 줄바꿈
  • 구분선
  • 숫자 목록
  • 숫자 없는 목록
  • 글자 강조
  • 인라인 코드
  • 코드 블럭
  • 코드 하이라이트

이 밑에는 하면 풍부해지지만, 안해도 문제 없는 문법들입니다.

  • 이모지
  • 링크
  • 이미지
  • 체크박스
  • 글자색상
  • 테이블(표)
  • 기호표시

🔻참고·유의사항

  • 처음 시작하는 분들이 쉽게 시작할 수 있도록 기초문법과 몇개의 추가적인 방법만 소개합니다. 기초문법만으로도 블로그를 알차게 쓸 수 있습니다.
  • 더 다양하고 풍부한 글을 위한 추가적인 문법들은 익숙해지시면 시도해보시는 것을 권장드립니다. 추가 문법은 추후 업로드할 예정입니다.
  • 학습기록은 많은 도움이 되지만, 블로그를 쓰는 일이 학습보다 커지지 않아야한다는 것입니다.
  • 매일 꾸준히, 조금씩 하다보면 크게 쌓여서 소중한 자산이 될 것입니다. 파이팅!


✅ 기초 문법

🔻 제목(header) 넣기

  • #+스페이스 뒤에 텍스트를 넣으면 크기 순서대로 제목이 생성됩니다. ▼

  • 상단에 아이콘으로도 가능합니다. 하지만 익숙해지면 키보드를 쓰는게 훨씬 편하실거에요. ▼

  • 또 다른 방법으로, 문장을 쓴 후에 밑에 = 또는 -를 입력하면 H1 또는 H2로 바뀝니다.▼

💬입력

구디아카데미 개발자 양성과정(H1)
 =
구디아카데미 개발자 양성과정
 -

✅결과

구디아카데미 개발자 양성과정(H1)

구디아카데미 개발자 양성과정



  • 목차기능: 제목을 생성하고 글을 업로드하면 오른쪽에 목차가 생기는데요, 원하는 위치를 클릭하면 이동이 가능합니다. 별도의 코드를 넣어야 되는 다른 플랫폼에 비해 벨로그에서는 바로 적용이 되는 유용한 기능! ▼

🔻 인용문(Blockquotes)

  • 인용된 내용을 따로 묶어두고싶다면 > 를 입력합니다.▼
  • 인용문 안에 중첩해서 넣을 수 있습니다.▼

🔻 줄 바꾸기(<BR>)

  • 텍스트 끝에 <BR>를 넣으면 엔터와 같은 기능을 합니다. "엔터로 하면 되는거 아냐?"라고 할 수 있지만, 엔터로는 한칸 이상 줄바꿈이 되지 않아서 두줄 이상 띄우고 싶을 때 사용합니다.▼

🔻 구분선

  • - , * , _ 이 3개의 기호를 3번 연속 작성하면 구분선이 생깁니다.

💬입력

--- : 대시
*** : 별
___ : 언더바

✅결과





🔻 숫자 목록

  • 숫자+마침표+스페이스 를 입력하면 숫자 목록을 만들 수 있습니다.
  • 그 상태에서 엔터를 누르면 하위 목록이 생깁니다.

💬입력

1. 아침
빵+우유
2. 점심
김치찌개
3. 저녁
삼겹살+소주

✅결과

  1. 아침
    빵+우유
  2. 점심
    김치찌개
  3. 저녁
    삼겹살+소주

🔻 숫자 없는 목록

  1. -, *, + +스페이스 후에 텍스트를 입력하면 목록이 생성되고,
  2. 엔터로 줄을 바꿔 스페이스 2번 후 -+스페이스를 입력하면 하위 목록이 생성됩니다.

💬입력

- 백엔드      
  - 자바
  - 스프링


- 프론트엔드
  - 자바스크립트
  - 제이쿼리

✅결과

  • 백엔드

    • 자바
    • 스프링
  • 프론트엔드

    • 자바스크립트

    • 제이쿼리


🔻 글자 강조

  • -, *, ~를 앞뒤로 입력해서 텍스트에 굵기, 기울이기, 취소선을 만들 수 있어요.
  • 아이콘으로도 가능합니다.

💬입력

_기울이기_
*기울이기*

__굵게__
**굵게**

___굵게 기울이기___
***굵게 기울이기***

~~취소선~~

✅결과

기울이기
기울이기

굵게
굵게

굵게 기울이기
굵게 기울이기

취소선


🔻 인라인코드

  • 백틱(`)을 사용해서 코드를 강조하는 인라인 코드를 작성할 수 있어요.

💬입력

`코드를 강조할 때 표현할 수 있습니다`

✅결과

코드를 강조할 때 표현할 수 있습니다


🔻 코드블럭(Tab, 백틱)

  1. Tab을 누르면 코드블럭으로 작성가능합니다.
    엔터를 한 번 치면 여러줄을 입력할 수 있고요.
    다시 일반 텍스트로 가고싶으면 엔터를 두번!
    Tab을 누르면
    여러줄의 입력하는
    코드블럭이 이렇게 생깁니다
  1. 다른 방법으로는, 백틱(`)을 코드 시작과 끝에 세 번 연속 넣으면 여러줄의 코드블럭을 만들 수 있습니다.

💬입력

```
시작과 끝에 입력하면
코드 블럭이 생깁니다
이렇게요
```

✅결과

시작과 끝에 입력하면
코드 블럭이 생깁니다
이렇게요

🔻 코드 하이라이트

  • 코드블럭 시작점에 사용 언어를 선언하면 코드 하이라이트가 가능합니다.

💬입력

```java
public class Hello World{
public void main(String[] args) {
System.out.println("Hello World");
}
}
```

✅결과

public class Hello World{
	public void main(String[] args) {
    	System.out.println("Hello World");
    }
}


✅ 안해도 되지만 하면 더 풍부해지는 추가 문법

🔻 이모지👨‍💻👩‍💻👨‍🏫👩‍🏫💚

  • 트위터 이모지 링크에서 복사+붙여넣기로 이모지를 넣을 수 있습니다.
  • 또는 Windows: 윈도우키 + 마침표(.)
  • Mac: Command + Control + Space

🔻 링크

  1. 인라인 링크 [제목] + (링크)
  2. URL 링크

💬입력

인라인 링크
[구디아카데미](http://gdu.co.kr/)

URL 링크
https://gdu.co.kr/

✅결과

인라인 링크
구디아카데미

URL 링크
https://gdu.co.kr/


🔻 이미지(10mb이하)

  1. 가장 쉬운 건 역시 아이콘 클릭입니다. 보통의 이미지 첨부처럼 사용합니다.

  2. 이미지에 링크를 삽입할 수 있습니다.
    [![이미지 설명](이미지 링크)](url 주소"링크 이름")

💬입력

[![](https://velog.velcdn.com/images/jhjin/post/f4c7d8df-7630-4c72-8301-6e645e3d4f06/image.png)](https://gdu.co.kr "구디아카데미홈페이지")

✅결과


🔻 체크박스

  • 목록만들기(-, *, +) 뒤에 스페이스[]를 넣습니다.
  • []안에 띄어쓰기를 하면 빈 체크박스, x를 넣으면 체크표시된 체크박스가 생깁니다.
  • 업로드 이후에 마우스로 클릭하면 체크/체크 해제가 가능합니다.

💬입력

- [ ] 아무거나 하기
- [x] 아무것도 안하기

✅결과

  • 아무거나 하기

  • 아무것도 안하기


🔻 글자 색상

  • HTML 태그로 색상 변경이 가능해요.
  • 색상이름, HTML rgb색상코드로 색을 정할 수 있습니다.
    rgb색상코드 링크

💬입력

<span style="color:blue">blue</span>
<span style="color:#1e90ff">1E90FF</span>
<span style="color:rgb(30, 144, 255)">rgb(30,144,255)</span>

✅결과

blue
1E90FF
rgb(30,144,255)

🔻 테이블(표)

  • | : 행 구분
  • - : 열 구분
  • : : 정렬(오른쪽, 왼쪽, 가운데)

💬입력
|과정이름|날짜|강사|
|:----------|:----------:|----------:|
| 공공데이터 |2023.02.27 |유병승|
| K-Digital Training | 2023.03.27 |박성환 |


✅결과

과정이름날짜강사
공공데이터2023.02.27유병승
K-Digital Training2023.03.27박성환

🔻 기호표시(backlash Escapes)

  • 마크다운 문법 기호를 변형되지 않은 형태로 출력하고 싶으면, 백슬래시\를 붙이면 됩니다.

💬입력

\*
\_
\#
\+
\-
\.
\!
\[]
\{}
\()

✅결과
*
_
#
+
-
.
!
[]
{}
()

profile
개발자 양성 베스트직업훈련기관 구디아카데미입니다.

0개의 댓글