Happy Programmer

1.매개변수를 사용할 것을 가정해 인자는 만들었지만 인자를 입력하지 않은 경우는 undefined로 에러가 나지만 매개변수를 parameter = parameter || '';등으로 미리 값이 없는 경우를 대비하면 기본값을 설정해줄 수 있다. ES6부터는 매개변수자리에 parameter = ''처럼 바로 넣어서 할당할 수 있다.

2.ES11에서 도입된 옵셔널 체이닝 연산자는 'something'?.value;라는 방식으로 사용되며 'something'이 undefined 또는 null이 아니라면 할당된 값(false, u0, -0, NaN, '' 등)을 우측에 배정된 메서드로 처리할 수 있다.

3.ES11에서 도입된 null 병합 연산자는 'something' ?? 'return value';같은 ??연산자로 사용할 수 있으며 좌항의 something이 null 또는 undefined인 경우 우측의 지정된 값(여기서는 'return calue'이며 자유롭게 설정 가능하다)을 반환한다. 이를 통해 에러로 대표되는 null, undefined의 경우에 우회할 에러처리를 미리 지정하기 편해졌다.

4.백준에서는 js를 지원하지 않는다.. 하지만 아래처럼 node.js를 이용해 풀 수는 있다고 한다.
var fs = require('fs');
var input = fs.readFileSync('/dev/stdin').toString().split(' ');
var a = parseInt(input[0]);
var b = parseInt(input[1]);
console.log(a + b);


5.백준에서 문제를 푸는데 풀리지 않는 이유를 모르겠다. 위의 방식대로 값을 받아온다고 생각하고 입력값은 x1,y1,r1,x2,y2,r2순서로 1 1 1 1 1 5 이런 방식으로 제공된다고 한다.
input까지는 잘 나눠졌으며 0~5번까지 index가 각자 순서대로 잘 입력되었고 
아래의 함수는 심지어 잘 작동된다( fs와 input 부분을 제외한 랜덤값 몇가지를 개발자도구 콘솔에 찍어봤다.)

const input = require('fs').readFileSync('/dev/stdin').toString().split(" ")

var fs = require('fs');
var input = fs.readFileSync('/dev/stdin').toString().split(' ');
var x1 = parseInt(input[0]);
var y1 = parseInt(input[1]);
var z1 = parseInt(input[2]);
var x2 = parseInt(input[3]);
var y2 = parseInt(input[4]);
var z2 = parseInt(input[5]);
var length = Math.sqrt((x1-x2)**2 + (y1-y2)**2)
var abs = Math.abs(z1-z2)
var adds = z1+z2
var result = 0
if(x1===x2 && y1===y2 && z1===z2){
   result = -1
}
else if(length < abs){
     result = 0
        }
else if(length === abs){
      result = 1      
        }
else if(length < adds){
      result = 2        
        }
else if(length === adds){
     result = 1        
        }
else if(length > adds){
     result = 0        
        }
console.log(result)

백준으로 하고 싶지만 node를 추가적으로 학습해야 하는 부분이 조금 아쉽다.
또한 node에서 어떤 부분이 문제가 되었는지는 알 수 없기 때문에 기능적으로 작동을 해도 여기에선 작동을 하지 않는 이유를 정확히 알 수 없다.  테스트케이스를 작성해서 제공하는 문제풀이에 적응된 것 같다.

사실 이렇게 답답해하다가 비교하기 전 까지는 테스트케이스를 만들어서 비교해줬다는 사실조차도 제대로 인지하지 못했다.

정말 아는 만큼 보인다..

추가적으로 확인해본 결과 거리가 0으로 점인 경우는 1이라는 것 같은데 그 조건을 추가해도 달라지는 모습이 보이지 않는다..

데일리코딩20까지 풀었으나 딱히 새로운 기법은 별로 추가되지 않은 것 같아서 추가하지 않고 network부분도 추가하지 않다보니 회고에 적을 내용이 부실해보인다.

사실 복습보다는 예습들에 가깝지만 문제풀이나 딥다이브는 이미 한 자바스크립트와 관련이 많기 때문에 복습(어차피 주말엔 복습이기도 하고)으로 넣어버렸다.

1.빈 문자열에 배열을 더하면 배열이 흩어져서 나온다
 ex) [1,2,3,4,5] + '' = '1,2,3,4,5'

2.불리언 값을 요구하는 위치(조건문 등)에 들어간 값은 암묵적으로 불리언값(true/false)로 변환되어 평가되며 문자열은(빈문자열 제외) true로 변환되고 객체는 빈배열, 빈객체와 상관없이 모두 true값으로 반환된다.

3.parseInt 또는 parseFloat는 문자열만 숫자로 변환할 수 있다.

4.다른 타입에 문자열을 더해주는 경우 문자열로 변환되지만 다른 값 없이 문자열의 앞에 +를 위치시켜 결과를 받는 경우 숫자값으로 변환된다.

5.promise를 then에서 이용하기 위해서는 return으로 값을 반환해줘야하며 then(then은 값을 자동으로 리턴한다.)은 그 뒤로 promise가 아니라도 연속해서 then으로 값을 받아 사용할 수 있다.

6.리액트에서는 map, filter를 사용하는 컴포넌트를 자주 이용하는 것이 가독성이 좋다.

7. 컴포넌트단위로 구분해서 JS파일을 만들어주고 동일한 파일명으로 css파일을 만들어 각자 css를 관리해주는 것이 유지보수 및 이식성에서 뛰어난 면을 보인다.

8.자주 언급되었지만 key값은 객체의 id를 최우선으로 선택하며 그 뒤의 대안은 index로 사용해야한다. 만약 이 값에 랜덤값 지정 함수를 사용하려고 한다면 중복값 체크를 통해 이용해야 하는데 작은 프로젝트에는 부담없이 사용할 수 있지만 규모가 커질수록 어마어마한 데이터? 낭비가 되기 때문에 면접에서 즉사기(본인이 key값을 매스랜덤으로 제작했거나 면접관이 키값에 매스랜덤을 사용하는건 어떤가요? 라고 질문했을 때 그냥 긍정하고 넘어가면)로 통한다고 한다.

9.리액트에서 <Tweets />등으로 컴포넌트를 불러올 경우 그 컴포넌트 내부값은 return으로 반환을 해야만 제대로 컴포넌트를 불러올 수 있다.

10.Route를 제대로 사용하기 위해서는 최상위에 BrowserRouter이 있어야 하며 그 내부에는 Routes로 감싸진 Route들이 있어야 한다. 또한 Route는  <Route path="경로" element={<컴포넌트 />} /> 형태로 이루어져 있어야만 그 주소값과 컴포넌트가 매칭된다. 또한 루트는 내용물 최하단에 이동시켜도 상관없는데 그 이유는 <Link to="경로">html 내용</Link>와 같은 형식으로 링크부분을 내부에 따로 작성하기 때문이다. 
또한 이런 기능들을 사용하려면 라이브러리(npm install react-router-dom@^6.3.0)를 설치해준 후 (import { BrowserRouter, Routes, Route, Link } from "react-router-dom")처럼 수입을 해줘야 한다. 
(컴포넌트마다 분리된 경우 그 컴포넌트에서 쓰는 것만 수입해도 괜찮다. ex. import{Link} 단일사용 등 )

복습을 하려고 보니 유사한 기능을 큰 무리없이 제작할 수 있을 것 같다.

아무래도 첫 적용이라 힘들었고 배운 내용을 조금만 수정해서 적용하는 방식으로 쓰는 경우가 대다수이기 때문에

복습이 생각보다는 적은 내용인 것 같다.

어느정도 일관되게 이어져온 규칙같은 느낌으로 작성하다보니 굳이 빼놓거나 적지 않은 정보들이 시간이 지날수록 조금씩 잊혀져가는 느낌이 드는데 회고를 하기 위해 작성하던 제목습관이 족쇄가 되서 복습이나 회고에 마이너스가 되는 이상한 일이 벌어진 것이다...

굳이 복습, 예습 등의 제목에 신경 써 내용을 적기보다는 그날 배운 다른 학습내용을 부담없이 추가해야겠다.

1.let a = b || c a에 b를 할당하지만 b가 만약 undefined라면 c를 할당해준다.


2.let a = 'b',
c = 'd' 라는 경우 줄이 바뀌더라도 ','표시가 있기 때문에 같은 let으로 선언된 것으로 해석해야 한다.


3.  if (_end === undefined || _end > arr.length) _end = arr.length;
위 함수와 같이 결과가 짧은경우?(모름) 중괄호를 생략해도 되는 것 같다.


4.
_.uniq = function (arr) {                // 0 1 1 2
  let result = [];                        //
  _.each(arr,function(element) {         //each는 [0,1,2,3,1,4,5]배열을 전부 하나씩 돌린다.
    for(let i = 0 ; i < result.length ; i++){  //el = 0,1,2,3 1
      if(result[i] === element){
        return false    //@@@@@이부분에서 중요하다 return false를 하니까
      }                 //동작이 멈춰서 아래 push가 기능하지 않는다!
    }
    result.push(element)              //result = [0,1,2,3,]
  })
  return result
};


5.클래스 및 상속은 아래와 비슷한 방식으로 제작한다.
 1단계 = Characters로 캐릭터 틀 제작
 class Characters​{             //캐릭터 클래스(틀) 생성
  constructor(nameValue, atkValue, defValue, hpValue){ //컨스트럭터 내부 이름, 공격력,방어력,체력 설정할 매개변수 입력
   this.name = nameValue
   this.atk = atkValue ;   //3가지 인자 각각 atk, def, hp 할당
   this.def = defValue ;
   this.hp = hpValue;
  }
  healHp(heal){
   console.log(`${this.name}은 hp를 ${heal}회복했다. ${this.hp} -> ${this.hp + heal}`)
   return this.hp += heal
 }
  loseHp(wound){
   console.log(`${this.name}은 ${wound}의 피해를 입었다. ${this.hp} -> ${this.hp - wound}`)
   return this.hp -= wound
 }
 }

 2단계 = Secondary_class로 자식생성
 class Secondary_class_mage extends Characters{ // 캐릭터에서 상속받은 2차직업 생성
  constructor(nameValue, atkValue, defValue, hpValue, mpValue){ // 이름,공격력,방어력,체력,마력 매개변수 받아오기
   super()  //부모에게서 값 받아오기
   this.atk = atkValue;
   this.def = defValue;
   this.hp = hpValue;
   this.mp = mpValue;
 }
 
  fireBall(){
   if(this.mp>=20) {
   console.log(`${this.name}은 fireBall로 50의 피해를 입혔다. ${enemy.hp} -> ${enemy.hp - 50}`)
   return this.mp -= 20
   }
  else{
   console.log(`fireBall을 사용하기에는 마나가 ${20 - this.mp}만큼 부족합니다.`
  }
 }
 
 meditation(){
  console.log(`${this.name}은 ${this.mp}의 마나를 회복헀다. ${this.mp} -> ${this.mp + 50}`)
  return this.mp += 50
 }

} 
이런 느낌으로 값 또는 메서드를 추가할 수 있다.
제작하다가 생각해보니 체력과 마력?은 최대치로 할당받은 후 내부값은 최대치가 넘지 않는 선에서 0~최대치까지 이동하는 현재체력/마력값이 필요하고 지력(int)값을 통해 마법(스킬)데미지 증가도 고려할만하다. 
물론 게임을 만들려는 것이 아니기 때문에 개선은 없다!
새로운 캐릭터(클래스명이다)를 추가하려면
const userName(이름부분) = new Characters​(userName, 20, 10, 100)
//nameValue, atkValue, defValue, hpValue 순서로 만들었다.
//healHp, loseHp메서드를 호출할 수 있어 healHP(30)을 사용하면 30의 hp가 증가한다(아마?)


6. 아래와 같은 방법으로 부모의 메서드를 수정해서 가져올 수 있는 것 같다.
class Lion extends Cat {
  speak() {
    super.speak();
    console.log(`${this.name} roars.`);
  }
}

프로미스 등 비동기에 관련된 부분은 월,화 2일간 더 진행될 예정이기 때문에 내용을 같이 정리해야 할 것 같다.

복습하다가 캐릭터 추가에 괜한 시간을 쓴 것 같기도 하다..

1. pipe함수는 아래와 같이 사용할 수 있다.

function pipe(...funcs) {     //투입될 함수의 갯수를 알 수 잆기 때문에 배열로 받아온다. (... funcs는 funcs라는 함수 배열을 풀었다는 의미)
return function(num){ //함수를 리턴해야 한다는 의미는 return function을 사용하길 원하는 것이고 매개변수는 num을 쓸 것이다(아니라도 상관은 없다 변수니까)
let result = funcs[0](num);   //첫번째(index 0) 함수값 저장
 for(let i = 1 ; i < funcs.length ; i++){ //두번째 함수부터 최종함수(길이-1 = 갯수)까지의 반복시행
   result = funcs[i](result);            //이전 함수의 결과값을 다음 함수에 넣고 결과로 저장
 }
 return result       //for문으로 모든 함수의 시행이 끝난 후 결과값을 반환한다.
}
}


//함수를 리턴해야 한다는 의미는 return function을 사용하길 원하는 것이고 매개변수는 num을 쓸 것이다(아니라도 상관은 없다 변수니까)
//일단 얼마나 많은 함수가 나올지 모르지만 배열이니 0 부터 funcs.length보다 작은 수 까지 반복하면 되고
//funcs[0](num)이 되는지 모르겠지만 외부에 하고  위에 0부터를 1부터로 고치면 될 것 같다.
// 그리고 저 result를 최종적으로 리턴한다 


2. 반복문을 사용할 때 간결하게 사용하자. 
let el of arr /  let el in obj  자주 사용하긴 하지만 이번 주 작성한 내용중 배열 내부를 전부 조회하는 경우에도 i=0 ~ i<arr.length를 사용하는 모습이 종종 발견된다.
전체조회 of 또는 in을 사용하는 편이 가독성도 더 좋을 것 같다.


3.필터와 유사한 기능을 만들고 싶은 경우 for문 of를 사용해 전체 조회를 하고 내부에서 result등의 신규 배열에 true일 경우 push해주는 방식으로 만들 수 있다.


4.전체적으로 다시 보니 문제가 어려운 것은 아니었고 filter, map, reduce의 사용법에 대한 학습 수준이었던 것 같다.. 나중을 위해 간단하게 정리하자면
arr.filter(boolean반환하는 함수) = true값인 값만 통과한 객체/배열
arr.map(함수) = 함수가 적용된 값들로 이뤄진 배열 또는 객체?(객체[키] 예를 들면 obj.age 같이 오브젝트 내부에 있는 객체의 나이값에 +1씩 해준다던지? 하는 경우 사용)
arr.reduce(함수(축적값,현재값),초기값)으로 설정하며 acc축적,cur(현재) 등으로 적어두며 초기값은 곱셈인 경우 1, 덧셈 및 뺄셈의 경우 0, 스트링값의 조절인 경우 '', 배열의 변경등에는 []등으로 초기값을 잡아주며 초기값을 적지 않은 경우 축적값에는 첫번째 값이 들어가기 때문에 주의해야 한다(예를 들어 배열에 넣고 싶은데 배열이 아닌 값이 첫번째라면 값에다 값을 push..?? 그런 이상한 일이 벌어질지도)


5. reduce의 사용법 중 하나인 비교는 아래와 유사하게 작동한다.
const getLongest = arr.reduce(function(acc,cur){
  if(acc.length < cur.length){ //기존 길이(또는 조건)보다 현재 길이(또는 조건이) 더 큰 경우(또는 원하는 수치인 경우)
    acc = cur //축적값(비교대상)에 현재값을 넣어준다.
  }
  return acc  //최종적으로 결정된 축적값을 출력(가장 큰, 작은, x와 같은 등을 해결해주며 x의 등장 횟수등으로 사용도 가능한 만능 메서드)
},'')
         

6.분해할당을 자연스럽게 쓸 수 있게 연습해야겠다. 그 전에도 몇번 사용했지만 이번에는 페어분이 사용하자고 해서 의아했지만 사용하고 넘어갔던 것 같은데(@@@를 보면?) 지금 보니 너무 쉽게 이해할 수 있었다. 하지만 언제 헷갈릴지 모르니 다시 보자
function joinArrayOfArrays(arr) {
  return arr.reduce(function(acc,cur){           //acc는 빈배열, cur은 arr의 배열이 들어갈 예정이다.
   acc.push(...cur);  //@@@@@@@  //그러므로 그 배열을 뜯어서 다 넣어버린다!
   return acc
   },[])        //빈배열을 초기값으로 했기 때문에 push가 자연스럽다.
}        //참고로 이 문제는 concat으로 쉽게 풀 수 있었다..

고차함수도 생각보다 할만한 것 같다.

과정이 너무 힘들어서 그렇지 과정을 버티기만 하면 그 전 단계는 가능해진다.

내일 과연 이번주 내용을 다 복습할 수 있을까?..

1. 유효성검사는 pull reqest를 하지 않았기 때문에 작성한 기록들을 비교할 수 없었다. 내가 작성한 내용면에도 이미 컴포넌트를 사용할 때 Document.querySelector()외에 많은 기능들을 사용했기 때문에 추가적으로 봐야 할 부분은 유효성검사를 제외하고는 딱히 없는 것 같았다. 유효성 검사 또한 직접 작성보다는 검색 후 필요한 부분을 사용하는 방식으로 쉽게 이용할 수 있기 때문에(규칙을 알고 있으니) 회원가입페이지는 추가적으로 보충할 내용이 보이지 않았다.


2.submit.addEventListener("click", (event) => { event.preventDefault()}처럼
특정 위치에서 특정 이벤트를 받아올 수 있으며 prevent를 통해 새로고침을 막아 적용을 하고 console.log를 이용해 어디까지 잘 작동하는지 파악할 수 있다.


3.추가적으로 넣었으면 좋았을 기능들(39기 나만의아고라스테이츠만들기 제출본 참고)
  1.토글기능(hide클래스와 css를 다시 이용해 구현할 수 있을 것 같다.)
  2.hide 추가 부분은 작동여부와 제출시 초기화부분에도 적용해줘야 한다.
  3.페이징 기능 추가는 render함수에 ul만 넣는 것이 아니라 시작,종료부분의 페이지 숫자를 추가해 줘야 하는 것 같다. 또한 페이지 내부 콘텐츠가 x개라면 a~b 다음 페이지는 a+x~b+x로 적용되는 함수를 써줘야 한다. 
  4.hover기능을 추가해 시각적인 효과를 추가(사이즈 확대 또는 색 변경 등)
  5.input영역 sticky적용을 통해 내용을 보던 중 질문을 작성할 수 있게 추가
  6.배치를 단순히 제공된 방식으로만 사용할 게 아닌 css적 요소들을 잘 이용해 좌우정렬 또는 사각형 원형 또는 블로그식 정렬 등 발전의 여지를 고려하기
  7.내용이 너무 길어져 넘어가는 경우 말줄임표 처리(if (obj.title.length < 40),  contentTitle.textContent = `${obj.title.substring(0,40)}...`방식으로 if문으로 길이를 받아온 후 백틱 내부에 0~x까지 받아온 값에 ...을 붙여 줄여줄 수 있다.)
  8.어느정도 투명도를 부여하고 싶다면 rgba(255,255,255,(0~1사이값);을 사용할 수 있다. 앞 3가지는 흰색을 나타내고 뒤 0~1은 흰색의 사용도(투명도)의 역순으로 1일 경우 일반 색상을 사용하는 것과 같으며 0일 경우 사용하지 않은 것과 같다. 0.1이하가 깔끔하며 쉐도우와 함께 사용할 경우 더 예쁜 디자인이 나온다.
  9.box-shadow: -1px 5px 10px 1px rgb(0 0 0 / 10%); 0이 아닌 값과 퍼센트를 수정해 쉐도우 효과를 예쁘게 줄 수 있다. 투명도와 함께 사용할 경우 더 세련된 디자인이 나온다.
  10.overflow: auto를 통해 스크롤 기능을 구현할 수 있다.
  11.@@로컬스토리지 부분 수정 확인하기

신기하게도 수요일에 배울 때만 해도 어려웠던 위치지정등에 대해서 너무 쉽게 생각할 수 있게 됬다.

당일 복습과 다음날 과제에서 다시 이용 그리고 그 과제를 복습하는 과정에서 계속해서 반복적으로 학습된 것 같다.

아직까지 처음부터 만들라고 하면 당황스럽겠지만 기초적인 뼈대가 있는 경우 내부 살을 붙이는 것 정도는 조금 익숙해진 것 같다.

1.koans를 복습하면서 보니 introduction에 나오는 단순한 문제들( 1+1 과 빈칸을 비교하는 문제 반복)을 대충 문제 푸는 방식 설명으로 이해하고 넘어갔는데 지금 다시 보면 테스트케이스를 작성하는 요령에 대해서 설명하는 것 같다.
예를 들어  expect(a === b).to.be.true; 에서 a와 b를 비교하는 방식과
    expect(1 + 1).to.equal(b); 와 같이 a,b를 할당하지 않고 함수 내부에 넣거나 또는 선언된 변수를 바로 넣어 비교하는 명령어(사용법은 유사하긴 하다)들을 사용하는 법을 풀어서 설명하고 있다.


2.쉬워 보인다고 빠르게 넘기면서 코드를 작성하는 실수를 반복하지 말자. 유사한 내용이 두세번 반복될 때는 무언가 숨은 의도(숨기지도 않았지만)가 있는지를 확인해야 한다.
예를 들어 .equal이 아닌 .toString이 붙어있다면 결과값과 비교돼야 할 값은 number타입이 아닌 string타입('2')을 넣어줘야 한다.


3.당연한 내용이지만 한번 정리하자면 string타입의 값은 더할 경우 다른 타입의 값들도 string으로 변환되어 과정이 처리되지만 +기호가 아닌 다른 연산기호를 사용할 경우 그 내부 값들이 숫자로 변형되어 처리된다. 주의할 점은 이때 숫자가 아닌 값이 number타입으로 변형될 경우 계산 결과는 NaN이 나오게 된다. 
1 + '1' = '11'
1 - '1' = 0
11 * '1' = 11
1 + '하나' = '1하나'
1 - '하나' = NaN
3 - true = 2      // true = 1
3 + false = 3     // false = 0
3 * false = 0


4. 장황하게 설명했지만 아래 설명과 같이 outer가 먼저 실행된다면 내부 지역변수 age가 24로 설정된 상황에서 26으로 재할당을 해주기 때문에 변수는 27이 나와야 맞다.
자세히 보니 outer 내부에서 물어본 값이기 때문에 inner 함수는 outer지역변수로 선언이 되어있는 것이라 바로 사용하는게 맞다. 원하는 값은 지역변수 24->26인 26이다.
아래 /// @@@ ///내용의 경우 본인이 이해할 때 어디가 헷갈렸는지 기록하기 위해 남겨둔다.

///아래의 경우 지역변수에 대한 이해가 필요하다.
당연하게 innerFn()이 위에서 보이기 떄문에 위에 있는 innerFn만 작동시켜야 하는데
이상하게 그 상위에 있는 outerFn도 작동된 결과값이 나와버린다. 왜 그럴까?
처음 봤을 때는 호이스팅과 스코프의 복합작용이라고 생각해서 호이스트를 검색해봤다.
하지만 hoisting은 함수 선언문(function x =(){})에만 적용될 뿐 함수표현식(let a = function(){})에는 적용되지 않았으며 함수표현식의 선언이 호출보다 아래에 있는 경우 ReferenceError가 발생한다. 하지만 같은 지역의 경우에만 호이스팅이 되지 않는 경우 문제가 생기는 것이고 아래와 같이 하위지역에서 호출한 변수(또는 함수)는 지역변수에서 찾을 수 없을 경우 상위지역으로 한단계씩 탐색 범위를 넓히기 때문에 global(예시)변수인 innerFn을 찾을 수 있었고 그것을 적용해  함수 내부에서 실행된 global함수호출이 정상적으로 작동할 수 있었다. 아래의 함수의 주석을 보면 더 쉽게 이해할 수 있다.///

 let age = 27;           //global변수 age
    let name = 'jin';    //global변수 name
    let height = 179;    //global변수 height

    function outerFn() { //global변수? outerFn 함수선언식
      let age = 24;      //지역변수 age 선언
      name = 'jimin';    //name탐색 후 지역변수 선언이 없어 global변수 name값 재할당
      let height = 178;  //지역변수 height 선언

      function innerFn() {  //closure 함수 선언
        age = 26;           //지역변수 age가 없어 상위 outer 지역변수 age에 재할당
        let name = 'suga';  //지역변수 name 선언
        return height;     //함수 실행시 height값 반환(상위 outer 지역변수 height)
      }

      innerFn();     // innerFn함수 실행(탐색시작) -> outer지역변수 innerFn실행
      
 @@(이건 틀린 설명 innerFn()이 outer밖에 있다고 해도 이상하다 )@@innerFn 지역변수 탐색(없음) -> 상위 outer 지역변수 탐색(없음) -> global변수 탐색(innerFn = outerFn()) -> 함수 outerFn실행@@@@@@@@@@@

      expect(age).to.equal(26);        //24(지역선언) -> 26(innerFn 재할당)
      expect(name).to.equal('jimin');  //'jin'(global선언) -> 'jimin'(outer 재할당) -> innerFn 내부 지역변수 name 재선언(outer에서 사용 불가)->'jimin'

      return innerFn; 
    }
 
 const innerFn = outerFn(); //global 변수 innerFn에 outer함수 할당(위에서는 사용하지 않는다)


5. obj.length 값은 undefined다. array가 아닌 obj에는 .length를 사용할 수 없다. 또한 배열에는 사실 키값(0,1,2,3등 순서)이 부여된 obj라는 느낌이기 때문에 obj[1]같은 키워드를 사용한다고 해도 키값을 순서에 맞는 숫자로 직접 지정해 준 obj가 아닌 경우 순서(0~n)를 []에 입력해도 그 순서의 값은 받아올 수 없다.


6.객체 내부의 value를 받아오기 위해서는 key를 사용해야 하는데 사용법인 닷노테이션과 브라켓노테이션을 주의해서 사용하자. obj.key의 사용은 당연하기 때문에 헷갈릴 일이 없지만 obj['key']는 헷갈릴 여지가 충분하다. 닷노테이션은 함수등 내부에서 사용할 경우 이상하게 사용되는 경우가 많기 때문에 백틱 또는 함수내부에 호출 등의 사용시에는 브라켓노테이션(obj['key'])를 이용하는 습관을 가져야한다.


7.얕은 복사와 깊은 복사가 있는데 객체나 배열을 복사하는 경우 대부분은 얕은 복사(주소값만 받아오기)로 
원본파일 또는 복사파일 중 어떤 것을 수정해도 모두가 변경되지만(사실은 모두가 단 하나의 저장소의 위치를 가르키고 있을 뿐이다) 깊은 복사를 하는 경우에는 새로운 객체를 새로운 heap에 할당하여 만들기 때문에 서로 다른 객체 또는 배열이 된다. 문제는 깊은 복사를 한다고 해도 객체의 내부에 있는 객체 또는 배열의 키값은 주소로 복사를 하기 때문에 객체의 내부에 있는 데이터를 지울 경우 객체의 객체 내부 정보는 날아가버릴 수 있다.
(이전에 작성한 내용이지만 같은 부분을 또 틀려버렸다..)


8.아래와 같은 배열이 있는 경우 1,2번째 변수만 지정한 수 array와 대입시키면 1,2번째 변수만 빼올 수 있다.
const array = ['code', 'states', 'im', 'course']

    const [first, second] = array
    expect(first).to.eql('code')
    expect(second).to.eql('states')


9.@@@ 언젠간 사용할 것 같아 다시 한번 기억해야 할 것 같다.
//@나머지부분은 다 객체로 떄려박힌다는 사실을 잊지말자///
  it('rest/spread 문법을 객체 분해에 적용할 수 있습니다 #1', () => {
    const student = { name: '최초보', major: '물리학과' }
    const { name, ...args } = student

    expect(name).to.eql('최초보')
    expect(args).to.eql({major: '물리학과'})
  })
  
  
@@@@@@@//키값들만 저장된 객체도 아닌데 getSummary가 course를 불러서 사용한다는 점이 상당히 신기하다. 만약 값이 반대였다면 이해할 수 있겠는데 어떻게 키(양자역학):값(미지정)으로 설정되어 있는데 값을 호출해서 키를 받을 수 있을까?..@@@@@@@@@@@@@@@

  it('rest/spread 문법을 객체 분해에 적용할 수 있습니다 #2', () => {
    const student = { name: '최초보', major: '물리학과', lesson: '양자역학', grade: 'B+' }

    function getSummary({ name, lesson: course, grade }) {
      return `${name}님은 ${grade}의 성적으로 ${course}을 수강했습니다`
    }

    expect(getSummary(student)).to.eql('최초보님은 B+의 성적으로 양자역학을 수강했습니다')
  })


/// 이런 여러가지 중간 중복값들이 설정될 경우 후분위에 적힌 내용이 최종적으로 시행되기 때문에 재할당이 되어버려 name은 '박해커', age는 20이 된다
    const changedUser = {
      ...user,
      name: '박해커',
      age: 20
    }

10. DOM에서 알아야 할 부분은 앞에 작성한 DOM부분을 참고했다. 

document.createElement('div')로 div태그쌍을 만들 수 있으며 
 const tweetDiv = document.createElement('div')로 tweeDiv라는 div요소를 만들 수 있다
 하지만 이는 연결이 되어있지 않기 때문에 별개의 상태이다.
 연결은 APPEND로 할 수 있다.

DOM으로 HTML 엘리먼트의 정보를 조회하기 위해서는 querySelector의 첫 번째 인자로 셀렉터(selector)를 전달하여 확인할 수 있습니다. 셀렉터로는 HTML 요소("div"), id("#tweetList"), class(.tweet) 세 가지가 가장 많이 사용됩니다.
  const oneTweet = document.querySelector('.tweet') //클래스 이름 tweet 조회
  const tweets = document.querySelectorAll('.tweet')//tweet 인 모든 HTML요소를 유사 배열로 조회
  const getOneTweet = document.getElementById('container')//에전방식으로 조회

oneDiv.textContent = 'dev'; //추가가 아닌 변경이라고 할 수 있다.
 oneDiv.classList.add('tweet')//add사용으로 class tweet를 추가했다.

container.append(tweetDiv)//예시용 생성 후 
 tweetDiv.remove() // 이렇게 append 했던 요소를 삭제할 수 있다.
 document.querySelector('#container').innerHTML = ''; //이렇게 콘테이너의 자식을 모두 지울 수 있다.

document.body.append(tweetDiv)로 div요소를 body요소에 추가할 수 있다 
 생성한 tweetDiv 를 container 에 넣기 위해서는, container 를 먼저 찾아야 합니다
 const container = document.querySelector('#container')//콘테이너 위치 찾기
 const tweetDiv = document.createElement('div')       //div태그 만들기
 container.append(tweetDiv) //div 콘테이너에 부착
 const span = document.querySelector(‘span’);  //span찾기
 const divB = document.querySelector(‘.b’);    //.b클래스 찾기
 divB.appendChild(span);                       //.b클래스의 자식으로 부착 (위와 같은 느낌)

복습도 쉽지는 않다.

koans를 복습하고 DOM을 복습했는데 DOM은 틀린 부분이 딱히 있거나 문제를 풀지 않았기 때문에 정리한 요소를 다시 읽어보며 복습을 했다. 또한 유효성검사, 아고라스테이츠만들기에도 DOM을 이용한 경우가 많기 때문에 이 부분에서는 딱히 더 회고할 일을 찾기가 쉽지 않았다.

--객체
1.대상을 비교해 참 거짓을 판별할 때 '타입'형태와 비교할 때는 typeof를 반드시 사용해 줘야 하며 배열과 null값 또한 object로 표현되기 때문에 만약 입력에 null 또는 array가 있다면 예외처리를 해줘야 한다.

2.몇번 언급됬지만 `${}1234-5678` 백틱 사용에 대한 친숙도를 높여서 자연스럽게 변수들이 필요한 문자열 반환에는 백틱을 바로바로 떠올릴 수 있도록 해야곘다.

3.obj라고 겁먹지 말자! Object.keys()를 사용할 경우 ()내부에 들어간 obj의 모든 문자열 속성으로 구성된 배열을 반환한다. 이때 .length를 사용해 배열의 길이로 속성의 갯수를 알 수 있다.

4.궁금한 점이 생긴 경우 MDN등에서 메서드를 찾아보며 위아래로 쭉 훑어보자 특정 기능이 있다는 사실만 알아도 개선할 수 있는 코드들이 상당히 많다.

5.원시 자료형(string, number, null, undefined, boolean 다섯가지와 bigint, symbol 두가지 총 일곱가지 타입)을 변수에 할당할 때는 하나의 데이터(값)만 저장하지만 참조 자료형(object,array,function 등)을 변수에 할당할 때는 변수에 값이 아닌 그 데이터가 저장된 주소(heap)을 저장한다.

6. 위 예시와 같이 주소가 할당되기 때문에 console.log([1,2,3] === [1,2,3]);의 경우 false가 나온다.
[1,2,3]이 생성된 후 [1,2,3]을 다시 생성할 경우 원시값이라면 값을 비교하지만 배열은 값이 아닌 주소(heap의 위치)값을 저장하기 때문에 선언된 서로 다른 선언된 heap의 비교를 하므로 true가 나올 수 없다.

--스코프
7.@ for문의 let i에 대해서도 let을 적지 않아도 작동하는 것에 대해서 의문을 가졌는데 알고보니 이것은 for문 내부에 지역선언이 되는 것이었다. 그것을 확인할 수 있는 간단한 방법으로는 전역상수 const a = 1;을 선언하게 되면 for(i=1 ~~~~) 에서 상수는 변경할 수 없다고 나온다. 또한 let a = 1;로 선언할 경우 for( i = 1; i < 5; i++){}로 for문을 만든 경우 i는 4번의 재할당(1,2,3,4)을 통해 4로 변경된다. 
요약하자면 for문 내부에는 지역변수로 선언을 해야 하기 때문에 let을 사용해야 한다.

8.화살표 함수는 함수 스코프가 아닌 블록 스코프지만 아래와 같은 상황에서는 함수와 같이 처리된다.
let = 재할당 가능, 재선언 불가능
const = 재할당 불가능, 재선언 불가능
var = 재할당 가능, 재선언 가능, 블록스코프(화살표 제외)무시!
사실상 var선언을 제외하면 함수스코프와 블록스코프에 대한 차별을 본 적이 없는데 굳이 함수를 강조하는 부분에 대해서는 더 알아봐야 할 것 같다. @@@@@@@@@@@@@@@@@@@@@@@@

--클로저
9.@@xx@@@틀린것@@@클로저 내부에 변수를 선언하고 계속해서 이용해도 저장이 되는 가장 큰 이유는 let으로 선언을 했기 때문에 그 함수가 재 호출된다고 해도 let이 이중선언(내부에서)되지 않기 때문인 것 같다. 만약 let이 아닌 재할당을 사용한다면 그 시점에서 그 값으로 초기화가 되기 때문에 다시 사용할 수 없을 것이다.
@@@ 위의 생각은 부분적으로는 맞을 수 있지만 사실은 아니다. 아래 클로저 문제를 자세히 보니 var로 선언될 경우에도 같은 방식으로 되지만 var는 재선언이 가능하기때문에 자세히 살펴보니 클로저는 내부 함수만을 작동시키기 때문에 처음 함수가 구동되는 시점에서의 외부함수 선언값만 있다면 let이든 var든 재선언이든 상관없이 함수 내부의 함수(클로저)만 구동되는 사용방식이라 변경된 지역변수만 계속해서 수정할 수 있다.


10.클로저 사용 예시: 클로저를 통해 커링(currying, 함수 하나가 n개의 인자를 받는 대신 n개의 함수를 만들어 각각 인자를 받게 하는 방법), 클로저 모듈(변수를 외부 함수 스코프 안쪽에 감추어, 변수가 함수 밖에서 노출되는 것을 막는 방법) 등의 패턴을 구현할 수 있습니다.

클로저의 단점: 일반 함수였다면 함수 실행 종료 후 가비지 컬렉션(참고 자료: MDN '자바스크립트의 메모리 관리') 대상이 되었을 객체가, 클로저 패턴에서는 메모리 상에 남아 있게 됩니다. 외부 함수 스코프가 내부 함수에 의해 언제든지 참조될 수 있기 때문입니다. 따라서 클로저를 남발할 경우 퍼포먼스 저하가 발생할 수도 있습니다.

자바스크립트는 가비지 컬렉션을 통해 메모리 관리를 합니다. 객체가 참조 대상이 아닐 때, 가비지 컬렉션에 의해 자동으로 메모리 할당이 해제됩니다.


11.아래의 함수는 일반적인 모듈인데 사용법은 다음과 같이 분해할 수 있다 (주석으로 보기)
<!DOCTYPE html>
<html>
<body>
  <button class="toggle">toggle</button>  //토글버튼에 토글 클래스 넣어주
  <div class="box" style="width: 100px; height: 100px; background: red;"></div> //css

  <script>
    var box = document.querySelector('.box');
    var toggleBtn = document.querySelector('.toggle');

    var toggle = (function () {
      var isShow = false;   /// isShow 초기화 (이 부분이 지역변수가 된다)
      
      return function () {   // 이 함수가 클로저가 된다
        box.style.display = isShow ? 'block' : 'none'; //삼항함수라는데 실행같다..

        isShow = !isShow;   // isShow가 반대로 바뀐다 true or false
      };
    })();

    toggleBtn.onclick = toggle; //토글버튼 클릭시에 함수 작동 
  </script>
</body>
</html>


--ES6
12. spread/rest 문법이라고 불리지만 요점은 하나다 ...이 마법의 점으로 여러개의 인자, 파라미터를 대충 쓸 수 있다. ...x를 사용하면 x배열이 각자 흩어져 각자의 인자로 들어가고 파라미터에 ...x를 넣으면 입력하는 x배열에 따라 변수가 그만큼의 갯수가 들어간다는 편리한 문법이다. 
let lyrics = ['head', ...parts, 'and', 'toes']; //(합치기)

arr1 = [...arr1, ...arr2]; //(합치기)

let arr2 = [...arr]; //(복사)

let obj1 = { foo: 'bar', x: 42 };
let obj2 = { foo: 'baz', y: 13 };
let mergedObj = { ...obj1, ...obj2 };  //(병합)(concat)

------------------------------------------------
function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a);
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs);
}
myFun("one", "two", "three", "four", "five", "six");
a one
b two
manyMoreArgs ['three','four','five','six']   // 적당히 나눠넣기..?
--------------------------------------------------

13.@@@@@@구조분해 할당에서의 함수에서 객체 분해에는 ...이 들어가지 않는데 도대체 뭘 분해했다고 주장하는지 모르겠다. 이미 주말은 끝난지 한참이라 질문란에 따로 추가해야겠다.

이걸 왜 몰랐지 싶을 정도로 처음부터 다시 보면 몰랐던 내용들이 쉽게 이해되고
그 와중에 몰랐다는 사실조차 모르고 지나간 부분에 의문이 생기고 해결하는 과정이 재미있다.
메타인지는 사실 허상이 아닐까 싶은 생각도 드는게 더 잘 알지 못하면 내가 알지 못한다는 사실을 인식하기
쉽지 않다는 닭과 계란같은 관계라 절대적으로 본인의 취약점을 미리 알기는 쉽지 않다고 생각된다.
물론 부족한 부분을 바로바로 채우면서 복습을 하기 때문에 그렇게 생각될 수 있지만 게임처럼 본인의 부족한 부분을 바로 알고 채울 수 있다면 얼마나 편리할까..

--Linux
1. CLI 명령어
pwd(print working directory) 현재위치확인

mkdir(make directories) 폴더생성

ls(list) 폴더확인 (-a =숨어있는것 포함 전부, -l포맷 표현, -la/-al 둘다)
 -l의 포맷 표현은 drwxr-xr-x / -rw-r--r-- 등으로 볼 수 있는데 해석은 간단하다.
  1/2,3,4/5,6,7/8,9,10 4가지로 끊어서 읽어야 하며 맨 앞줄은 d는 derectories(폴더)의 자리로
   d는 폴더를 의미하며 -는 공백을 의미해 폴더가 아닌 파일임을 알 수 있다. 또한 나머지 3개의
   rwx/rwx/rwx 위치는 소유자(rwx),그룹(rwx),모든사용자(rwx)를 의미하며 r은 읽기권한,
   w는 쓰기권한, x는 실형권한으로 대부분이 r인 읽기는 가능하지만 x인 실행은 폴더만 자유롭게 할
   수 있으며 파일에는 실행 및 쓰기 권한을 주지 않는 경우가 많다.
   이는 sudo라는 최고/관리자/루트권한이라고 하며 rwx를 자유롭게 다룰 수 있는 명령어를 따로
   입력하게 만들어 외부에서의 해킹이나  사용자의 부주의 또는 미숙함으로 인한 프로그램 
   충돌 등을 예방할 수 있다.

nautilus . 현재 위치를 GUI로 실행

touch 파일 생성하기

cat 파일의 내용을 터미널에 출력하기

rm(remove) 폴더나 파일 삭제하기(-r(recursive) =폴더적용, -f(force) =액세스권한이 
 없는 파일도 강제하는 옵션이다.
 일반적으로 rm -rf를 묶어서 사용하는 습관을 들이라고 한다. 그렇지 않으면 권한이 없는 파일이
 섞여있는 경우 삭제가 제대로 되지 않을 수 있기 때문일 것 같다.
@@@@추가적으로 rm -rf /* 혹은 rm -rf . /*를 치면 정말 다 날아간다. 하드뿐만 아니라 
 EFI 이미지까지 날아가는, 완전 말 그대로 머리속까지 싸그리 포맷. 앞의 명령어는 /[9]
  디렉토리 내의 * 모든 걸 삭제, 뒤의 명령어는 현재 디렉토리 . 와 / 디렉토리의 모든
  내용 * 을 삭제한다. 별명은 "악마의 힘"이라고 한다.
 이런 실수를 방지하기 위하여 rm -rf ./*보다는 rm -rf *가 선호된다. 
 의미는 똑같으면서 위와 같은 참사가 일어나지 않는다.

mv(move) 폴더나 파일의 이름을 변경, 또는 폴더나 파일의 위치 옮기기 '이름 도착지점or변경이름'
 mv bye.txt bye/ = bye.txt -> bye폴더로 이동
 mv bye.txt helloWorld.txt -> bye텍스트명 helloWorld로 변경 후 기존파일 삭제(아래 참고)

cp(copy) 폴더나 파일을 복사하기 '원본이름 복사할이름'
 파일을 옮길 경우 1. 옮길파일 a 저장, 2. a삭제, 3. 저장된 기록(a) 생성이지만
 파일을 복사할 경우 2번 절차인 원본파일 삭제가 생략된다.
 위에서 언급된 것과 유사하게 폴더를 옮기거나 저장하기 위해서는 -rf를 추가해줘야 한다.

도움말 또는 사용법은  명령어 이름만 입력하거나 -h, --help등의 옵션을 통해 확인할 수 있다.
  

2. 절대경로는 기준점으로서의 절대적인 위치를 나타내는데, 이 절대적인 위치는 루트폴더(/)다. 또한
상대경로는 현재 자신이 있는 위치(pwd로 확인가능)에서 위, 또는 아래로 몇칸이동 같은 방식으로 사용할 수 있다. (.)은 현재폴더, (..)은 상위폴더를 나타내며 (./)는 현재 폴더 아래, 그리고 (./a)는 현재폴더의 아래인 a폴더라고 볼 수 있다.
 
  루트(절대경로의 시작)에서 사용자 폴더로의 경로는 ~/로 표시할 수 있는데 시작지점에서 현 위치를
  간략하게 표현할 수 있다. ( 예시 ~/현재폴더명 )


3. 루트폴더는 관리자권한이 없을 경우 읽기밖에 할 수 없다.
 whoami를 통해 로그인된 사용자를 확인할 수 있으며 sudo를 통해 관리자권한을 이용할 수 있다.


4. Ubuntu는 apt, macOS는 brew라는 패키지 매니저를 사용한다.
    apt는 우분투에 기본적으로 설치되어 있는데 아래와 같은 주요 명령어가 있다.
패키지 목록 갱신: apt update(관리자 권한 필요)
패키지를 다운로드할 수 있는 여러 저장소의 최신 정보를 업데이트합니다. 새로운 저장소를 
  추가하거나, 패키지를 설치하기 전, 최신 정보를 갱신합니다.
설치된 프로그램이 새로운 버전으로 변경되지 않습니다.
업그레이드 가능한 패키지 목록을 출력: apt list -—upgradable
전체 패키지 업그레이드(버전 업): apt upgrade (관리자 권한 필요)
특정 패키지만 업그레이드(버전 업): apt --only-upgrade install 패키지 이름 (관리자 권한 필요)
패키지 설치: apt install 패키지 이름 (관리자 권한 필요)
설치된 패키지 보기: apt list --installed
패키지 검색: apt search 검색어
패키지 정보 확인: apt show 패키지 이름
패키지 삭제: apt remove 패키지 이름(관리자 권한 필요)


5. nvm은 Node Version Manager의 줄임말으로 이름처럼 Node.js의 버전을 관리하는 프로그램이다.
 Node.js는 수많은 버전이 있는데 각 개발 환경에 따라 다른 버전이 필요할 수 있다. 이 때 각 버전을
 쉽게 관리할 수 있게 해주는 것이 nvm이다. 사용법은 간단한데 아래와 같은 명령어로 사용할 수 있다.
nvm ls      nvm에 설치된 버전들이 나온다. 예시)14.15.5
nvm install (버전)  nvm에 (버전)을 설치한다.
nvm use (버전)      nvm에서 (버전)을 실행한다. 

6. node a.js를 입력시 a파일이 node환경에서 실행된다. 이를 통해 웹이 아닌 환경에서도 JavaScript를 사용할 수 있게 한다.

7.npm은 Node Package Manager로 node의 패키지들을 관리해준다. package.json에서 어떤 모듈들이 필요한지 알려주는데 이를 npm으로 확인하고 명령어 하나로 해당하는 모든 모듈들을 쉽게 다운받을 수 있다. 또한 필요한 모듈만 package.json에 저장될 뿐 실제 모듈은 따로 node_modules이라는 폴더에 저장된다.
package.json에는 프로젝트 관련 정보, cli에서 사용 가능한 명령, 개발과 관련된 dependency들이 기록된다.

npm install명령어를 통해 package.json에 적힌 모듈들을 node_modules로 다운받아 저장한다.
npm install --save-dev 명령어로 설치하면 자동으로 devDependencies에 추가된다.
npm install X 명령어로 X모듈을 다운로드 시 자동으로 dependencies에 저장된다.(--save 자동사용)
또한 scripts 항목에는 start, test, lint정도를 기술하는 편이 좋다.


--배열
1.JavaScript에는 array, null타입이 없기 때문에 array와 null은 typeof에서 object로 표기된다.

2.재미있는 사실은 arr이 빈 배열일 경우 arr[0]은 undefined가 나온다. 하지만 Reference에서는 if문으로 길이가 0일경우 undefined를 따로 표기하고 있다. 처음으로 내가 이긴 것 같다!(문의해볼것)@@@

3.다른곳에 기록하지 않았지만 이 부분에서 의문을 가졌던 let을 적지 않아도 자동적으로 선언이 되서 
let을 빼먹던 습관이 있었고 그러면 작동이 안되지 않냐는 동기분의 의문에 실행시 작동이 되서
동기분이 의아해 하셨던 부분이 있는데 알고보니 var로 선언이 되서 주의해야 하는 부분이었다.
let을 빼고 값을 바로 할당해 var로 자동 선언되게 하지 말자. 오류의 원인이 된다.

4.메서드를 사용할 경우 어떤 부분을 가르키고 있는지 어떤 값을 반환하는지를 주의깊게 봐야 하는데 string타입 또는 Number타입의 경우는 대충 호환이 될 수 있어 놓치기 쉽지만 주의해야 하고 결과가 배열 또는 객체로 나와서 오류가 발생하거나 값으로 나왔지만 배열이 필요한 상황 등이 있을 수 있어 입력과 출력에 유의하여 함수 및 값을 선언, 할당해줘야 한다.

5. for(let el of arr){}등으로 arr배열에 있는 내부값(element)를 내부 함수에 넣어 사용할 수 있다.
 또한 for(let key in obj){} 방식으로 obj배열에 있는 내부값들을 key를 통해 호출해 사용할 수 있다.

6.pop(), shift()는 뺀 값을 반환하는 함수이기 때문에 뺀 후의 배열값을 받으려면 arr을 호출해야 한다.

7.splice는 (start,갯수,넣고싶은 값)으로 사용하기 때문에 갯수부분이 비어있다면 끝까지 지워버린다.

생각보다 리눅스에 대해서 대충 넘어갔던 것 같아 반성하게 된다.

f에 대해 궁금한 점과 내용 명령어 사용법등에 대해 조금씩 추가하다보니 리눅스에 대해서 좀 더 알 수 있는 시간이 되었지만..

5일중 2일치 복습밖에 하지 못해 상당히 시간적인 압박을 느끼게 되었다.

내일 3일치(수,목,금)복습과 30문제중 15문제라도 풀었으면 좋겠다.

오늘은 몇가지 간단한 실수들을 제외하면 전체적인 복습이라 회고할 내용이 별로 없는 것 같다. 
개구리잡기, 초밥, css복습과 계산기 부분을 복습했는데 이해가 안되거나 모르던 내용들이 쑥쑥 지나가서 놀라웠다.
저번에 반복문과 조건문에서도 답답했지만 주말 복습때는 눈 감고도 한다는 세션때의 설명이 이해가 갔다. 
딱히 예습을 하지는 못했지만 1달이 지난 시점부터는 복습할 여유가 없어진다고 하니 미리 복습을 확실히 해야겠다.
정확한 용어들 복습이 아직도 부족하지만 중점적으로 생각하며 복습하다보니 이제 페어와 작업할 때도 전문용어..?로도 설명을 할 수 있을 것 같다.

[for^="Sa"] for 속성에 Sa로 시작하는 모든 것 
[for*="Sa"] for 속성에 Sa가 들어가는 모든 것
[for^="Sa"] for 속성에 Sa로 끝나는 모든 것

셀렉터 *는 모든 범위를 선택하는 것이 아닌 모든 것을 개별적으로 다 선택하는 것
+는 형제를 선택, ~는 인접형제들

align-content = 여분의 공간이 있는 경우 세로간격 조절로 items와는 결이 다른 느낌이다.

1.CSS(Cascading Style Sheets)의 각 규칙이나 규칙 집합은 하나 이상의 셀렉터와 하나의 선언 블록을 이룬다.

2.아래의 우선순위에 충돌이 나는 경우 아래의 우선순위로 마무리 작업을 할 경우 작동을 하지 않아 당황할 수 있다.
(실제로 대부분 css가 먹히지 않는 상황은 아래 우선순위 중요도에서 밀린 탓일 것이다.)@@@@@@
CSS 우선 순위 (높은 순위에서 낮은 순위 순)
1.중요성-‘!important’은 이전의 우선 타입들을 덮어쓴다.
2.인라인-HTML 'style' 속성을 통해 HTML 요소에 적용되는 스타일
3.미디어 타입-미디어 특정 CSS가 정의되어 있지 않다면 프로퍼티는 모든 미디어 타입에 적용된다.
4.사용자 정의-대부분의 브라우저가 접근성 기능을 갖추고 있다:사용자 정의 CSS
5.셀렉터 특정성-특정 컨텍스트 셀렉터(#heading p)는 일반 정의를 덮어쓴다.
6.규칙 순서-마지막 규칙 선언은 가장 높은 우선 순위를 가진다.
7.부모 상속-프로퍼티를 지정하지 않으면, 부모 요소에 상속된다.
8.HTML 문서 안에서의 CSS 프로퍼티 정의-CSS 규칙 또는 CSS 인라인 스타일은 기본 브라우저 값을 덮어쓴다.
9.브라우저 기본값-가장 낮은 우선 순위: 브라우저 기본값은 W3C 초기값 사양에 정의되어 있다.

3. 
UI=user interface
UX=user experience 

body(Selector/셀렉터){
(Declaration block/선언블록={}을 의미)
-(Declaration/선언)
-(Declaration)
--(Property/속성명) : (Value/속성값);
---(예시)color : red; // font-size : 30px; 등
}



4.시멘틱 요소를 사용할 때는
-------header------- 이런 형태로 작성되며 
nav    main   aside  nav와 footer에는 주로 ul과 li를 이용한다.
-------footer------- 

5.<li class="menu-item selected">Home</li> 등 ' '(공백)을 이용해 여러개의 class를 동시에 적용할 수 있다.

6.색=color / 테두리 색=border-color / 배경 색=background-color / 글꼴=font-family:"글꼴" / 크기=font-size / 굵기=font-weight / 밑줄=text-decoration / 자간=letter-spacing / 행간=line-height / 정렬=text-align / 세로정렬=vertical-align(display 속성이 반드시 table-cell이며  정렬하고자 하는 글자를 둘러싸고 있는 박스의 높이가, 글자 높이보다 큰 경우에만 적용할 수있다.)

7.절대 단위: px, pt /상대 단위: %, em, rem, ch, vw, vh 등
글자의 크기는 1rem이 기본이며 크기에 따라 조절하기 쉽다.
vw와 vh는 viewport width와 viewport height을 의미하며 너비/높이의 1/100씩을 의미한다. 화면에 꽉 차는 내용을 설정하고 싶은 경우 유용하다.

8.<p>, <div>, <h1>등 block박스는 줄을 전부 차지하며(flex등 예외 제외) <span>같은 inline박스는 내용물 또는 설정 값 만큼의 자리만 차지한다.

9.네가지 방향의 입력의 경우는 주로 위, 오른쪽, 아래, 왼쪽의 시계방향 순서로 배치되며 -top -right 등의 단어를 붙여서 특정 방향만의 조절도 가능하다.
외부와 border 그리고 content를 기준으로 했을 때 외부와 border의 사이에 들어가는 공간을 margin값으로 조절하며 border와 content박스의 사이 공간 조절을 padding값으로 할 수 있다.

10. 셀렉터는 전체선택(*), 태그명(tag), 클래스명(.class), 자식셀렉터(selecor > selecor2), 후손셀렉터(selecor selecor2 {}), 형제셀렉터(selecor ~ selecor2 {}), 인접 형제 셀렉터(selecor + selecor2 {}), 섹렉터 내부 속성셀렉터(selecor[tag])??, 셀렉터의 첫번째/마지막 자식 셀렉터(selecor:first-child), n번째 자식 셀렉터(selecor > selecor2:nth-child(n)), 형제중 처음/마지막 셀렉터(selecor:first/last-of-type), 셀렉터2 제외 셀렉터(selecor:not(selecor2))등이 있다. 사용 또한 자동완성 기능이 있기 때문에 눈에 익는 정도만 더 보면 자연스럽게 사용 가능하다.

11. link, visited, hover, active, focus등은 더 숙달이 필요하다.@@@
 
12.wireframe은 와이어로 설계된 모양을 의미하며 웹이나 앱의 인터페이스를 미리 묘사해 구조를 보여주는 용도로 설계를 위해 제작하며 잘 만들 경우 와이어프레임만으로 용도를 쉽게 파악할 수 있다. 

13.화면은 수직분할(ㅣㅣㅣ)과 수평분할(三)순서로 적용하며(상황에 따라 다를 수 있다) 내부 비율분할(width: 70%/height: 40% 등)로 쉽게 나눌 수 있다.

14. 정렬기능에는 아래와 같은 속성과 값들이 있다.
justify-content(flex-end / center / space-between / space-around / space-evenly)
align-items(flex-start / flex-end / center / baseline / stretch(default))
flex-direction(row (default) / row-reverse / column / column-reverse)
order(... -1, 0(default), 1, ...)
align-self(flex-start / flex-end / center / baseline / stretch)
flex-wrap(nowrap(default) / wrap / wrap-reverse)
flex-flow(<flex-direction> <flex-wrap>)
align-content(flex-start / flex-end / center / space-between / space-around / space-evenly / stretch(default))

justify-content(가로선 정렬) / align-items(세로선 정렬) / flex-direction(정렬할 방향 지정) / order(순서지정) / align-self(기존 세로선 정렬을 무시하며 자신만 지정된 방식으로 세로선 정렬) / flex-wrap(플렉스 요소 줄바꿈) / flex-flow(정렬방향 지정 + 줄바꿈) / align-content(여분 공간이 있는 경우 세로방향 간격 조절)

15.flex:<grow(팽창 지수)> <shrink(수축 지수)> <basis(기본 크기)>
기본값은 'flex: 0 1 auto' 상태이며 -grow -shrink -basis등을 붙여 각 값만 따로 지정할 수 있다. 이 flex속성은 자식값에 직접 할당되어 근처의 다른 형제들의 flex값과 비교된다.(그렇기 때문에 자식에 각각 할당해야 하는 것)
팽창지수가 모두 1(flex:1)인 경우 빈 공간이 있을 경우 각자 동일한 비율로 할당되는 것을 알 수 있다. 

!단 basis의 값이 있기 때문에 grow값이 0이라고 해도 shrink값은 1이기 때문에 기존 할당값 미만으로 줄어들지는 않는다.


복습을 해도 시간상 모든걸 다 파악하고 넘어가기는 쉽지 않다.

복습은 해도 해도 부족한 것 같다.

내일은 개구리(flex)와 코드스테이츠 CSS문제를 한 후 초밥(css)까지 클리어 해야곘다.

선택자를 정확하게 사용하는 실력과 flex정렬만 제대로 할 줄 알아도 대부분의 배치 문제는 쉽게 해결할 수 있지 않을까?

오늘 배운 우선순위 또한 시간이 날 때 제대로 파악해야 할 문제다.

복습을 좀 하다가 내일은 시작과 동시에 페어분과의 작업을 연달아 7시간이나 해버리고 세션과 함께 마무리가 되어버리는 이상한 스케쥴이라(그 작업에 대한 사전 학습 시간조차 없다.. 작업내용을 페어분과 함께 읽어야 할 판) 걱정이 앞서 예습메타로 들어갔다.

코드스테이츠에서는 페어와의 해결을 위해 문제등은 풀지 말라고 했지만 이건 코플릿도 아니고 문제해결이라기보다는 사전 이해작업이니 허용범위 내라고 생각하고 시작했는데..  생각보다 어려웠다.

일단 남의 코드를 받아서 하는 것 조차 설명이 없다보니 검색을 통해 code를 눌러서 다운받았고 

내가 작성한 코드가 아닌데 내가 여태 작성한 코드보다 덩치가 커서 (json이라는 애도 많이 있으며 파일만 10개였다.) 한눈에 파악하기도 쉽지 않았다. 자세히 보니 사실은 다 고만고만한 애라는걸 파악했지만 내부의 함수들 또한 각자 기능이 다르고 생각한 사람도 나와는 기준점이 다르기 때문에 파악하는데 시간이 생각보다 오래걸렸다.

이래서 개발자는 협업능력이 중요하다고 하는 것 같다. 이건 그나마 주석이 수십줄은 달린 학습용 계산기 작업용 틀이었는데 실제로 사용하는 큰 작업에서 주석도 제대로 없다면 파악하는데 며칠이 걸리지 않을까?

딱히 동영상 강의도 없고(뭔가 있는 척 하는 글을 보면 내일 수정될지도 모르겠다.) 있다고 해도 페어시간에 보는 건 이상하다고 생각된다. 내일 페어분과 함께 당황하며 해결해 나갈 걸 생각하면 걱정도 되고 모각코 방에 질문을 살짝 해봤지만 질문능력도 떨어지고 전문용어..?도 부족하기 때문에 어떤 부분이 문제인지 제대로 설명하기도 힘들었다. 

의외로 이런 과정들이 나중에 다른 개발자와의 의사소통에는 도움이 될 거라는 확신을 얻게 되었지만.. 오늘은 공휴일 치고 그렇게 행복하지 않다. 같이 고민해줄 페어도 없고 학습할 자료도 애매한 상황..  이럴 줄 알았으면 그냥 계획대로 개구리랑 초밥 css공부나 하면서 즐겼어야 했는데 아쉬움이 남는다. 하루 하루가 소중한데 정리할 수 있는 시간 하나가 날아간 기분이다.

어제는 어른들이 행복한 어린이날이라며 웃었지만 오늘의 나는 행복하지 않았다.

계산기 만들기 복습을 하면서 추가적인 기능들을 공부한 후  추가적인 학습 없이 바로 뛰어드는 내일의 계산기 구현 예습을 했다..

여러가지 시도들을 했지만 제대로 하지 못했는데 문제점은 다음과 같다.

1.제대로 된 기능 구현이 안됨

2. 0 + 0 = 0 의 5개의 칸 중 1,3,5번쨰 칸에 각각 숫자를 넣어줘야 하는데 학습 내용에 

변수 firstOperend에 담긴 HTML 엘리먼트의 textContent에 받아온 숫자를 입력하면 됩니다. 직접 해보세요! 와 관련된 내용이 없어 아래에 동작기능구현만 해버렸다.

3.하는 도중 생각났는데 숫자가 한자릿수가 아니라면 두번째 숫자칸으로 넘어가면 안된다. if문에 첫번째 숫자가 있는지 체크를 하는 조건은 operator를 눌렀을 때 발동해야 한다 (숫자에 넣을 뻔 했다.)

월단위 계획과 유튜브 강의등을 찾아보다 보니 생각보다 시간이 너무 빨리 지나버렸다.

내일은 막힘없이 진행됬으면 좋곘다.

페어 작업보다는 개인작업 + 두세시간마다의 세션참여로 체크하는 방식이 더 좋지 않았을까 생각도 든다.