Code wave

VSCode 설정에서 기본 탭 간격을 수정해도 바로 반영되지 않는 경우가 있다. 이럴 때 에디터 창에서 바로 탭 간격을 변경할 수 있는 방법과 기본 설정으로 변경하는 방법에 대해 알아보자.

1. 에디터 창에서 바로 탭 간격 변경

1) 에디터 하단 Spaces를 클릭한다.

2) Indent Using Spaces를 클릭한다.

3) 현재 문서 탭 간격이 기본 탭 간격과 다르다는 걸 알 수 있다. 기본 탭 간격을 클릭한다.

4) 현재 문서 탭 간격이 2에서 4로 변경되었다.

5) 코드를 전체 선택해서 마우스 오른쪽 버튼을 클릭한 다음 Format Document를 클릭하면 코드가 보기 좋게 정렬된다.

- 단축키 : (MAC) shift + option + f /  (WIN) shift + alt + f

2. 기본 탭 간격 설정 변경

위 방법과 같이 문서마다 설정해주지 않아도 파일을 열었을 때, 미리 설정해둔 기본 탭 간격으로 변경되게 할 수도 있다. 

1) 기본 설정창을 열어준다.

단축키 : (MAC) commend + , / (WIN) ctrl + ,

2) 'Editor Tab'을 입력한다.

3) 아래와 같이 설정한다. 이제 파일을 열면 내가 설정해둔 탭 간격이 반영된다.

• Detect Indentation : 파일을 열었을 때, 에디터가 자동으로 탭 간격 설정
• Insert Spaces : 탭 간격 space로 처리 (호환성을 위함)
• Tab Size : 기본 탭 간격

에디터에서 html 파일을 새로 생성하는 경우, 매번 html 기본 양식을 타이핑하는 건 정말 귀찮은 일이다. 물론 이 전에 작업했던 html 파일에서 복사해올 수도 있지만, 이 전 작업 파일이 없는 경우도 있고 있어도 작업된 부분은 지워야 해서 어차피 손이 가야 한다. 이럴 때 자동으로 html 기본 양식을 세팅해주는 기능이 있다.

1. html 기본 양식 세팅 방법 1

1) 새 html 파일을 생성한다.

2) 하단에서 언어모드가 'HTML'인지 확인한다.

3) 빈 html에 !(느낌표)를 입력한다.

3) Tab 키를 눌러주면 html 기본 양식이 세팅된다.

2. html 기본 양식 세팅 방법 2

1) 빈 html 화면에 'html'이라고 입력한 후, 아래와 같은 말풍선이 뜨면 'html:5'를 클릭한다.

2) html 기본 양식 세팅 완료

에디터를 사용할 때 라이브 서버를 사용할 경우 코드가 수정될 때마다 바로바로 업데이트된 화면으로 확인할 수 있다. 작업 시 굉장히 편하기 때문에 기본적으로 설정하는 기능 중 하나이다. VS Code 라이브 서버 설정을 위해 extensions 설치하는 방법에 대해 알아보자.

1. VS Code 라이브 서버 설치하기

1) VS Code를 실행해준다.

2) MAC: 상단 메뉴> Code> 기본 설정> 확장 (WIN: 메뉴> 파일> 기본 설정)으로 들어간다.
또는, 단축키 MAC: shift+command+x, (WIN: Ctrl+Shift+x)를 사용하여 들어간다.

3) 검색창에 'live server'를 검색한 후 설치한다.

2. VS Code 라이브 서버 실행하기

1) 라이브 서버를 실행할 html 파일을 열어둔다.

2) 해당 html 파일을 마우스 우클릭한다.

3) 브라우저 창이 뜨면 실시간으로 코드를 반영되는 것을 확인한다.

이번 포스팅에서는 Mac OS 환경에서 Git 설치 방법을 알아보도록 하겠다. Mac OS에 Git을 설치하기 전에 우선 vscode에서 터미널을 사용할 수 있도록 세팅부터 해야 한다. 아래 페이지를 참고하면 된다.

1. Homebrew 설치하기

Homebrew를 설치하는 이유는 맥에서 지원하지 않는 패키지들을 설치할 수 있도록 해주기 때문이다. Homebrew install 명령어를 사용해서 유용한 패키지들을 설치할 수 있다.

1) Homebrew 사이트에 접속한다.

https://brew.sh/index_ko

2) Homebrew 설치 명령어를 복사한다.

3) vscode에서 단축키[option+`]를 눌러 터미널을 실행시켜준 다음, 복사해둔 명령어를 붙여넣고 엔터를 친다.

4) Password가 나타나면 맥 부팅 시 사용하는 암호를 입력하고 엔터를 친다. (암호는 입력해도 안 보이는 게 정상)

5) Homebrew 설치가 완료되었다.

2. Mac에 Git 설치하기

이제 앞서 설치한 Homebrew를 통해서 git을 설치하면 된다.

1) 'brew install git'을 입력하고 엔터를 눌러준다.

2) git이 설치되었다.

3. Github에 SSH 공개키 등록하기

git 사용자가 나라는 것을 인증하기 위해 SSH 공개키를 등록해야 한다. 공개키를 사용하기 위해서는 일단 공개키를 생성해야 한다. 아래 방법을 따라해보자.

1) 'ssh-keygen'을 입력하고 엔터를 누른다.

2) ssh keygen 설치 후 'cat ~/.ssh/id_rsa.pub'를 입력하고 엔터를 치면 ssh-rsa로 시작하는 키젠이 나온다. 모두 복사해준다.

3) github setting에 들어가서 좌측 메뉴에 SSH and GPG keys를 클릭한 후 New SSH key 버튼을 클릭한다.

4) 아까 복사해뒀던 SSH key를 붙여넣고 Add SSH key 버튼을 클릭한다.

5) 정상적으로 처리되었다면 아래와 같이 리스트에 등록된다.

비주얼 스튜디오 코드(vscode)는 기본적으로 터미널 기능을 제공한다. 우리는 여기에 코드를 입력하여 원하는 것을 실행한다. 그런데 코드 입력이 실행으로 이어지기 위해서는 우선적으로 기능 설치가 필요하다. 아래 방법을 참고하여 터미널을 정상적으로 실행해보자.

vscode에서 터미널 실행하기

1. vscode를 실행한다.

2. View-Command Palette를 실행한다.

3. 'shell'을 입력하면 나오는 'Shell Command: Install 'code' command in PATH'를 클릭한다.

4. 셸(Shell)을 설치하기 위해 관리자 권한을 물을 것이라고 알림 창이 뜨면 'OK' 버튼을 클릭한다.

5. 맥 관리자 암호를 입력한다. (맥 부팅 시 사용하는 암호)

6. 성공적으로 설치되었다고 알림 창이 뜬다.

7. 단축키[control+`]를 눌러 터미널 창을 열고, 코드를 입력하여 사용해본다.

터미널은 사용자가 컴퓨터와 소통할 수 있도록 중간 역할(interface)을 한다. 윈도우의 'cmd', 맥의 '터미널'이라는 기본 제공 어플리케이션이 그 예다. 터미널을 본격적으로 사용하기 전에 터미널은 무엇인지, 그리고 터미널과 헷갈릴 수 있는 다른 개념들까지 알아보자.

콘솔, 터미널, 셸의 구분

워드프레스로 홈페이지를 만들다 보면 여러 템플릿이 중복되거나 내용이 꼬일 때가 있다. 이 때는 수정하는 것보다는 아예 리셋하는 게 속 시원하고 더 빠를 것이다. 플러그인을 사용해 간단히 워드프레스를 리셋하는 방법을 알아보자.

WP Reset 플러그인 사용하여 워드프레스 깔끔하게 초기화하기

1. 워드프레스 관리자 페이지에서 플러그인-새로추가로 들어간 다음 'WP Reset'을 검색하여 설치한다.

2. 활성화 버튼을 클릭한다.

3. 도구-WP Reset으로 들어간다.

4. 아래와 같이 선택한 후 'reset'을 입력한 다음 'Reset Site' 버튼을 클릭한다.

5. 초기화(리셋)이 완료되면 아래와 같이 사이트가 초기화된다.

네이버에서 사이트 간단체크를 하였을 때, '네이버 검색로봇이 사이트 진단을 할 수 없습니다.'라고 결과가 나오는 경우가 있다. 이 경우 robots.txt 파일을 사이트에 적용하면 간단히 해결된다.

검색로봇이란?

검색로봇이란, 웹을 돌아다니면서 정보를 수집하는 로봇이며 크롤러라고도 부른다. 각 검색엔진에는 크롤러가 존재하며 구글의 '구글 봇', 네이버의 '예티'가 그 예시이다. 이 로봇들이 마음대로 웹사이트에 접근할 수 있는 건 아니다. 접근 가능하다는 증명서가 필요한데, 그게 바로 robots.txt인 것이다. 각 검색 로봇에게 접근 권한을 주어야 내 웹사이트가 크롤링이 가능해지며, 검색 페이지에 잘 노출된다.

사이트 간단체크하기

1. 네이버 서치어드바이저에 접속한다.

https://searchadvisor.naver.com/

2. 웹마스터 도구로 들어간다.

3. 간단체크에 들어가서, 사이트 URL을 입력하고 돋보기 버튼을 클릭한다.

4.'robots.txt가 존재하지 않습니다.'라는 진단 결과가 나온다면 아직 robots.txt 설정이 되어있지 않은 것이다.

네이버 robots.txt 설정하는 방법

1. 사이트 관리에 들어간 다음 좌측 메뉴에서 검증-robots.txt를 클릭한다.

2. robots.txt 간단 생성에서 아래와 같이 설정 후 다운로드한다.

3. 다운로드한 robots.txt 파일을 워드프레스 FTP 최상위 폴더에 업로드한다.

4. 수집요청 버튼을 클릭하면 수집요청이 되었다는 알림창이 뜬다.

5. 잠시 후, robots.txt 검증에서 확인 버튼을 클릭한다.

6. 수집이 가능하다는 알림창이 뜨면 제대로 설정된 것이다.

구글 검색 엔진에 사이트를 등록했다면, 이번에는 네이버에 등록하도록 하겠다. 구글과 마찬가지로 네이버에도 사이트를 등록해야 네이버에서 해당 웹사이트가 검색된다. 네이버는 아직까지도 국내 점유율 1위 검색 엔진이다. 때문에 유입량을 늘리려면 반드시 사이트 등록을 해두길 바란다.

네이버에 사이트 등록하기

1. 네이버 서치 어드바이저에 접속한다.

https://searchadvisor.naver.com/

2. 웹마스터 도구에 들어간다.

3. 사이트 URL을 입력하여 등록한다.

4. 메타태그를 복사한다.

5. 워드프레스 관리자 페이지에서 설정-Insert Headers and Footers에 들어가서 'Scripts in Header'에 복사해둔 메타태그를 붙여 넣고 변경사항을 저장한다.

※ Insert Headers and Footers 플러그인이 설치되어있지 않다면 아래 페이지에서 참고하여 설치하면 된다.

6. 다시 웹마스터 도구로 돌아와 '소유확인' 버튼을 클릭한다.

7. 메타태그가 정상적으로 추가되었다면 소유 확인이 완료되었다는 알림창이 든다.

네이버에 rss 등록하기

RSS(Real Simple Syndiction)란, 웹사이트 내 작성된 글의 복잡한 구조를 간략하게 만든 데이터 형식이다. 이메일을 생각하면 쉬운데, 우리가 이메일을 확인할 때 제목부터 보고 선택적으로 내용을 확인할 수 있다. 이처럼 웹사이트의 콘텐츠도 상세 내용부터 보여주는 게 아닌 간략한 정보만 먼저 확인할 수 있도록 하는 것이다.

1. 웹마스터 도구로 들어간다.

2. 사이트 목록에서 해당 사이트 URL을 클릭한다.

3. 좌측 메뉴에서 요청-RSS 제출로 들어간다.

4. 아래와 같이 '사이트URL/rss'를 입력하고 확인 버튼을 클릭한다.

5. RSS가 정상적으로 제출되었다면 제출된 RSS 리스트에 등록된다.

네이버에 사이트맵 등록하기

1. 웹마스터 도구로 들어간다.

2. 좌측 메뉴에서 요청-사이트맵 제출로 들어간다.

3. 워드프레스에 Yoast SEO 플러그인이 설치되어 있지 않다면 먼저 설치해준다.

※ 플러그인 자세한 설치 방법은 아래 페이지에서 확인하면 된다.

4. 아래와 같이 '사이트URL/sitemap_index.xml'을 입력한 후 확인 버튼을 클릭한다.

5. 사이트맵이 정상적으로 제출되었다면 제출된 사이트맵 리스트에 등록된다.

홈페이지가 완성되었다면, 이제 방문자가 내 홈페이지에 유입되도록 해야 한다. 구글 검색 엔진에 등록하여 구글에 검색했을 때 내 홈페이지가 검색되게 설정해보자.

구글에 사이트 등록하기

1. 구글 계정에 로그인 후, 구글 서치 콘솔에 접속한다.

2. URL 접두어 아래 홈페이지 URL을 'https://'부터 적고 '계속' 버튼을 클릭한다.

3. HTML 태그를 클릭한다.

4. 메타태그를 복사한다.

5. 워드프레스 관리자 페이지에서 플러그인-새로 추가에 들어간 다음, 검색창에 'headers and footers'를 검색하고 'Insert Headers and Footers by WPBeginner' 플러그인을 설치한다.

6. 플러그인 설치가 완료되면 '활성화' 버튼을 클릭한다.

7. 설정-Insert Headers and Footers를 클릭한다.

8. 아까 복사해둔 메타태그를 Scripts in Header에 붙여넣기한다.

9. 다시 구글 서치 콘솔로 돌아와 '확인' 버튼을 클릭한다.

10. '완료' 버튼을 클릭한다.

구글에 사이트맵 등록하기

사이트맵이란, 웹페이지 전체 구조에 대한 정보를 코드로 작성하여 xml 형식으로 나타낸 것이다. 이 사이트맵은 각 검색 엔진의 로봇이 접근하여 사이트 전체 구조를 확인하는 데에 도움을 준다.

1. 좌측 상단 메뉴를 클릭하고, 속성 검색-등록한 URL을 클릭한다.

2. 좌측 메뉴에서 'Sitemaps'를 클릭한다.

3. 워드프레스 관리자 화면으로 돌아와서 플러그인-새로 추가로 들어간 다음, 검색창에 'Yoast'를 검색하고 'Yoast SEO' 플러그인을 설치한다.

4. 플러그인 설치가 완료되면 활성화 버튼을 클릭한다. 

5. 좌측 메뉴에서 'SEO-General'로 들어간다.

6. Features 탭으로 들어간 후, 'XML sitemaps' 옆 물음표를 클릭하면 나오는 'See the XML sitemap'을 클릭한다.

※ 사이트맵 페이지가 'Not Found'가 뜨면서 나오지 않는다면 아래 방법을 따라 해 보자.

6-1. 워드프레스 관리자 페이지에서 설정-고유주소에 들어간 다음, 일반 설정에서 '글 이름'이나 '사용자 정의 구조'를 선택하고 변경사항을 저장한다.

7. 사이트맵 페이지가 정상적으로 나온다면 주소창에서 'sitemap_index.xml'을 복사한다.

8. 다시 구글 서치 콘솔로 돌아와서 복사해둔 텍스트를 표시된 영역에 붙여 넣기 하고 '제출' 버튼을 클릭한다.

9. 사이트맵 추가가 완료되면 제출된 사이트맵에 등록되며, 등록한 직후에는 '가져올 수 없음'으로 나오는 게 정상이다.

10. 잠시 뒤에 확인해보면 '성공'으로 상태가 바뀐 것을 확인할 수 있다.

구글 사이트 등록 확인하기

구글 사이트를 등록이 완료되었더라도 바로 검색이 되는 것은 아니다. 구글 웹 크롤러가 내 홈페이지에 방문을 하고 확인할 때까지 시간이 꽤 걸릴 수 있다. 

1. 구글 검색창에 site:"사이트 URL"을 입력 후 검색한다.

2. 검색 결과 페이지에 해당 사이트가 나온다면 정상적으로 구글 검색 엔진에 등록된 것이다.