2021.12.23의 기록

매일 하루를 같이 하는 친구들.

- 오늘의 자체 평가 및 느낀 점 - 

-> 새벽에는 JS 강의를 더 수강했다. 이벤트 처리 전까지 함수를 사용하여 복사, 추가, 삭제를 이용해 자바스크립트 코드를 작성했다. 아직은 바닐라 JS 자체 개념이 낯설지만 계속 보고 쓰다보면 익숙해질듯 싶다. 어제 개념을 다시 한번 처음부터 정리해서 이해하는데 확실히 더 나아진 기분이었다. 완벽해질 때까지 반복 ㄱㄱ. 

-> 어젠 1시간 정도 더 일찍 잤다. 너무 피곤하더라.. 3일내내 2시 넘어서 자니까 피로가 누적되었나 보다. 집가면서 스터디원 형이 말하길 눈이 많이 충혈되었다고 하길래 그때 피로감이 확 느껴졌다. 무리하면서 시간을 버리진말고 앞으로는 퀄리티 깊은 새벽공부를 짧게 해야겠다는 생각을 했다.

아침에 일어나니 아주 피곤하다. 어찌된게 더 많이 자니까 더 피곤하다.. 오늘 아침 갈등도 여전하다. 나갈 것인가 집에 있을까. 1월부터 새벽 운동을 갈 생각인데 일어날 수 있을까..? 해야지 그래도

- > 자바스크립트 개념은 확실히 예습을 해서인지 어렵게 느껴지진 않았다. 하지만 열심히하면 무엇이든 가능하다고 믿는다.세미프로젝트 스터디원이 정해졌다. 생각만 하고 있다가 막상 닥치니 생각보다 팀플레이라는 것은 쉽지 않다. 1명은 시작과 동시에 나가고.. 여기서는 내가 팀장을 해야겠다고 생각했다. 그래야팀이 굴러가고 결과가 나올 것 같다. 생각보다 난관이 있을 것 같지만 혹독한 상황 속에서도 좋은 결과를 만들어야겠다.

---

- 오늘 공부 계획 -

• 자바스크립트 (뉴렉처) 강의 수강 및 실습 40~?
• 자바스크립트 강의 내용 복습 
• 쇼핑몰 구조 대강 분석 및 실제 사이트 들여다보기

---

- 공부 내용 -

자바스크립트

• CSL (Client Script Language) : 클라이언트의 브라우저 엔진에 의해 해석되어짐
• Web Document Reading >> HTML Parsing(DOM Parser - DOM Tree) >> JavaScript >> CSS Style 적용 >> HTML Rendering(페이지 출력) - 이벤트 발생 : 등록된 이벤트 핸들러 JavaScript 실행
• Script 태그 : 스크립트 언어를 사용하여 프로그램 작성하는 영역 제공 ⇒ script 태그가 여러개 선언 된 경우 순차적으로 실행
• 자바스크립트는 한 줄에 작성된 코드를 하나의 명령으로 인식하여 처리 ⇒ 명령 마지막에 ; 생략 가능
• 자바스크립트는 객체 지향 프로그래밍으로 객체를 이용하여 프로그램을 작성하며 객체의 속성(Property)과 메소드를 사용하여 프로그램 작성
• 자바스크립트는 브라우저를 window 객체로 표현하여 속성과 메소드 제공 ⇒ window 객체 표현 생략 가능
• 웹문서의 DOM Tree를 조작하는 경우 body태그의 마지막 자식 태그로 선언하는 것이 권장
• 태그의 onxxx 속성 (이벤트 속성)에 속성값으로 이벤트 처리 명령 작성 형식) onXXX="javascript:자바스트립트 명령; 자바스트립트 명령; ...; “ => javascript 영역(NameSpace) 표현 생략 가능
• 문자값 + 연산자 사용 시 문자값 결합 기능 제공
• 변수에 저장된 값이 없는 변수의 자료형은 undefined로 자동 설정
• 동일한 이름의 변수 선언 가능
• 변수는 선언하지 않아도 사용 가능
• 값이 저장되어 있지 않은 미선언된 변수 사용시 에러 발생
• var 키워드를 사용하여 변수 선언 - 변수 값 변경이 가능하며 재선언 가능
• let 키워드를 사용하여 변수 선언 - 변수값 변경이 가능하며 재선언 불가능
• const 키워드르 사용하여 변수 선언 - 변수값 변경이 불가능하며 재선언 불가능 ⇒ 상수 선언할 경우 사용
• var 변수는 함수를 기준으로 영역이 표시되지만 let, const는 영역으로 구분이 됨.

• 자료형

1. 문자형(String)
2. 숫자형(Number)
3. 논리형(Boolean)
4. 함수형(Function) : 명령(Statement)의 모임을 표현하는 식별자
5. 객체형(Object) : 속성과 메소드의 모임
6. undefined : 값을 표현할 수 없는 경우 사용되는 자료형

• 자바스크립트 연산자

1. 최우선 연산자 : () [] {} .
2. 단항 연산자 : + - ++ - - ! new typeof
3. 산술 연산자 : * / % + -
4. 관계 연산자 : > >= <= == === ≠ ≠=
5. 논리 연산자 : & & ||
6. 대입 연산자 : = *= /= %= += -=

• 자바스크립트 형변환

1. 자동 형변환
2. ⇒ 논리 값 연산시 숫자형 변환 후 연산 처리
3. ⇒ 플러스 연산자만 문자열 처리하고 나머지는 숫자로 형변환 후 연산 처리
4. 강제 형변환

• 자바스크립트 함수(Function)

1. 함수 : 값을 전달받아 처리하는 명령의 모임 - 기능 구현
2. 함수 선언 후 함수 호출을 통해 함수에 작성된 명령 실행 - 기능 구현
3. 함수는 선언 방법에 따라 선엄함수와 익명함수로 구분
4. 선엄 함수 : 함수명을 작성하여 선언하는 함수
5. 익명 함수 : 함수명을 명시하지 않고 작성하여 선언하는 함수 -이벤트 처리용
6. 함수는 반복 호출 가능
7. 변수에 함수(익명함수) 저장 가능 - 함수 변수
8. 선언함수는 함수 선언 전에 호출 가능 - 함수는 명령 실행 전 미리 선언 전 미리 생성

• 전역변수와 지역변수

1. 전역변수: 함수 외부에서 선언
2. 지역변수 : 내부에서 선언

• 함수의 매개변수

1. 함수의 명령 실행에 필요한 값을 함수 호출 시 전달받아 저장하기 위함
2. 매개변수는 var 키워드로 변수를 선언하지 않아도 지역변수로 처리
3. 함수의 매개변수에 차례대로 값을 전달해야 함수 호출
4. 함수 선언시 작성된 매개변수의 갯수보다 적은 갯수의 값을 전달하여 함수 호출 가능 = > 값을 전달받지 못한 매개변수에는 undefined 자료형의 변수로 표현 - 비정상적
5. 함수 선언 시 작성된 매개변수의 갯수보다 많은 갯수의 값을 전달하여 함수 호출 가능 ⇒ 매개변수에 차례대로 값이 전달되어 저장되며 나머지 값은 자동 미사용
6. 매개변수에 상관없이 함수명을 사용하여 함수 호출 가능
7. 함수에는 함수 호출 시 전달된모든 값을 저장하는 arguments 객체 (Array 객체 - 배열) 존재 자료형 : Object
8. arguments[index] : arguments 객체에 저장된 값을 표현 (배열 요소)

• Return

1. 함수를 종료하기 위한 명령 - 함수 내부값을 반환하는 기능 제공

• 내부함수(Inner Function)

1. 내부 함수 : 함수 내부에 선언된 함수- 선언된 함수 내부에서만 호출 가능
2. 동일한 이름의 함수 선언 - 기존 함수 덮어씌우기(OverWrite)

• 콜백함수(Callback Function)

1. 함수의 매개변수에 함수를 전달받아 저장하고 호출 함수에서 내부에서 매개변수로 전달받은 함수를 호출하여 실행
2. 함수명은 함수를 구분하기 위한 식별자
3. 함수명은 식별자로 내부적으로 변수처럼 처리 - 함수 저장
4. 자료형은 function
5. 함수를 선언하여 변수 저장 - 함수변수
6. 변수에 함수 저장 가능

---

- 스터디 계획 및 결과 - 

=> 자바스크립트 강의 내용 복습 

=> 자바스크립트 개념을 이용한 새로운 문제 출제 및 각자 풀어보기