[인프런 워밍업 클럽 스터디 2기 FE] 1주차 발자국

[인프런 워밍업 클럽 스터디 2기 FE] 1주차 발자국

HYERIN JO 1개월 전

Liked, 스터디에 참여하며 좋았던 점은?

  • JavaScript에 대해서 복습하는 시간을 가질 수 있었다.

  • 미션을 수행하면서 JavaScript 라이브러리, 프레임워크를 사용하지 않고 tailwindCSS를 적용하는 법을 배울 수 있어서 좋았다. 배운걸 실제로 적용해봐야지 머릿 속에 각인되고 더 잘 이해가 되는 거 같다.

Learned, 스터디에서 배운 점은?

강의에서 배운 점?

  • 호이스팅

    • JavaScript에서 호이스팅은 코드가 실행되기 전에 변수 및 함수 선언(이름)이 로컬 범위(유효 범위)의 맨 위로 들어올려지거나 끌어올려지는 경우를 설명합니다.

  • DOM, Document Object Model

    • 돔은 메모리에 웹 페이지 문서 구조를 트리 구조로 표현해서 웹 브라우저가 HTML 페이지를 인식하게 해줍니다.

    • 웹 페이지를 이루는 요소들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미합니다.

  • CRP, Critical Rendering Path

    • DOM tree 생성: 렌더 엔진이 문서를 읽어들여서 그것들을 파싱하고 어떤 내용을 페이지에 렌더링할지 경정

    • Render tree 생성: 브라우저가 DOM과 CSSOM을 결합하는 곳이며, 이 프로세스는 화면에 보이는 모든 콘텐츠와 스타일 정보를 모두 포함하는 최종 렌더링 트리를 출력함. 화면에 표시되는 모든 노드의 콘텐츠 및 스타일 정보를 포함함.

    • Layout(reflow): 브라우저가 페이지에 표시되는 각 요소의 크기와 위치를 계산하는 단계

    • Paint: 실제 화면에 그리기

  • Event Bubbling

    • 이벤트 버블링이란 깊게 중첩된 이벤트가 발생했을 때, 이벤트가 위로 (bubble up) 전달 되는 것을 의미합니다.

      • image

  • Event Capturing

    • 이벤트 캡처링이란 이벤트 버블링과 다르게 제일 상단에 있는 요소에서 아래로 이벤트가 내려오는 것을 말합니다.

      • image

  • Event Delegation

    • 이벤트 위임은 하위 요소의 이벤트를 상위 요소에 위임하는 것입니다.

      • image

  • this 키워드

    • 메소드에서 this를 사용할 경우? 해당 객체를 가리킨다.

      const artist = {
	name: 'Minnie',
	sing() {
		console.log('sing this', this); // {name: 'Minnie', sing: f sing()}
	}
}

    • 함수에서 this를 사용할 경우? window 객체를 가리킨다.

      function eatHamburger() {
	console.log(this); // window 객체
}

    • constructor 함수에서 this 사용할 경우? 빈 객체를 가리킨다.

      function Artist(name) {
	this.name = name;
	console.log(this); // {}
}

const minnie = new Artist('Minnie');

    • 콜백함수에서 this를 사용할 경우? (콜백함수가 일반함수일 경우) window 객체를 가리킨다.

      const artist = {
	name: 'Minnie',
	nums: [1, 2, 3],
	print() {
		this.nums.forEach(function(num){
			console.log(`name: ${this.name}, num: ${num}`); // name: undefined, num: 1
		});
	}
};

    • 화살표 함수에서 this를 사용할 경우? 상위 스코프의 this를 가리킨다. Lexical this라고 부른다.

      const artist = {
	name: 'Minnie',
	nums: [1, 2, 3],
	print() {
		this.nums.forEach((num) => {
			console.log(this); // {name: 'Minnie', nums: Array(3)}
		});
	}
};

  • Event Loop

    • 이벤트 루프는 Call Stack(호출 스택)과 Callback Queue(콜백 큐)를 계속해서 확인하며, Call Stack이 비어 있을 때 콜백 큐에 대기 중인 콜백 함수들을 FIFO(First In, First Out) 방식으로 Call Stack에 넣어 비동기 코드를 실행합니다. 이는 비동기 함수들이 완료된 후에도 Call Stack에 있는 동기 코드가 모두 처리될 때까지 대기하다가 실행되는 구조를 따릅니다.

    • image

  • 클로저

    • 다른 함수 내부에 정의된 함수가 있는 경우 외부 함수가 실행을 완료하고 해당 변수가 해당 함수 외부에서 더 이상 액세스할 수 없는 경우에도 해당 내부 함수는 외부 함수의 변수 및 범위에 액세스할 수 있습니다.

미션을 하면서 배운 점?

미션 1. 음식 메뉴 앱

  • github repository: https://github.com/hyer0705/inflearn-warmingup-club-2/tree/main/javascript/food-menu-app

  • 메뉴 데이터는 아래와 같은 구조로 정의합니다:

    {
  category: 'breakfast' | 'lunch' | 'shakes' | 'dinner',
  food: string,
  cost: number,
  desc: string,
  img: string
}

  • 각 메뉴는 menus 변수에 배열 형태로 저장됩니다.

  • 사용자가 음식 카테고리를 선택하면, Array.prototype.filter() 메서드를 사용해 menus에서 선택한 카테고리에 맞는 음식들을 필터링합니다.

  • 필터링된 음식 데이터를 기반으로, document.createElement(), element.innerHTML, element.innerText 등의 DOM API를 사용해 화면에 표시합니다.

미션 2. 가위 바위 보 앱

  • github repository: https://github.com/hyer0705/inflearn-warmingup-club-2/tree/main/javascript/rock-paper-scissors-app

  • playData 변수에 총 플레이 횟수, 플레이어 승리 횟수, 컴퓨터 승리 횟수를 저장합니다.

    const playData = {
	totalPlayCnt: 10,
	playerWin: 0,
	computerWin: 0
}

  • 사용자가 가위, 바위, 보 버튼을 클릭하면, 컴퓨터는 Math.random() 메서드를 사용해 랜덤으로 가위, 바위, 보 중 하나를 선택합니다.

  • 버튼 클릭 시 플레이 횟수가 줄어들며, 결과는 playData에 저장됩니다.

  • 버튼 클릭시 해당 라운드의 결과를 DOM 조작 API를 사용하여 화면에 표현해줍니다.

  • 10회 라운드가 끝나면 게임이 종료되고, 최종 결과가 화면에 표시됩니다.

  • "다시 시작" 버튼을 클릭하면 playData가 초기화되어 게임을 다시 시작할 수 있습니다.

Lacked, 스터디에 참여하면서 부족했던 점은?

  • 개인적인 사정으로 1주차 진도표의 절반만 진행했다.

Longed For, 앞으로 개선하고 싶은 점은?

  • 다음주에는 커리큘럼에 따라갈 수 있도록 열심히 강의를 듣고 미션을 수행해야지! 그러기 위해 빨간날과 주말을 적극적으로 활용해야 겠다.

참고자료

댓글을 작성해보세요.

채널톡 아이콘