부트캠프 3Week

- 220418

오늘은 그동안 수업 들으면서 여러번 봤지만 나는 제대로 알지 못해서 궁금했던 부분들이 다 나왔다. 화살표 함수라던가, 문자열 리터럴이라던가 등등.. 간단한 개념인데 나만 제대로 모르는 거 같아서 답답했는데 이제 궁금증이 풀렸다.😊

• 개발자 도구 snippets - 자주 사용하는 코드 저장해두고 사용 가능
• this는 맥락적으로 가리키는 대상이 달라진다.
• jquery를 사용하면 document.querySelector를 $로 간단하게 표기가능
• js 문법:document.querySelector('body').style.color = 'black';
  jquery 문법: $('body').css('color', 'black');
• $('body').css('background-color', 'black').css('color', 'black'); -> css를 줄줄이 체인처럼 걸 수 있음
• onclick은 중복되는 코드를 재사용할 수 없다. 그리고 코드가 길어지면 가독성이 떨어진다. 때문에 addEventListener로 이벤트 코드를 분리한다.
• <script type="module"> 스크립트의 타입을 모듈로 선언하면 웹페이지의 랜더링이 모두 끝난 후 스크립트를 실행한다. 즉, defer 속성이 자동으로 부여되는 것이다.
• 이름이 없는 데이터는 배열에, 이름이 있는 데이터는 객체에 담는다
• 기본 동작 막기 preventDefault

함수 변형

// 1. 기본 함수 형태
function callback(e){
    return `<li>${e}</li>`;
}
nums.map(callback).join('');

// 2. 변수를 이용한 함수 사용
callback = function(e){
    return `<li>${e}</li>`;
}
nums.map(callback).join('');

// 3. 기존 함수를 화살표 함수로 변형
nums.map((e)=>{
    return `<li>${e}</li>`;
}).join('');

// 4. 인자가 하나일 때는 괄호() 생략 가능
nums.map(e=>{
    return `<li>${e}</li>`;
}).join('');

// 5. 화살표 함수에서 return 키워드 밖에 없을 때는 {}와 return 생략 가능
nums.map(e=>`<li>${e}</li>`).join('');

헷갈렸던 문법들 📎ConfusedGrammer

- 220419

오늘은 인스타그램 클론 코딩을 했는 데 생각보다 너무 어려웠다. 데이터베이스도 SQL만 접해보다가 indexedDB를 처음 사용해보았는데 많이 생소했다. 간단한 코드만 짜다가 하나의 큰 프로그램을 짜니 머릿 속에서 전체적인 그림을 그리기가 힘들었던 것 같다. 코드를 다시 천천히 살펴보면서 정리해볼 필요가 있을 것 같다. 추가로 async와 await 개념도 공부해야겠다!
상단바와 프로필, 게시물 부분을 구현하였으며, 핵심 기능은 프로필 편집과 사진 업로드 기능이다.

- 220420

강의 중에 이고잉 코치님께서 여러 조언들을 해주시는 데, 오늘은 코드를 조금씩 수정하고 바로바로 확인하는 것을 습관화하여 미리미리 문제를 방지하는 것이 중요하다고 말씀해주셨다.
그리고 수업하다보면 코치님들이 코드를 짧게 쓰는 방법을 알려주시곤 하는 데 매번 저렇게 짤 수도 있구나 충격을 받고 있다. 내가 for문으로 여러 줄에 작성한 내용을 코치님들은 한 줄로 작성하시는 것을 보고 내 부족함을 많이 느끼곤 한다. 그래도 연습하다보면 늘겠지...＞︿＜

• 필터는 콜백함수의 리턴값이 참인 원소들만 배열에 담아 돌려준다!
• 자바스크립트의 빌트인 api들은 윈도우 안에 들어있다
• var, let, const 를 사용하지 않고 선언한 변수는 무조건 전역이다.
• var은 global execute context 에서 선언되었을 때만 전역이다.
• let과 var는 함수 안에서는 지역이다.
• script scope는 global과 local 사이에 존재하는 영역으로, 변수의 혼란이 생기는 것을 방지하기 위해 존재한다. global scope에는 이미 많은 내장 window 객체가 존재하기 때문에 변수가 계속해서 생성되면 혼란을 일으킬 수 있다. 따라서, global scope이 아니어도 함수 밖에서 변수를 정의하고 함수 안에서 활용할 수 있도록 만든 것이 script scope이다.
• rest operaor(나머지 매개변수) : 나머지 매개변수들을 다 모아서 하나의 배열에 저장해서 넘긴다.
• 매개변수 앞에 ...를 붙여 후속 매개변수들을 한 번에 묶어서 넣을 수 있다.

func(arg1, arg2, ...arg3) { }
// arg1에는 1, arg2에는 2, arg3에는 나머지 3,4,5가 들어감
func(...args) { }
// 1,2,3,4,5가 args 인자로 한꺼번에 들어감
func(1,2,3,4,5) // 함수에 인자로 1,2,3,4,5를 넣어줌

즉 func(arg1, arg2, ...arg3) 는 arg1, arg2는 앞에서부터 각각의 인자로 넣어주고 나머지 인자들을 arg3로 묶어서 보내준다.
func(...args) 는 모두 args로 한꺼번에 묶어서 인자로 넣어준다.

• spread operaor(전개 구문) : 배열에 있는 데이터들을 전개

- 220421, 220422

이틀 간 처음 접하는 내용들을 많이 학습하였다. 그만큼 멘붕의 연속이고 어렵게 느껴져서 심리적으로 힘들었다. 주차 테스트도 겨우 통과 했다. 다음주는 더 심화적인 내용을 다룰텐데 벌써 걱정이다ㅜㅜ

실행 컨텍스트랑 호이스팅에 대해서 학습했다. 늘 코딩만 하기 바쁘고 자바스크립트가 어떤 과정으로 실행되는 지는 생각해본 적 없는 데, 개념을 알고 나니 코딩을 하면서 마주했던 오류들이 왜 발생했는지 이유를 알 수 있게 되었다. 앞으로도 그 원리를 생각하면서 코드를 짜야겠다.

그리고 Rest Operator와 Spread Operator에 대해서도 처음에 이해하기 힘들었지만, 이해하고 나니 매우 편리한 문법인 것 같다.

실행 컨텍스트 📎실행 컨텍스트
Rest/Spread Operator 📎Rest Operator, Spread Operator