인프런 프론트엔드 워밍업 클럽 3기 1주차

대학교 개강을 맞아 공부와 병행을 해야하다보니 모든 과제를 다 할 수 없었다. 하지만 최대한 진도를 따라잡고자 노력해보겠다. 이번 주는 1일차와 2일차 과제 밖에 끝내지 못했다. 인프런 워밍업 진도표를 보니 많은 양을 단시간 내에 습득하고 응용해내야 하는 것 같았다. JS는 어느 정도 할 수 있지만 리액트는 거의 처음이라 잘 해낼 수 있을지 막막하다. 하지만 그래도 최선을 다해서 지식을 얻어가보겠다. 학습 요약 1일차 : 섹션 2 ~ 4대부분 아는 내용들이였기에 따로 정리를 하지는 않아서 새로 배운 것들 위주로 정리해보겠다. 이벤트event bubbling : html 내의 요소들을 밑에서부터 올라오는 것event capturing : html 내의 요소들을 위에서부터 밑으로 내려오는 것event delegation : 하위요소의 이벤트들을 상위 요소에 위임하여 관리하는 것 2일차 : 섹션 5 (절반)2일차부터는 모르는 것들이 조금씩 나오기 시작해서 메모를 좀 해두었다. ThisMethod : 객체함수 : 윈도우 객체화살표함수 : 상위 스코프의 this를 가리킴 ; Lexical thiscall 메소드 : 함수를 호출하는 함수, 첫번째 매개변수로 어떤 것을 전달해주면 호출되는 함수의 this에 window객체가 아니라 전달받은 것을 보냄.const fullName = function(city, country){ console.log(this.firstName + ' ' + this.lastName, city, country); } const person1 = { firstName: "John", lastName : "Smith" } fullName.call(person1, 'oslo', 'Norway'); //출력 값 : John Smith Oslo Norway apply 메소드 : call 메소드와 매우 유사. 하지만 뒤에 인자를 넣어줄 때 각각 넣어주는 것이 아니라 배열로 넣어줌.const fullName = function(city, country){ console.log(this.firstName + ' ' + this.lastName, city, country); } const person1 = { firstName: "John", lastName : "Smith" } fullName.apply(person1, ['oslo', 'Norway']); //출력 값 : John Smith Oslo Norway bind 메소드 : 바로 함수를 직접 호출 해주는 것이 아닌 바인딩만 해주고 해당 값은 다른 변수에 저장해서 실행시켜줘야 함.function func(language){ if(language === "kor){ console.log(`language: ${this.korGreeting}`); } else { console.log(`language: ${this.engGreeting}`); } } const greeting = { korGreeting : '안녕', engGreeting : 'Hello' } const boundFunc = func.bind(greeting); boundFunc('kor') //출력값 : language : 안녕 동기 VS. 비동기동기 (Synchronous) : 시간을 맞춤. 1부터 4까지의 단계가 있다면 전 단계가 끝나기 전까지 넘어갈 수 없음비동기 (Asynchronous) : 시간을 맞추지 않음. 1부터 4까지 단계별로 하지 않아도 됨. 동시에 다른 걸 한다던지 순서 상관없이 해도 됨.얕은비교 vs 깊은비교얕은 비교 : 단순히 값만 비교. 객체나 배열 같은 경우에는 위치를 저장하기 때문에 비교 학습 회고 : 시간이 많이 없었다는 변명을 해보지만, 그래도 하루에 1시간 정도는 할애할 수 있었지 않나 싶다. 주말에 몰아서 하려니 양이 많아 엄두가 나질 않는다. 다음주부터는 하루에 과제 하나를 못하더라도 강의만큼은 따라 잡아 보려고 노력해볼 것이다. 하다보니 시간도 없고 다 하지 못할 것 같아서 벌써부터 중도포기를 해야하나 걱정했는데, 벌써 포기하기엔 너무 이른 것 같아서 하는 데까지 해보기로 결심했다. 일주일을 살다보면 가끔 스스로 타협해서 쉬엄쉬엄 가자고 합리화하게 되는데, 이 클럽이 나태해지지 않게 도와주는 것 같아 신청하길 잘 한 것 같다. 미션 요약1일차 : 음식 메뉴 앱CSS는 거의 하지 않았고 기능 자체에만 집중했다. 오랜만에 js를 공부하니까 뇌가 굳어서 이 과제를 하는데 꽤나 많은 시간이 걸렸다. CSS를 다시 하려니 기능도 다 까먹어서 기억을 더듬거리면서 했다. 푸는 과정은 단계별로 천천히 했다.기본적인 틀 만들기음식 배열 만들기음식 양식대로 출력하기필터링 하기 2일차 : 가위바위보 앱가위바위보 앱부터는 CSS를 살짝 더 하면서 했더니 과제물이 훨씬 볼만해졌다.기본적인 틀 만들기이벤트 리스너 생성가위바위보 함수 생성innerHTML 사용해서 횟수 및 점수 업데이트최종 결과 구현