베이스 캠프에서 (1)
베이스 캠프에서는 우선 시작을 독려해주는 글과 함께 Visual Studio Code를 설치할 것을 요청했다.
일단 VS Code의 경우 이미 내가 사용하는 기기에 설치가 되어 있었기 때문에 extensions만 추가로 설치했다.
우선 Python이 설치를 하였고 그 외에도 코드의 가독성을 높이는
Indent Rainbow, Better Comments, Colorize 등을 설치하였다.
한국어로 진행되는 과정인 만큼 VS Code용 한국어 팩도 설치했다.
다음으로 계속해서 캠프 미션을 따라갔다.
터미널(MAC을 사용할 경우. Windows는 PowerShell 이다.)에 대해 알아보았다.
터미널이란 command line interface로 서버 관리, 개발, 자동화 작업 등에 사용되는 명령어 등을 입력할 수 있는 환경이다.
터미널에서 사용되는 명령어는 파일 관리, 프로세스 제어, 네트워크 설정 등의 작업에 사용되고 시스템 자원에 접근하고 제어하는 도구다.
Command Line Interface 와 Graphic User Interface에는 차이가 있다.
우리가 흔히 컴퓨터를 사용할 때 마우스 등을 통해 작업 실행을 하는 것이 Graphic User Interface이다.
반면에 Command Line Interface의 경우 키보드 등으로 명령어를 입력하고 텍스트로 출력되는 형태로 시스템을 제어하는 것이다.
Git, Node.js, Docker, Kubernetes, AWS CLI, Terraform 등은 모두 CLI를 기반으로 동작하며
여러 서버는 CLI 환경에서 관리한다. 특히 리눅스가 그러하며 원격으로 서버에 접속해 관리하거나 배포할 경우 이용되어야 하기 때문에
개발자들은 필수로 사용법을 익혀야 하는 사항이다.
그 다음 목차는 Git 과 GitHub에 관한 내용이다.
Git 이란 코드의 변경 이력을 추적하고 관리하는 데 이용하는 관리 시스템으로 개인 컴퓨터에서 동작하며 인터넷 연결 없이도 관리가 가능한 시스템이다.
GitHub는 Git을 사용한 코드 호스팅 플랫폼이다.
GitLab 외에도 여러 유사한 플랫폼이 있다.
- GitLab
- Bitbucket
- SourceForge
- AWS CodeCommit
- Gitea
- Azure Repos
이전에 메모장으로 마크업 언어인 HTML를 사용하여 GitHub에 간단한 페이지를 올려본 적이 있기 때문에 GitHub에 대해서는 이미 알아본 바 있다.
내가 사용하는 Windows의 경우
https://git-scm.com/ 에서 프로그램을 설치하고
PowerShell을 열어 아래의 명령어를 입력
git --version
git config --global user.name "당신의 이름"
git config --global user.email "당신의 이메일 주소"
git config --global --list
"당신의 이름" 과 "당신의 이메일 주소"에 실제 이름과 이메일 주소를 입력할 경우
오류가 난다.
user.email=XXXX@XXXX.com : 'user.email=XXXX@XXXX.com' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는
프로그램 이름으로 인식되지 않습니다. 이름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시
시도하십시오.
위치 줄:1 문자:1
+ user.email="XXXX@XXXX.com"
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ CategoryInfo : ObjectNotFound: (user.email=ice912@naver.com:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException
GitHub과 GitHubCLI 연결
gh auth login
? What account do you want to log into?
> GitHub.com ( 선택 후 Enter )
GitHub Enterprise Server
? What is your preferred protocol for Git operations?
> HTTPS ( 선택 후 Enter )
SSH
? Authenticate GitHub CLI using your GitHub credentials? Yes
> Login with a web browser ( 선택 후 Enter )
! First copy your one-time code: (XXXX-XXXX)
1회용 코드(XXXX-XXXX)를 입력하거나 확인
https://github.com/login/device 으로 접속하여 1회용 코드를 입력한다.
✓ Authentication complete.
- gh config set -h github.com git_protocol https
✓ Configured git protocol
✓ Logged in as <Your GitHub Username>
설치 확인
PS C:\Users\admin> gh --version
gh version 2.83.0 (2025-11-04)
https://github.com/cli/cli/releases/tag/v2.83.0
PS C:\Users\admin>
HTML 기초는 예전에 메모장에서 작성하여 홈페이지 등을 만들던 것에 대한 내용이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문서 제목</title>
</head>
<body>
<h1>Hello World!</h1>
<p>이것은 간단한 HTML 문서입니다.</p>
</body>
</html>
<body>
<h1>Hello World!</h1>
<p>이것은 간단한 HTML 문서입니다.</p>
</body>
이를 풀어서 설명하면, `<body>` 요소의 영역 안에 `<h1>` 요소와 `<p>` 요소가 들어 있다고
표현할 수 있습니다. 또, `<body>` 요소를 `<h1>` 요소와 `<p>` 요소의 부모 요소,
`<h1>` 요소와 `<p>` 요소를 `<body>` 요소의 자식 요소라고 부르기도 합니다.
<body>
<h1>여는 태그와 닫는 태그 사이에 텍스트를 넣을 수 있습니다.</h1>
<div>
<h3>여는 태그와 닫는 태그 사이에 다른 요소를 자식 요소로 넣을 수 있습니다.</h3>
</div>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문서 제목</title>
</head>
<body>
<h1>Hello World!</h1>
<p>이것은 간단한 HTML 문서입니다.</p>
</body>
</html>
- <!DOCTYPE html>: 이 문서가 HTML5로 작성되었음을 선언합니다.
- **`<html lang="en">`**: HTML 문서의 시작을 나타내며, 여기서 **`lang`** 속성은 문서의 언어를 지정합니다.
- **`<head>`**: 문서에 대한 메타 정보를 담고 있습니다. 예를 들면 문자 인코딩, 뷰포트 설정, 제목 등이 있습니다.
- **`<meta charset="UTF-8">`**: 문서의 문자 인코딩을 UTF-8로 설정합니다.
- **`<meta name="viewport" content="width=device-width, initial-scale=1.0">`**: 모바일 기기에서 적절한 뷰포트를 설정합니다.
- **`<title>`**: 문서의 제목을 정의합니다. 브라우저 탭에 표시됩니다.
- **`<body>`**: 실제 콘텐츠가 들어가는 부분으로, 텍스트, 이미지, 링크 등을 포함할 수 있습니다.
**`<h1>`**, **`<p>`** 등은 각각 제목과 단락을 나타내는 태그입니다. HTML은 이러한 태그를 사용하여 문서의 구조를 형성하며, 각 태그는 특정 의미를 가지고 있습니다.
VS Code를 사용하는 것을 연습해야겠지만 메모장으로 작성했다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<font size=6><a href="https://ozcodingschool.com/">오늘의 할 일</a></font></br>
<ul>
<li>HTML 예습하기</li>
<li>MDN 사이트 접속하기</li>
<li>w3school 사이트 접속하기</li>
<li>실습 도전하기</li>
</ul>
</body>
</html>


댓글
댓글 쓰기