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

2025-03-09T11:10:01.416Z

yeobinlee1210

대학교 개강을 맞아 공부와 병행을 해야하다보니 모든 과제를 다 할 수 없었다.

하지만 최대한 진도를 따라잡고자 노력해보겠다.

이번 주는 1일차와 2일차 과제 밖에 끝내지 못했다.

인프런 워밍업 진도표를 보니 많은 양을 단시간 내에 습득하고 응용해내야 하는 것 같았다.

JS는 어느 정도 할 수 있지만 리액트는 거의 처음이라 잘 해낼 수 있을지 막막하다.

하지만 그래도 최선을 다해서 지식을 얻어가보겠다.

학습 요약

1일차 : 섹션 2 ~ 4

대부분 아는 내용들이였기에 따로 정리를 하지는 않아서 새로 배운 것들 위주로 정리해보겠다.

이벤트

event bubbling : html 내의 요소들을 밑에서부터 올라오는 것
event capturing : html 내의 요소들을 위에서부터 밑으로 내려오는 것
event delegation : 하위요소의 이벤트들을 상위 요소에 위임하여 관리하는 것

2일차 : 섹션 5 (절반)

2일차부터는 모르는 것들이 조금씩 나오기 시작해서 메모를 좀 해두었다.

This

Method : 객체

함수 : 윈도우 객체
화살표함수 : 상위 스코프의 this를 가리킴 ; Lexical this
call 메소드 : 함수를 호출하는 함수, 첫번째 매개변수로 어떤 것을 전달해주면 호출되는 함수의 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 사용해서 횟수 및 점수 업데이트
최종 결과 구현

프론트엔드 워밍업클럽 FE 프론트엔드

답변 0