![]()
원격 저장소 사용하기 1. 원격 저장소 사용하기 레포지터리를 만들었으면, 원격 저장소를 사용해봅시다. #1. 우리는 이미 프로젝트 파일이 있으므로, 다음 화면 아래에서…or push an existing repository from the command line 부분을 복사합니다. #2. 작업하고 있는 VSCode에 붙여넣은 다음, 실행합니다. #3. gitHub로 돌아가 새로고침하면, 작업한 파일이 올라간 것을 확인할 수 있습니다. 그렇다면, 복사한 내용은 어떤 것을 의미할까요? git remote add origin "원격 저장소 주소"는 로컬의 Git 저장소에 원격 저장소로의 연결을 추가하는 명령어입니다. 원격 저장소 이름은 흔히 origin을 사용합니다. git branch -M main은 mai..
![]()
GitHub 1. GitHub 이번엔 GitHub에 대해 알아봅시다! GitHub란? 소프트웨어 개발 및 버전 관리 플랫폼으로, 프로그래머들이 프로젝트를 협업하고 소스 코드를 관리하는 데 사용됩니다. Git을 기반으로 하며, 코드를 호스팅하고 공개 or 비공개 저장소(repository)로 관리할 수 있습니다. 2. GitHub 시작하기 그럼 이제 GitHub를 시작해봅시다! #1. GitHub사이트에 들어가서 회원가입 및 로그인을 합니다. 그 다음, Personal access token을 만듭니다. Personal access token란? GitHub API에 엑세스할 때, 사용되는 인증 토큰입니다. GitHub의 인증 및 권한 부여 시스템에 사용되며, 사용자가 API를 통해 GitHub 리소스에 ..
![]()
SourceTree로 브랜치 다루기 1. SourceTree로 브랜치 다루기 이번엔 SourceTree로 브랜치를 다뤄봅시다! #1. SourceTree의 상단 메뉴에 브랜치 버튼을 클릭 후, to-merge, to-rebase 브랜치를 생성합니다. #1. VSCode로 돌아와 main 브랜치에서 Tigers의 manager를 Lee로 바꿔주고 다음과 같이 입력하여 커밋합니다. SourceTree로 커밋하려면, 왼쪽 상단에 커밋을 클릭한 후, 아래에 메시지를 입력한 뒤, 파일을 스테이지에 올리고 커밋 버튼을 클릭하면 됩니다. Edit Tigers manager #2. 그 다음 왼쪽 사이드바에 to-merge를 더블클릭하여 브랜치 변경 후, Tigers의 coach를 Choi로 바꿔주고 다음과 같이 입력하..
![]()
브랜치 간 충돌 1. 브랜치 간 충돌 파일의 같은 위치에 다른 내용이 입력된 상황에서는 어떻게 해야할까요? 한번 알아봅시다. #1. 일단 먼저, 다음과 같이 입력하여 conflict-1와 conflict-2 브랜치를 생성해줍니다. git branch conflict-1 # (2도 동일) #2. main 브랜치에서 Tigers의 manager를 Jeon으로, Bears의 coach를 Choi로, Panthers의 coach를 Lee로 변경한 후, 다음과 같이 커밋 메시지를 입력하여 커밋합니다. git commit -am "Edit Tigers, Bears, Panthers" #3. conflict-1 브랜치로 변경 후, Tigers의 manager를 Jung으로 변경하고 다음과 같이 입력하여 커밋합니다. ..
![]()
merge와 rebase 1. merge 브랜치를 병합하는 merge에 대해 알아봅시다! merge란? 서로 다른 브랜치의 변경 사항을 하나로 통합하는 과정을 의미합니다. 다양한 브랜치에서 개발한 내용을 메인 브랜치로 합치기 위해 merge를 사용합니다. 2. 사용방법 그럼 이제 merge를 사용해봅시다. git merge 브랜치명을 입력하면 됩니다. #1. main 브랜치 상태에서 합칠 대상의 브랜치를 골라 다음과 같이 입력해줍니다. (add-coach를 선택했습니다.) git merge add-coach → 그러면 add-coach 브랜치에서 한 작업이 main 브랜치와 병합하게 됩니다. → 또한, SourceTree에서 보면 합쳐진 것을 확인할 수 있습니다. ※ merge도 하나의 커밋이기 때문에,..
![]()
브랜치(branch) 1. 브랜치(branch) 이번엔 브랜치(branch)에 대해서 알아봅시다! 브랜치란? 코드의 분리된 작업 흐름을 나타내는 것입니다. 각 브랜치는 프로젝트의 기능 or 수정을 담당하는 독립적인 코드 세트입니다. 브랜치를 사용하면, 여러 작업을 동시에 수행하거나 특정 기능을 개발하면서도 기존 코드를 안전하게 유지할 수 있습니다. 2. 브랜치 추가 브랜치를 추가해봅시다. #1. VSCode에 다음과 같이 입력하여, 브랜치를 추가해줍니다. git branch add-coach #2. 터미널에 git branch라고 입력해봅시다. → add-coach가 추가 되었고 main이 현재 브랜치임을 확인할 수 있습니다. 다음과 같이 입력하여, 브랜치를 변경해봅시다. git switch add-co..
![]()
reset과 revert 1. reset reset에 대해 알아봅시다! reset은 Git에서 변경 내용을 되돌리거나 작업 디렉토리를 이전 커밋 상태로 되돌리는 데 사용되는 명령어입니다. reset을 이용하여, 이전 커밋 상태로 되돌아가봅시다! #1. git log를 입력한 후, Add team Dolphins의 커밋 일련번호를 복사해줍니다. (7글자만 복사하여도 가능합니다.) #2. git reset --hard 일련번호를 입력하여, 되돌립니다. → 다음과 같이 Add team Dolphins로 돌아왔다고 나타납니다. → 또한, panthers.yaml이 사라진 것을 확인할 수 있습니다. 2. revert 이번엔 revert에 대해 알아봅시다! revert란 이전 커밋을 취소하고, 그 변경 사항을 새로..
![]()
add와 commit 1. 타임캡슐에 담기 (add) 프로젝트의 변경사항들을 타임캡슐(버전)에 담아봅시다. #1. git add 파일명으로 파일을 타임캡슐에 담습니다. → git add tigers.yaml를 입력한 후, git status를 입력하면 다음과 같이 나오는 것을 확인할 수 있습니다. → Changes to be committed: 는 커밋할 준비가 되었음을 나타냅니다. 이번엔 git add .를 입력하여, 모든 파일을 타임캡슐에 담아봅시다. → git status를 입력해서 보면, 모든 파일이 커밋할 준비가 되었음을 확인할 수 있습니다. 2. 타임캡슐 묻기 (commit) 이번엔 타임캡슐을 묻어봅시다! #1. git commit 명령어를 입력하면 다음과 같은 화면이 나타납니다. #2. 명령..
![]()
.gitignore 1. .gitignore .gitignore 파일은 Git 저장소에서 추적하지 않아야 하는 파일 or 디렉터리를 지정하는 데 사용되는 설정 파일입니다. 이 파일을 사용하면, Git이 특정 파일 or 디렉터리의 변경 내용을 추적하지 않도록 할 수 있습니다. 보통 자동으로 생성 or 다운로드되는 파일들 (빌드 결과물, 라이브러리)나 보안상 민감한 정보를 담은 파일을 적용합니다. 2. 사용방법 이제 사용해봅시다! #1. VSCode에 secrets.yaml 파일을 만들고 다음과 같이 입력해줍니다. id: admin pw: 1234abcd #2. 그 다음, 터미널에 git status라고 입력하면, 3개의 파일이 나오는 것을 확인할 수 있습니다. #3. .gitignore라는 파일을 생성 후..
![]()
함수 (function) 1. 함수 (function) 이번엔 함수에 대해 알아보겠습니다. 함수는 JavaScript와 유사하지만 몇가지 차이가 있습니다. 2. 함수 선언과 정의 1) 선언 및 정의 방법 TypeScript는 다음과 같이 정의할 수 있습니다. // 함수 선언 function add(num1: number, num2: number): number { return num1 + num2; } // 함수 호출 let result = add(10, 20); console.log(result); // 30 2) 선택적 매개변수 TypeScript에서는 함수의 매개변수를 선택적으로 만들 수 있습니다. 매개변수의 이름 뒤에 물음표(?)를 붙여서 정의합니다. // 함수 선언 function hello(n..
![]()
this와 bind 1. this this는 실행 컨텍스트에 따라 동적으로 바뀌며, 함수가 어떻게 호출되는 지에 따라 값이 달라집니다. 주로 메서드 or 콜백 함수 등에서 사용되며, 함수가 어떻게 호출되느냐에 따라 this가 가리키는 대상이 달라집니다. 다음 코드를 보면 user.info( )를 호출할 때, this는 user를 가리킵니다. const user = { name: "Kim", info: function () { console.log(this.name); } }; user.info(); // Kim 2. bind bind 메서드는 함수의 this 값을 설정하여, 새로운 함수를 생성합니다. const user = {name: "Kim"}; function info() { console.log(..
![]()
reduce 함수 1. reduce 함수 reduce 함수는 배열의 각 요소에 대해 주어진 콜백 함수를 실행하고, 하나의 누적된 결과 값을 반환하는 함수입니다. reduce는 초기값(Initial Value)과 함께 사용될 수 있습니다. 2. 사용방법 다음 예제를 확인해보겠습니다. let numbers = [1,2,3,4,5,]; let sum = numbers.reduce((result, num) => result + num, 0); console.clear(); console.log(sum); // 15 위 코드에서 reduce는 배열 numbers의 각 요소에 대해 누적된 합계를 계산합니다. 초기값으로 0을 사용하고, 콜백 함수는 현재 요소(num)와 누적된 값(result)을 받아서 더한 후, 새..
![]()
SourceTree 1. SourceTree 이번엔 SourceTree에 대해 알아봅시다. SourceTree는 Git을 시각적으로 관리할 수 있는 무료 Git GUI 클라이언트입니다. SourceTree를 사용하면, Git 저장소를 쉽게 관리하고 변경 사항을 시각적으로 확인할 수 있습니다. 2. 주요 기능 1) 시각적인 표현 Git의 작업을 그림으로 보여주어 작업 내용을 이해하기 쉽게 합니다. 브랜치, 커밋, 병합 등이 시각적으로 표현됩니다. 2) 간편한 브랜치 관리 브랜치를 만들고 전환하는 것이 쉽습니다. 브랜치를 시각적으로 선택하여, 브랜치 간 전환을 수월하게 할 수 있습니다. 3) 커밋 및 병합 변경된 파일을 선택하여 커밋하고, 브랜치를 병합하는 작업이 SourceTree에서 직관적으로 이루어집니..
![]()
인터페이스 (interface) 1. 인터페이스 TypeScript의 인터페이스에 대해 알아봅시다. 인터페이스란? 코드의 구조를 정의하는데 사용되는 도구입니다. 인터페이스를 사용하면, 객체의 형태, 메서드, 속성 등을 명시적으로 정의할 수 있으며, 이를 통해 코드의 가독성을 높이고 유지 보수성을 향상시킬 수 있습니다. 2. 사용방법 처음엔 다음과 같이 입력하여, 정의하여 줍니다. interface User { name: string; age: number; } 그 후 객체를 선언하고 출력해봅시다. interface User { name : string; age : number; } let user : User = { name : 'Kim', age : 30 } console.log(user.age); 속..
![]()
생성자 (constructor) 1. 생성자 (constructor) constructor는 객체를 생성할 때, 호출되는 메서드입니다. 일반적으로 클래스 or 함수를 사용하여 객체를 만들 때, 이 생성자가 호출됩니다. 2. 사용방법 console.clear(); class Person { // 생성자 constructor(name, age) { this.name = name; this.age = age; } // 다른 메서드들도 정의할 수 있음 hello() { console.log(`안녕하세요 ${this.name}입니다. 나이는 ${this.age}살 입니다.`) } } // 객체 생성 const user = new Person("Kim", 20); // 생성자에서 초기화된 속성 확인 console...
