2주차 회고

JavaScript 기초

프로그래밍 언어가 번역되는 과정

자연어("Hello") > 어셈블리어(str="Hello") --(컴파일)--> 기계어(1010010)

• 어셈블리어: 기계어와 일대일 대응되는 프로그래밍 언어
  - 컴파일: 어셈블리어를 기계어로 번역하는 과정. 긴 소설을 해석
• 인터프리터 언어는 컴파일러가 없고 한 줄씩 기계어로 번역된다. 실시간 통역

선언 & 초기화 & 할당 & 참조

let variable; // 선언 및 초기화
variable = 10; // 할당
console.log(variable) // 참조

• 선언 및 초기화: 메모리에 '주소'와 '값을 저장한다

  • 데이터: 내가 전하고 싶은 내용
  • 변수: 박스
    - 선언: 나 이 박스 쓸거야(데이터를 담을 공간을 생성하는 것)
  • 초기화: 내용물을 바꿀거야(생선된 변수에 데이터를 전달하는 것)

    			var dog; // 변수 선언
    			dog = "laphoo" // 변수 초기화
    	
    			var dog = "laphoo" // 변수 선언 및 초기화
    			```

• 참조 시에 이때의 주소값을 찾아가 값을 가져온다

var var1 = 10; 
var1 = 10;	// 재할당 가능
var var1 = 20; // 재선언 가능

let var2 = 10; 
var2 = 20; // 재할당 가능
// let var2 = 30; // 재선언 불가능

const var3 = 10;
// var3 = 20; // 재할당 불가능
// const var3 = 30; // 재선언 불가능

변수 생성 시 주의사항

var 1dog // 변수명은 숫자로 시작할 수 없다
var theCutestDogInTheWorld; // 변수명은 최대한 자세하게 작성
var tcditw // 의미가 불명확한 단어들의 조합은 피하기

undefined & null

• undefined 변수 안에 데이터를 입력하지 않은 상태
• null 개발자가 임의로 변수 안에 빈 데이터를 삽입한 상태

함수생성 방법 2가지

// 첫번째
var fun1 = function () {
}

// 두번째
function fun1() {
}

프로퍼티 & 메소드

• 유사한 종류의 것들을 편의를 위해서 객체로 모아둔 것
• 프로퍼티: 객체안에 변수 (ex) .length
• 메소드: 객체안에 함수 (ex) Str.split()

다양한 메소드

• Str.charAt(i) i번째 인덱스에 있는 문자 추출
• Str.repeat(반복횟수) 특정 문자열을 여러번 반복하여 출력
• Arr.shift() 배열 앞의 데이터를 제거
• Arr.unshift() 배열 앞에 데이터 삽입
• Arr.sort((a,b)=>a-b) 배열 내 숫자 오름차순 정리
  - 배열 내 숫자를 그냥 sort()하는 경우 아스키코드 기준으로 정렬되어 정상적으로 작동x
• Math.abs() 절대값
• Obj.keys() 객체의 속성(key)들을 배열로 반환한다.

innerText & innerHTML

• .innerText 요소 안의 text값만 가져온다
• .innerHTML 요소 안의 HTML 태그까지 포함하여 가져온다.

깊은 복사 & 얕은 복사

• 얕은 복사: 주소값만을 복사
• 깊은 복사: 실제 값을 새로운 메모리 공간에 복사
  
• 배열과 객체는 주소값을 함께 저장한다.

do~while문

• do ~ while을 이용하면 while 조건이 거짓이더라도 무조건 블록을 한 번 실행할 수 있다.
• 블록 안을 실행하고 -> 소괄호 안의 조건을 확인 -> 참인 경우 블록을 다시 실행하고, 거짓인 경우에는 종료

do {
  document.write("do while문 실행하기");
} while (false)

• 조건문은 if~else이다. while은 반복문!

문자열 거꾸로 출력하기

function reverse(str) {
  let reverseStr = "";
  for (let i = str.length-1; i >=0; i--) {
  	reverseStr += str.charAt(i);
  } return reverseStr;
}

소수 출력하기

function isPrime(n) {
  let divisor = 2;			//2부터 나누기 시작
  while (n > divisor) {		// n이 나누는 수보다 클때까지
    if(n % divisor === 0) {	// n과 나누는 수가 나누어 떨어지면
    	return false;
    } else {
      divisor++;			// 나누어 떨어지지 않는다면 나누는 수 1증가
    }
  } return true; 
}

다크모드 적용시 유의사항

(참고) p태그 2개의 border-color를 모두 화이트로 바꾸고 싶은 경우

document.querySelectorAll("p").style.borderColor = "white";
으로 적용할 시 첫번째 p만 컬러가 적용된다.

• querySelectorAll은 배열로 반환되기 때문이다
• p가 여러개 존재하는 경우, for문을 돌려 모든 p태그에 적용될 수 있게 한다.

let pElem = document.querySelectorAll("p")
for (let i = 0; i < pElem.length; i++) {
  pElem[i].style.borderColor = "white";
}

script 언어

• 특정 프로그램에서 실행되는 언어
• ex. JavaScript라는 언어는 브라우저에 내장된 js엔진을 통해서 실행 된다. 즉 브라우저가 없으면 동작하지 않는다. 반대로 브라우저만 설치되어 잇다면 언제든지 코딩 할 수 있다.

페어프로그래밍

• 네비게이터 & 드라이버 두 역할로 나뉜다.
• 네비게이터는 코드를 어떻게 작성하라 지시하고, 드라이버는 그것을 코드로 구현한다.

&nbsp

• 줄바꿈을 출력하기 위해서는 <br/>을,
• 두 칸 이상의 공백을 출력하기 위해서는 " "대신 &nbsp를 출력한다.

갈무리

1주차보다 2주차에 들어서 더욱 정신이 없었던 것 같다.
뭔가 육체적인 피로보다는 잘하고 싶다는 욕심에 오는 정신적인 부담감이 컸다.

• ⭐️그 날 학습한 내용은 당일날 소화하고 정리하기⭐️
  - 가장 중요한 포인트. 미루다가 버거워지지 않기.
  - 그렇다고 너무 많은 내용을 하루만에 소화하려고 욕심내지 않기. 차차 실습을 통해 익숙해질 내용들도 분명 있으니 너무 부담갖지 말자.
• 스터디 운영 신경쓰기
• 개인 운동 유지