더그는 피아노를 좋아해

소스코드를 작성할 때,

여러 곳에 사용 된 변수를 손으로 하나하나 고치느라 오류가 발생하는 경우가 있습니다.

작업 시 시간도 많이 들게되고,

오류가 발생 할 여지도 커져 좋지 않습니다.

이러한 때 사용하기 좋은 VS Code 내장기능이 있습니다.

F2키로 실행 가능한 Rename Symbol 기능입니다.

사용법은 간단합니다.

1. 동시에 수정되어야 할 변수 중 하나를 클릭합니다. (드래그 필요 없음)

2. F2키를 누르거나, 우클릭 후 'Rename Symbol'을 클릭합니다.

3. 작은 창이 하나 뜹니다.

4. 변수명을 수정합니다.

그림으로 보면 하기와 같습니다.

소스코드를 작성하다보면,

변수명을 어떻게 표기할 지 난해할 때가 종종 있습니다.

이름 자체를 잘 짓기도도 어렵지만,

naming convention(camelCase)을 지키려다보니 생기는 상황입니다.

id가 대표적인 케이스인 것 같습니다.

userId인지? userid인지? userID인지? 와 같이 말입니다.

그래서 구글링을 해봤더니,

선배 개발자들도 이미 같은 고민을 했던 것 같습니다.

몇 가지 포스트의 내용을 종합한 결과,

저는 아래와 같은 우선순위로 id를 표기하려 합니다.

1. 누군가 작성해둔 코드가 있다면 일관을 유지하기 위해 그것대로 사용할 것

2. Id로 사용 할 것(Javascript의 getElementById()를 참고)

3. 명확히 해야 할 경우에는 identifier 또는 identification을 그대로 사용할 것

제가 참고한 포스트 중, 

세 가지 포스트를 추려 공유합니다.

https://stackoverflow.com/questions/779929/id-id-or-id

https://softwareengineering.stackexchange.com/questions/186277/should-the-variable-be-named-id-or-id

https://briancaos.wordpress.com/2019/09/05/id-or-id-naming-conventions-in-code/

VS Code의 주석 색상 변경방법을 공유합니다.

1. VS Code 설정화면 진입

좌측 하단의 톱니바퀴를 클릭하여 Settings 메뉴로 진입합니다.

mac의 경우 cmd키와 , 키를 함께 눌러 진입 가능합니다.

2. 입력창에 schema 입력 및 settings.json 파일 진입

3. json 파일 편집

json 파일에 하기 문구를 추가하여 색상을 변경합니다.

"editor.tokenColorCustomizations": {"comments": "원하는색상"},

Linux 및 mac 터미널에서 자주 쓰이는 명령어와 관련 개념에 대해 정리합니다.

✲ pwd

Print Working Directory의 줄임말입니다.

현재 경로를 출력합니다.

✲ ls

List Segments의 줄임말입니다.

현재 폴더 내 파일 및 폴더를 출력합니다.

✲ cd

Change Directory의 줄임말입니다.

폴더를 이동합니다.

'cd 원하는 위치'의 형식으로 사용합니다.

✲ touch

파일을 생성합니다.

'touch 파일명.확장자'의 형식으로 사용합니다.

✲ cp

Copy의 줄임말입니다.

폴더 및 파일을 복사합니다.

'cp 파일명(변경 전).확장자 파일명(변경 후).확장자'의 형식으로 사용합니다.

✲ mv

Move의 줄임말입니다.

폴더 및 파일을 이동합니다.

'mv 파일명.확장자 이동위치'의 형식으로 사용합니다.

✲ mkdir

Make Directory의 줄임말입니다.

폴더를 생성합니다.

'mkdir 폴더명'의 형식으로 사용합니다.

✲ rmdir

Remove Directory의 줄임말입니다.

폴더를 삭제합니다.

'rmdir 폴더명'의 형식으로 사용합니다.

✲ rm

Remove의 줄임말입니다.

폴더 및 파일을 삭제합니다.

-r(recursive) 옵션을 붙여, 파일이 들어있는 폴더를 삭제합니다.

'rm -r 폴더명'의 형식으로 사용합니다.

✲ /

최상위 경로(root)경로를 의미합니다.

절대경로를 나타낼 때 사용합니다.

'/Users/username'의 형식으로 사용합니다.

✲ . ..

상대경로를 나타낼 때 사용합니다.

.는 현재경로를 의미합니다.

..는 상위 경로를 의미합니다.

!!!!!중요!!!!!

rm -rf* : 파일이 들어있는 모든 폴더를 강제로 삭제합니다.

무시무시한 명령어 입니다..조오오심..하세요..😆

참고url 1 : https://blog.naver.com/nodame3806/222792164155

참고url 2 : https://yozm.wishket.com/magazine/detail/746/

VS Code의 Extension, Carbon을 사용하여 블로그나 기타 홈페이지에 코드소스를 깔끔하게 첨부해봅시다.

 Codepen, Color Scripter의 경우 소스코드가 텍스트 및 html형태로 출력됩니다.

Carbon의 경우 소스코드가 이미지 형태로 출력된다는 차이점이 있습니다.

1. Carbon 설치하기

하기 링크를 클릭하여 Color Script 홈페이지에 접속하여 Carbon을 설치합니다.

(VS Code Extension에서도 검색 가능)

URL : https://marketplace.visualstudio.com/items?itemName=ericadamski.carbon-now-sh 

2. 화면 설명

VS Code를 실행하여 Extension의 활성화 여부를 확인합니다.

3. 캡처 방법

코드를 작성하고 원하는 영역을 드래그 합니다.

Alt + 시작 + a버튼 누르면 하기와 같은 인터넷 창이 열립니다.

Export를 눌러 소스코드를 이미지 파일로 저장 합니다.

클립보드 아이콘을 눌러 소스코드를 클립보드에 저장합니다.

6. 완성

하기와 같이 이미지파일이 생성됩니다.

CodePen을 이용하여

블로그나 기타 홈페이지에 Javascript, CSS를 포함한 HTML을 첨부해봅시다.

1. CodePen 홈페이지 접속하기

하기 링크를 클릭하여 CodePen 홈페이지에 접속합니다.

URL : https://codepen.io/ 

2. 가입하기

CodePen을 이용하기 위해서는 가입이 필요합니다.

Sign up를 클릭하여 가입 후 이메일 인증까지 진행합니다.

3. 코드 작성

HTML, CSS, Javascript 각 란에 맞추어 소스코드를 작성합니다.

결과물이 함께 표시됩니다.

4. 소스 복사

편집기 우측 하단의 'HTML로 복사'버튼을 클릭하여 소스를 복사를 위한 창을 엽니다.

첨부양식을 Iframe으로 선택 후 CopyCode를 클릭하여 소스를 복사합니다.

5. 블로그 첨부(티스토리 기준)

첨부 시 작성모드를 기본모드가 아닌 HTML모드로 변경하여 첨부합니다. 

기본모드로 재변경하여 글 작성을 마무리합니다. 

(글 작성 및 업로드까지 마무리 해야 제대로 표시 됨)

6. 완성

아래와 같이 Javascript, CSS를 포함한 HTML이 첨부됩니다.

See the Pen Untitled by duglikespiano (@duglikespiano) on CodePen.

Color Scripter를 이용하여

블로그나 기타 홈페이지에 코드소스를 깔끔하게 첨부해봅시다.

1. Color Script 홈페이지 접속하기

하기 링크를 클릭하여 Color Script 홈페이지에 접속합니다.

URL : https://colorscripter.com/

2. 화면 설명

언어 : 소스코드에 맞는 언어를 선택합니다.

(기본값은 TXT로 지정 되어 있음)

스타일 패키지 : 취향에 따라 선택합니다.

(서브라임 블랙을 선택하면 배경이 어두워짐)

3. 세부설정

줄번호 복사 : 코드소스를 첨부 할 시, 줄 번호 표시여부를 설정합니다.

HTML태그 자체 복사 : 첨부한 소스코드에 표시 오류가 있을 경우 체크 합니다.

4. 소스 복사

편집기 우측 하단의 'HTML로 복사'버튼을 클릭하여 소스를 복사합니다.

5. 블로그 첨부(티스토리 기준)

첨부 시 작성모드를 기본모드가 아닌 HTML모드로 변경하여 첨부합니다. 

기본모드로 재변경하여 글 작성을 마무리합니다. 

(글 작성 및 업로드까지 마무리 해야 제대로 표시 됨)

6. 완성

아래와 같이 코드가 깔끔하게 첨부됩니다.