오늘 하루 요약
Terminal? Git? JavaScript Koans?
오늘부터는 코플릿이 아니라 VSCode를 이용해서 Koans를 풀고 Git으로 제출하는 방식으로 진행되었다. 코드스테이츠는 사람을 갈아 넣지만(ㅠㅠ) 교육 방식은 참 좋은 것 같다.. 문제를 풀고 제출하는 동시에 자연스럽게 터미널과 Git 사용법을 손에 익게 만든다.
// 각주로 북마크 만들기
문제를 풀다가 어떻게 나중에 효율적으로 복습할 수 있을까 고민하다가 // 으로 각주를 만들고 거기에 '북마크'라는 글자를 써서 말 그대로 북마크 역할을 하게 했다. ctrl+F로 '북마크'를 찾으면 내가 마크한 곳을 찾을 수 있다.
참고로 나중에 좀 더 봐야할 것들은 '북마크', 어엄청 고민한 것들은 '고민', 궁금한 것은 '질문'이라는 각주를 달아두었다. 무슨 태그 달아두듯이ㅋㅋㅋ
지금 다시 koans 복습하면서 각주들 위주로 공부하고 있다. 효율적이라서 좋네.
1. Command Line Interface(CLI)
vs Graphic User Interface(GUI) : 마우스, 터치 등
CLI의 장점
- 빠르고 강력하다 (마우스로 클릭하며 이동해야 할 것들을 몇 줄의 글자만으로 실행 가능)
- 접근성이 좋다 (원격서버에도 접속 가능)
- NIX (LINUX / UNIX) : 서버 시장에서의 점유율, AWS 등은 대부분 NIX 계열, 오픈소스
Command
파일 보기
ls (list segments)
ls -al (list의 디테일한 정보까지 나타내기 ex. 파일 크기, 생성일, 소유자)
디렉토리로 이동
cd : 이름 뒤에 /가 붙으면 디렉토리(=이동 가능한 폴더)
pwd : 현재 디렉토리의 full path가 출력됨 (print work directory)
cd / 루트 디렉토리(시스템의 최상위 디렉토리)
~는 home 디렉토리
.은 현재 디렉토리
..은 부모 디렉토리 (상위폴더)
clear 명령어로 터미널 기록 삭제
파일 생성
touch : 빈 파일 생성 -> 텍스트 형태의 파일 내용 확인 cat
mkdir : 디렉토리 생성 (make directory)
띄어쓰기를 쓰려면 역슬래시\를 넣고 띄어쓰기
Tab키로 자동완성도 가능하다.
파일 이동
mv 파일 이동. 뒤에 이동시킬 파일명과 넣어줄 디렉토리명을 넣는다.
파일명과 (새)파일명을 넣으면 파일 이름을 바꿀 수도 있다.
파일 복사
cp : 파일 복사 [file][target_dir]
cp -r : 폴더 복사 [folder]
파일 삭제
rm : 파일 삭제 [file_name]
rm -r 혹은 rm -rf : 폴더 삭제 [dir_name] (r은 못찾았고 f는 forced의 약자)
- 주의! 삭제 여부를 확인하지 않으며, 휴지통에 들어가지도 않으니 사용할 때는 주의
관리자
sudo (super user do) : 관리자 권한으로 실행
패스워드가 담긴 text 읽기, 프로그램 설치 등.
권한 문제를 해결하는 솔루션은 아니므로 가능한 한 최소로 사용해야.
ls -al (list all list)
1. 접근 권한 : 읽기, 쓰기, 실행가능 여부 // chmod 명령어
2. 링크된 파일 갯수
3. 소유자
4. 소유그룹
5. 파일 크기
6. 만든 날짜
7. 만든 시간
8. 파일/디렉토리 이름chown : 파일 소유권 변경 (change own)
chown owner:group file
VS Code 에디터로 열기
code . : 현재 폴더를 에디터로 열기
code 텍스트 파일 이름 : 텍스트 파일을 에디터로 열기
open . : 현재 폴더 열기
CLI 프로그램
버전 관리 시스템 GIT
package Manager apt
텍스트 에디터 vim
클라우드 서비스 관리 AWS CLI
수업 외 내용 중 내가 스스로 찾은 거 (for 생존)
폰트 설치
unzip zip 파일 압축 풀기
폰트 관리 프로그램 font-manager
참고 > http://bahndal.egloos.com/631721
2. Git
version control System 버전 관리 시스템. 변경사항을 추적.
참고문서 : https://backlog.com/git-tutorial/kr/intro/intro1_2.html
용어 정리
repository(저장소) : 파일이나 폴더를 저장해 두는 곳
- Remote Repository(원격 저장소) : 파일이 원격 저장소 전용 서버에서 관리되며 여러 사람이 함께 공유하기 위한 저장소입니다.
- Local Repository(로컬 저장소) : 내 PC에 파일이 저장되는 개인 전용 저장소
Git 리모트 레파지토리 --(fork)--> Git의 내 계정 --(clone)--> 로컬 레파지토리'
--(git pull)-->
<--(git push)-- w/ commit git push [대상(origin(내 계정) or upstream(리모트 레파지토리)] [브랜치 이름]
git pull [대상] [브랜치 이름]
commit : 변경 사항을 기록하여 추적 가능하게 만드는 기능. 시간 순 기록.
커밋 메세지 입력 필수 : 커밋 내의 변경 사항을 기록
git commit -m "message"
Staging Aear : 커밋을 실행하기 전의 저장소와 작업 트리 사이에 존재하는 공간. 이전 버전과의 충돌을 해결하기 위해 선택적으로 버전 관리를 하는 곳. '인덱스'라고도 함.
local repository <-------- Staging Area <-------- working dierctory(work tree)
<--(git commit)-- <--(git add)--Branch : 여러 개발자들이 동시에 다양한 작업을 할 수 있게 만들어 주는 기능. 독립적으로 어떤 작업을 진행하기 위한 개념으로, 필요에 의해 만들어지는 각각의 브랜치는 다른 브랜치의 영향을 받지 않기 때문에, 여러 작업을 동시에 진행 가능
master branch : 사용자들에게 직접 배포해야 할 프로그램의 소스가 담김
| | branching ↑
| ↓ | merging
develop branch : 개발중인 버전의 소스코드가 남김. 충분한 테스트와 버그픽스를 거쳐야 함
| | branch ↑
| ↓ | merging
feature branch : 하나의 기능을 담고 있는 소스 코드위로 갈 수록 안정화. 여러 개의 브런치를 생성할 수 있음
git clones > 해당 폴더에 .git 파일이 있어야 status 작동됨
vs
git init > (초기화하다. 시작하다)
3. JavaScript Koans
1. 테스트코드 읽기
function () {
expect(a).to.be.undefined;
expect(a).to.be.NaN;
expect(a).to.exist;
expect(oneFunction(7)).to.be.equal('true');
expect(oneFunction(7)).to.be.true;
expect(oneFunction(7)).to.be.false;
expect(a === b).toBeTruthy();
expect(/for\s*\(|while\s*\(/g.test(funcBody)).to.be.equal(false); // for, while 반복문 사용 금지
expect(/\+/g.test(funcBody)).to.be.equal(false); // + 연산자 금지
}2. Spread syntax (전개 문법)
...를 사용하면 객체와 배열의 괄호를 없애는 역할을 한다.
const obj = {a:3, b:4, c:5}
...obj; // VM136:1 Uncaught SyntaxError: Unexpected token '...'
{...obj} // {a: 3, b: 4, c: 5}
let arr = ['a', 1, 2, 5]
..arr // VM267:1 Uncaught SyntaxError: Unexpected token '...'
[...arr] // (4) ["a", 1, 2, 5]
//마지막은 궁금해서 넣어봄
{...arr} // {0: "a", 1: 1, 2: 2, 3: 5}
[...obj] //VM420:1 Uncaught TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator))콘솔에 쳐 본 것들인데 괄호가 없어지기 때문에 사용할 때는 괄호를 넣어야 하는 듯?
객체와 객체, 배열과 배열을 합칠 때 좋다.
배열을 ... 시켜서 객체에 넣으면 인덱스가 key가 되네. 하지만 [...객체]는 안 되는 듯 하다.
그리고 예제로 나온 이 구문도 신박했다.
const spread = [42, 2, 1, 4, 2, 12];
const max = Math.max(...spread); 항상 이런 유형은 반복문을 돌렸는데.. 이런 방법이ㅠㅠㅠ
const spread = [1970, 0, 1]; // 1 Jan 1970
const whenComputerStarts = new Date(...spread); // TODO
expect(whenComputerStarts).toEqual(new Date(1970, 0, 1));생성자 함수?에도 넣을 수 있다고 한다. 생성자 함수가 뭐지?
3. 생성자 함수, 프로토타입, 인스턴스
생성자 함수?
"객체"를 생성할 때 사용하는 함수. 대문자로 시작하고 new로 호출한다. this는 이렇게 생성된 객체 자체를 가리킨다.
객체 선언 : https://victorydntmd.tistory.com/51
생성자 함수 : https://doitnow-man.tistory.com/132
프로토타입?
프로토타입 : https://medium.com/@bluesh55/javascript-prototype-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-f8e67c286b67
이걸 찾으면서 객체, 배열 모두 언제나 함수로 생성된다는 거 보고 충격... 아하..
인스턴스?
오브젝트를 사용하여 오브젝트를 생성할 때 반환된 Object.
3. Array Method
-
filter() -> () 안에 true 값이 되는 함수 실행. 걸러줌. 원본은 그대로
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter -
map() -> 안의 함수를 처리한 값을 그대로 넣어줌. 원본은 그대로
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map -
reduce() -> 최종 결과를 하나의 값으로
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce
https://www.zerocho.com/category/JavaScript/post/5acafb05f24445001b8d796d -
forEach() -> 반복문처럼 사용. 단, 중간에 멈출 수 없음.
-
every() -> 모든 요소가 통과하는지를 확인. true or false
-
some() -> 한 요소가 true일 때까지 찾아줌. ||같은 느낌인가.
4. Mutability
dot
this
prototype
closure
