2주차_TIL

02 Nov 2020 - 6 minute read

• 201102 DAY6: JS array, object
• 201103 DAY7: JS 자료형, Scope, Closure
• 201104 DAY8: JS command line, git
• 201105 DAY9: CSS selector
• 201106 DAY10: CSS Flexbox

201102 DAY6: JS array, object

Array

• 배열이란 순서가 있는 자료구조
• 대괄호를 이용해 배열을 만들고, 각가의 원소(element)는 쉼표로 구분한다. // arrName = [el1, el2, el3]
• 배열의 길이 메소드: .length
• 요소(element)를 배열 끝에 추가, 삭제: .push(‘el’), .pop()
• 요소(element)를 배열 앞에 추가, 삭제: .unshift(‘el’), .shift()
• 배열인지 확인: Array.isArray(arrayName) //true/false
• element의 포함 여부 확인: .indexOf(‘el’) //index 번호 // 없을 때 결과값은 -1
• 포함여부: .includes(‘el’) // indexOf와 같은 기능이지만 browser 호환성이 떨어진다.

Object

• 객체는 한 데이터가 다양한 속성을 가지고 있을 때 사용한다. (의미)
• 중괄호 안에 key와 value의 쌍을 입력. 각각의 쌍은 쉼표로 구분한다. // objName = {key1: val1, key2: val2}
• 객체의 값을 사용하는 두 가지 방법: dot notation, bracket notation
• dot notation: 온점으로 불러오기 // objName.key1 // val1
• bracket notation: 대괄호로 불러오기 // objName[‘key1’] // 키 이름에 반드시 따옴표가 들어가야 한다.
• 키 값이 동적으로 변할 때(키 값이 변수일 때)는 반드시 브라켓 노테이션을 쓴다. // objName[key1] !== objName[‘key1’]
• dot/bracket notation을 이용해 값을 추가할 수 있다. // objName[‘key1’] = val_1
• 삭제하기(delete 키워드): delete ObjName.key1
• in 연산자를 이용해 해당 키가 있는지 확인: ‘key1’ in objName // true/false

201103 DAY7: JS 자료형, Scope, Closure

Primitive type

• 고정된 저장 공간을 차지하는 데이터. 하나의 정보만 담고 있다.
• 변수에 값 자체가 담기며, 변수 간 데이터를 복사할 경우 데이터 값이 복사되기 때문에 값을 수정해도 기존 데이터에 영향이 가지 않는다.
• string, number, bigint, boolean, undefined, symbol, (null)
• 값 자체에 대한 변경이 불가능(immutable)하지만, 변수에 다른 값을 할당할 수는 있다.

Reference type

• 저장공간이 유동적으로 변할 수 있는 데이터. (heap: 크기가 동적(dynamic)으로 변하는 데이터 보관함)
• 변수에 데이터가 위치한 주소가 저장되며, 변수 간 데이터를 복사할 경우 주소를 복사하기 때문에 원소(element)를 변경하면 주소 안의 데이터가 변경되어 기존 데이터에도 영향이 간다.
• array, object, function : 대량의 데이터를 쉽게 다루기 위해 사용되는 것들이 참조 자료형

Scope

• ‘범위’ === ‘변수의 유효범위’ : 코드에서 어디까지가 잘 작동하고, 어디까지가 작동되지 않는지의 범위
• scope의 변수 접근 규칙
  1. Local Scope(지역 변수) vs. Global Scope(전역 변수): 안쪽 scope에서 바깥 변수/함수를 접근하는 것은 가능하지만, 바깥쪽 scope에서 안쪽 변수/함수 접근 불가능.
• 전역 변수는 최상단의 scope로서 어디서든 접근 가능하지만, 지역 변수는 함수 내에서 전역 변수보다 더 높은 우선순위를 가지고 scope 내에서만 접근 가능
  1. Function scope vs. Block scope: JavaScript는 기본적으로 함수 단위로 scope를 가진다.(var)
• block 단위(중괄호{})는 범위를 벗어나는 즉시 변수를 사용할 수 없다.(let)
• const는 값이 변하지 않는 변수, 즉 상수를 정의할 때 사용 (block 단위)
  1. 전역 변수와 window 객체: 전역 범위를 대표하는 객체 window. global scope에서 선언된 함수, var로 선언된 변수는 window 객체와 연결된다.
  2. 선언 없이 초기화된 전역 변수: 선언 키워드(var, let, const) 없이 변수를 선언할 경우 전역 변수로 취급된다.
• ‘use strict’로 strict mode를 사용하여 방지할 수 있다.

Closure

• 외부 함수의 변수에 접근할 수 있는 내부 함수
• 지역변수, 외부 함수의 변수, 전역 변수 모두 접근 가능
• 커링: 함수 하나가 n개의 인자를 받는 대신 n개의 함수를 만들어 각각 인자를 받게 하는 방법 // 외부 함수의 변수가 저장되어(인자를 변수로 저장) 템플릿 함수처럼 재사용 가능
• 클로저 모듈 패턴: 변수를 scope 안쪽에 가두어 함수 밖으로 노출시키지 않는 방법 // 변수를 밖에서 수정하지 못하도록 할 때. 독립적으로 함수를 가지기 때문에 서로 영향을 주지 않고 재사용 가능

201104 DAY8: JS command line, git

Command Line

• 파일 보기: ls // ls -al 숨김 파일까지 볼 수 있다.
• 디렉토리 이동: cd
• cd ~ 홈 디렉토리 / cd / 루트 디렉토리 / cd . 현재 디렉토리 / cd .. 부모 디렉토리
• pwd : 현재 디렉토리 확인
• 빈 파일 생성: touch file_name
• 디렉토리 생성: mkdir dir_name
• 텍스트 형태의 파일 확인: cat file_name
• 파일 및 디렉토리 옮기기: mv file_or_dir target_dir
• 파일 및 디렉토리 이름 바꾸기: mv file_or_dir new_name
• 복사: cp file_name target_dir / cp -r folder
• text editor 열기: code file_name
• 삭제: rm file_name / rm -r dir_name //확인 없이 휴지통에 들어가지 않고 완전히 삭제된다.
• 관리자 권한으로 실행: sudo(superuser do)
• 새로운 프로그램 설치: sudo apt-get install name // apt는 우분투의 package manager
• 파일의 소유권 변경: chown owner:group file // ls -al 명령어로 소유자(owner)와 소유그룹(group) 확인
• GUI 열기: open . / xdg-open(우분투)

Git

• Version control system: 프로그래밍 시 파일 변화를 보존해두고 필요한 버전을 불러올 수 있도록 동일한 파일의 여러 버전을 관리해주는 시스템
• remote repository <-> local repository
• fork: 다른 maintainer의 repository를 내 계정으로 복사
• push: local에서 변경한 source를 remote repository에 적용 // git push origin master
• pull: remote repository에 있는 변경사항을 내 컴퓨터에 적용 // git pull origin master // git pull == git merge + git fetch
• pull: maintainer가 변경한 사항을 local로 pull // git pull upstream master
• staging area: git add 명령어로 git의 컨트롤을 받는 파일을 추가, 커밋할 준비를 하는 공간 // git add file_name
• 어떤 파일이나 디렉토리를 version control system에 의해 버전 관리를 받게 하기 위해 staging area에 add하는 과정이 필요하다.
• commit: 작업의 snapshot. 변경사항을 파악하고 작업기록을 추적하기 위해 커밋 메세지를 적어준다. // git commit -m ‘message’
• repository: git workflow를 모두 포함하는 개념
• branching: 가지를 새로 친다. / merging: 가지를 합쳐준다.
• master branch: 사용자들에게 직접 배포하는 프로그램 소스가 담겨있다.
• develop branch: 개발 중인 버전의 소스 코드가 담겨있다. 충분한 테스트, 버그 수정 후 master에 올린다.
• feature branch: 하나하나의 기능들을 담고 있다.
• hotfit branch: 제품 사용 중 버그 수정, 취약점 보완, 성능 햐상 등을 위해 긴급히 배포되는 패치 프로그램 소스
• release branch: 이번 출시 버전을 준비하는 브랜치

Scope

• ‘범위’ === ‘변수의 유효범위’ : 코드에서 어디까지가 잘 작동하고, 어디까지가 작동되지 않는지의 범위
• scope의 변수 접근 규칙
  1. Local Scope(지역 변수) vs. Global Scope(전역 변수): 안쪽 scope에서 바깥 변수/함수를 접근하는 것은 가능하지만, 바깥쪽 scope에서 안쪽 변수/함수 접근 불가능.
• 전역 변수는 최상단의 scope로서 어디서든 접근 가능하지만, 지역 변수는 함수 내에서 전역 변수보다 더 높은 우선순위를 가지고 scope 내에서만 접근 가능
  1. Function scope vs. Block scope: JavaScript는 기본적으로 함수 단위로 scope를 가진다.(var)
• block 단위(중괄호{})는 범위를 벗어나는 즉시 변수를 사용할 수 없다.(let)
• const는 값이 변하지 않는 변수, 즉 상수를 정의할 때 사용 (block 단위)
  1. 전역 변수와 window 객체: 전역 범위를 대표하는 객체 window. global scope에서 선언된 함수, var로 선언된 변수는 window 객체와 연결된다.
  2. 선언 없이 초기화된 전역 변수: 선언 키워드(var, let, const) 없이 변수를 선언할 경우 전역 변수로 취급된다.
• ‘use strict’로 strict mode를 사용하여 방지할 수 있다.

Javascript koans

• expect 함수: expect(테스트하는 값).기대하는 조건 // expect(isEven(3)).toBeTruthy()
• matcher: ‘기대하는 조건’에 해당하는 함수. 인자를 가질 수 있다.
• jasmine framework에 다양한 matcher가 있다.

201105 DAY9: CSS selector

CSS selector

• 전체: *
• type: tag_name
• id: #id_name
• class: .class_name
• state: :state
• attribute: [attribute]
• descendant(후손): A B
• child(자식): A > B
• adjacent sibling(인접 형제): A + B
• general sibling(형제): A ~ B
• first child pseudo selector: tag_name:first-child
• last child psuedo selector: tag_name:last-child
• Nth child psuedo selector: tag_name:nth-child(N)
• Nth last child selector: tag_name:nth-last-child(N)
• first of type: tag_name:filst-of-type
• Nth of type: tag_name:nth-of-type(N)
• only of type: tag_name:only-of-type
• last of type: tag_name:last-of-type
• 부정: tag_name:not(X)

201106 DAY10: CSS Flexbox

Flexbox

• 부모 박스에 display: flex 적용하여 자식 박스의 방향과 크기를 결정하는 레이아웃
• 방향: flex-direction
• 팽창 지수(grow), 수축 지수(shrink), 기본 크기(basis): 자식 박스에 어떠한 속성도 주지 않으면 컨텐츠 크기만큼 배치된다.
• 기본값 flex: 0 1 auto; // grow shrink basis 순서
• flex-basis: 박스가 grow나 shrink에 의해 늘어나거나 줄어들기 전 갖게 되는 기본 크기
• grow가 1 이상일 경우 basis로 설정된 크기가 항상 보장되지는 않는다.
• flex-basis가 width보다 우선시된다.
• 안쪽 박스의 콘텐츠가 넘치는 경우를 대비해 width대신 max-width를 사용한다.(basis를 사용하지 않을 경우)
• 수평 정렬: justify-content // flex-start; flex-end; center; space-between
• 수직 정렬: align-items // flex-start; flex-end; center; stretch

와이어프레임 설계 및 목업 구현

• wireframe: 골격. ‘와이어로 설계된 모양’
• 비교적 단순한 도형만을 사용하여 레이아웃과 제품의 구조를 시각적으로 묘사한 것 === 영역구분
• 목업: 실제 작동되는 모습처럼 html코드를 장성
• 하드코딩: 원하는 html의 출력을 하나하나 입력하는 것

HTML로 웹 앱의 구조 잡기

• 프로토타이핑: 개발 초기에 모형을 만들어 기능의 요구사항을 파악 후 반영하는 개선 방식
  1. 큰 틀에서 영역 나누기
  2. 각 영역을 태그로 표현하기

id vs. class

• id: 고유(unique)한 이름을 붙일 때
• class: 반복되는 영역을 유형별로 분류할 때