TIL_221115 ✅🚩Javascript

내일배움캠프 4기 스파르타코딩 React B반

---

📒 오늘의 공부

1. Javascript 이론

• 어제 들었던 유툽 JS 중급강의
  • hoisting: 변수 선언은 최상위에 선언된 것 처럼 행동
  • TDZ(Temporal Dead Zone): let const는 TDZ의 영향을 받아 할당 전에는 사용할 수 없다.
    -> 함수 안에서 'TDZ=console.log(age)' 뒤에 let을 다시 선언할 수 없음
  • let const: block-scoped
    • 함수, if문 블록 안에서 선언된 함수는 내부에서만 유효 = 지역 변수
  • var: function-scoped
    • 함수 내부에서 선언된 변수만 지역 변수
  • 생성자 함수
    -> function User(name) 대문자로 함수를 만듦
    -> new 연산자로 함수를 호출
  • Object Method
    -> Object.assign() 객체 복제
    • (1, 2, 3)이면 1에 2, 3이 합쳐짐
    -> Object.keys() 키 배열 반환
    -> Object.values() 값 배열 반환
    -> Object.entries() 키/값 배열 반환
    -> Object.fromEntries() 키/값 배열을 객체로
  • Symbol
    -> 다른 사람이 만들어 놓은 코드에 영향을 미치지 않으면서 method 추가 가능
    -> console.log(`His ${key} is ${user[key]}.`)
    value는 ${value}로 하면 undefiend 나옴

2. Programmers

• Lv0 단계
  • 각도기 문제 다시 풀기
    -> else if 사용해서 풀었다
    <다른 풀이>
    -> ? : 쓸 때 좀 더 간결하게 쓰네! 나는 if문 쓰는 것처럼 괄호도 막 써서 오류가 났던 것 같음!
  • 짝수의 합
    -> for, if, += 이용해서 풀었음
    <다른 풀이>
    -> 합을 담을 변수 설정하기
    -> 짝수를 구하는 거니 for문에서 i+=2 설정하면
    if(i%2-===0) 쓸 필요 없음
  • 양꼬치
    -> 배고파서 눌렀는데 금방 잘 풀렸음
    -> 음료수 개수에서 서비스 개수를 빼고 계산함

3. SP_웹 퍼블리싱 강의

• 2주차
  • <lable> 체크박스를 정확히 누르지 않아도 해당 부분을 누르면 체크가 됨!
  • preventDefault() submit할 때 새로고침을 막아줌
  • 앞에 !!붙여주면 값이 Boolean으로 변환
  • 메인 박스 안의 요소들 위치
    -> 메인 박스의 position을 absolute / relative로 정해준다.
    -> 하위 요소의 positon도 정한 다음(보통 absolute ) top, right 등에 값을 줘서 위치를 정해준다.
    ex. top:0, bottom:0 메인 박스 안에서 높이를 100%로 차지한다.
  • 아이콘이 보이질 않아서 현재 네이버 페이지의 아이콘 이미지 주소로 변경하고 background-size, 각 아이콘 background-position를 변경하니 해결!
  • display: table 안의 내용은 table-cell로 해주면 내부 요소가 균등하게 정렬 된다.
  • 최근 검색어 창 만들기 숙제 다시 해 보기!!!

4. Button & Input button

• form의 제출 버튼에 이미지 넣기
  • Button -> img 태그를 자식 태그로 사용
  • Input -> css의 background-image 사용

  ⭐검색엔진 최적화를 위해 이미지는 img 태그 사용

• Button
  • 하위 요소를 추가할 수 있어 디자인 자유도가 높다.
    -><button> 이곳 <span>클릭</span> 하기 </button>
    -> span부분만 css로 색 변경

---

✅

증감연산자 이해하기

• ++의 위치에 따른 값 도출

let a = 10;
let b = a++ + 5;
let c = b--;

let i = 1;
let j = i++ + 1;
let k = ++i + 1;

• 기초 강의 들을 땐 '그렇구나'하고 넘어갔는데 오늘 팀원분이 이렇게 문제를 내주시니까 내가 이해를 충분히 못 했다는 걸 깨달았음!
  • 저렇게 예시 문제를 풀고 나니 이해가 확실히 됐다!
  • 앞으로 절대 '글쿠나ㅎ'로 넘어가지 말고 무조건 예시문제까지 풀고 이해하고 넘어가기!!!

프로그래머스 푸는 방법

• 간단하게 푸는 방법 먼저 찾지 말 것
  • 안 푼 문제를 여럿이서 함께 풀어보며 방법을 찾기
  • 가능한 자세하게 코드를 짜면서 작동 원리 이해하기
  • reduce 등의 함수를 이용해 더 쉽고 빠르게 풀 수 있는 방법은 내가 for, while문 등을 활용해 코드와 작동 원리를 충분히 이해한 다음 배워도 된다!!

---

🚩

'왜?' 생각하기

• mini팀원들이 button, a, input button의 차이에 대해 정리된 글을 공유해줬다.
  • mini project할 때 이 부분에 대한 궁금증이 생겼었는데 따로 정리할 여유가 없어서 지나쳤다.
  • 아침에 JS 이론 공부 하다가 공유된 글을 봤는데 순간 이전에 했던 걸 돌아보며 "왜?"를 생각하지 않고 그저 새로운 걸 머릿 속에 집어 넣는 것에만 집중하는 것 아닌가 싶었다.
  • 들어야 하는 강의가 있으면 "일단 다 듣고 보자" 하는 습관을 버려야 한다. 5분짜리를 50분간 보더라도 그 시간 동안 계속 충분히 이해하고 "왜 이렇게 한 걸까, 이렇게 하면 어떨까?"라는 질문을 계속 던지기
• 요즘 복습이 많이 부족한 것 같다.
  • 해야 할 게 많은 것도 맞지만 내가 TIL에 정리한 부분을 보며 복습하는 시간을 꼭 가져야 한다.
  • '내 것'으로 만들기를 안 하면 아무것도 남지 않는다.