[인프런 워밍업 클럽 스터디 2기 FE] 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) 전달 되는 것을 의미합니다.

    • 

• Event Capturing

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

    • 

• Event Delegation

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

    • 

• 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에 있는 동기 코드가 모두 처리될 때까지 대기하다가 실행되는 구조를 따릅니다.

  • 

• 클로저

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

미션을 하면서 배운 점?

미션 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, 앞으로 개선하고 싶은 점은?

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

참고자료

• 강의 출처: 따라하며 배우는 자바스크립트 A-Z, John Ahn

• Event Bubbling Image: https://www.freecodecamp.org/news/event-bubbling-in-javascript/?source=post_page-----4209bf40575c--------------------------------

• Event Capturing Image: https://www.javascripttutorial.net/javascript-dom/javascript-events/

• Event Delegation Image: https://dmitripavlutin.com/javascript-event-del

• Event Loop Image: https://medium.com/@burak.bburuk/what-is-the-event-loop-in-javascript-and-why-is-it-essential-to-understand-b11af520a28b