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

Liked, 스터디에 참여하며 좋았던 점은?JavaScript에 대해서 복습하는 시간을 가질 수 있었다.미션을 수행하면서 JavaScript 라이브러리, 프레임워크를 사용하지 않고 tailwindCSS를 적용하는 법을 배울 수 있어서 좋았다. 배운걸 실제로 적용해봐야지 머릿 속에 각인되고 더 잘 이해가 되는 거 같다.Learned, 스터디에서 배운 점은?강의에서 배운 점?호이스팅JavaScript에서 호이스팅은 코드가 실행되기 전에 변수 및 함수 선언(이름)이 로컬 범위(유효 범위)의 맨 위로 들어올려지거나 끌어올려지는 경우를 설명합니다.DOM, Document Object Model돔은 메모리에 웹 페이지 문서 구조를 트리 구조로 표현해서 웹 브라우저가 HTML 페이지를 인식하게 해줍니다.웹 페이지를 이루는 요소들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미합니다.CRP, Critical Rendering PathDOM 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-appplayData 변수에 총 플레이 횟수, 플레이어 승리 횟수, 컴퓨터 승리 횟수를 저장합니다.const playData = { totalPlayCnt: 10, playerWin: 0, computerWin: 0 } 사용자가 가위, 바위, 보 버튼을 클릭하면, 컴퓨터는 Math.random() 메서드를 사용해 랜덤으로 가위, 바위, 보 중 하나를 선택합니다.버튼 클릭 시 플레이 횟수가 줄어들며, 결과는 playData에 저장됩니다.버튼 클릭시 해당 라운드의 결과를 DOM 조작 API를 사용하여 화면에 표현해줍니다.10회 라운드가 끝나면 게임이 종료되고, 최종 결과가 화면에 표시됩니다."다시 시작" 버튼을 클릭하면 playData가 초기화되어 게임을 다시 시작할 수 있습니다.Lacked, 스터디에 참여하면서 부족했던 점은?개인적인 사정으로 1주차 진도표의 절반만 진행했다.Longed For, 앞으로 개선하고 싶은 점은?다음주에는 커리큘럼에 따라갈 수 있도록 열심히 강의를 듣고 미션을 수행해야지! 그러기 위해 빨간날과 주말을 적극적으로 활용해야 겠다.참고자료강의 출처: 따라하며 배우는 자바스크립트 A-Z, John AhnEvent 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-delEvent Loop Image: https://medium.com/@burak.bburuk/what-is-the-event-loop-in-javascript-and-why-is-it-essential-to-understand-b11af520a28b

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

인프런 워밍업 클럽 2주차 발자국스터디 첫 모임에서 예산 계산기 앱 코드리뷰를 했는데 확실히 다른 사람들 코드를 보면서 배우는 것들이 있는 것 같다. 강의 요약리액트란?React 는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리이다React는 인터렉션이 많은 웹 앱을 개발하기 위해서 주로 사용된다Framework vs LibraryFramework는 어떠한 앱을 만들기 위해 필요한 대부분의 것을 갖고 있다Library는 어떠한 특정 기능을 모듈화 해놓은 것이다리액트를 사용하는 이유?상대적으로 배우기 쉬운 라이브러리여러 기능들을 위해 이미 만들어져 있는 라이브러리 환경이 많음많은 기업들의 사용으로 검증이 된 라이브러리컴포넌트?리액트로 만들어진 앱을 이루는 최소한의 단위브라우저가 그려지는 원리와 가상돔리액트의 주요 특징 중 하나는 가상돔을 사용한다는 것이다Critical Rendering PathDom tree 생성Render tree 생성LayoutPaint가상돔이 작동되는 방식?리액트에서는 항상 렌더링 이전의 객체(가상돔)와 렌더링 이후의 객체(가상돔)를 가지고 있다리액트에서는 어떠한 State(데이터)가 바뀌면 가상돔이 새로 생성된다Diffing: 바뀐 부분을 찾는 과정Reconciliation: 바뀐 부분만 실제 돔에 적용시켜주는 것SPA웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현하는 것JSX자바스크립트의 확장 문법리액트에서는 JSX를 이용해서 화면에서 UI가 보이는 모습을 나타내준다Key 속성?key는 React가 변경, 추가 또는 제거된 항목을 식별하는데 도움이 된다key를 이용해서 어떠한 부분이 바뀌었는지 인식할 수 있다Array.prototype.map배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환하는 메서드Array.prototype.filter주어진 배열의 일부에 대한 얕은 복사본을 생성하고, 주어진 배열에서 제공된 함수에 의해 구현된 테스트를 통과한 요소로만 필터링 한다state컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체Spread Operator(`...`)ES6에 새롭게 추가되었으며, 특정 객체 또는 배열의 값을 다른 객체, 배열로 복제하거나 옮길 때 사용한다React HooksReactConf 2018에서 발표된 class 없이 state를 사용할 수 있는 기능필요한 이유?Class Component로 사용되어온 React에서 느껴왔던 불편함이나 문제점들을 해결하기 위해 개발됨Propsproperties의 줄임말props는 상속하는 부모 컴포넌트로부터 자녀 컴포넌트에 데이터 등을 전달하는 방법props는 읽기 전용(immutable)으로 자녀 컴포넌트 입장에서는 변하지 않는다구조 분해 할당배열이나 객체의 속성을 해체하며 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식스스로 칭찬하고 싶은 점평일 낮에는 시간이 거의 없음에도 불구하고 금요일 스터디에 참여하기 위해 어떻게든 예산 계산기 앱 을 완성시켰다.아쉬웠던 점2주차 발자국을 제때 작성해서 올리지 못한 것과 주말에 시간이 있음에도 밀린 강의를 듣는 거에 시간을 많이 투자하지 못했다.다음주 목표발자국 마감기한에 맞춰 올리기!포켓몬 도감 앱 완성하기!

인프런 워밍업 클럽 스터디 1기 FE 과제(1번, 2번)

1번 과제(Day 2) (음식 메뉴 앱)깃허브 저장소 주소: https://github.com/hyer0705/inflearn-warmingup-club-1-fe-practice/tree/main/practice-1-food-menu-app2번 과제(Day 3)(가위 바위 보 앱)깃허브 저장소 주소: https://github.com/hyer0705/inflearn-warmingup-club-1-fe-practice/tree/main/practice-2-rock-sissors-paper-app

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

인프런 워밍업 클럽 1주차 발자국시간 분배를 잘못해서 강의를 거의 듣지 못하고 미션도 해결하지 못했다...2주차부터 열심히 따라가야 한다.강의 요약console 객체새로 알게 된 메서드: table(), warn(), time(), timeEnd(), clear()var, let, constvar: 중복 선언, 재할당 가능let: 중복 선언 불가능, 재할당 가능const: 중복 선언, 재할당 불가능변수의 참조 범위var: 함수 레벨 스코프let, const: 블록 레벨 스코프호이스팅코드가 실행되기 전에 변수 및 함수 선언(이름)이 로컬 범위(유효 범위)의 맨 위로 들어올려지거나 끌어올려지는 경우JS 타입원시 타입: String, Number, Boolean, Symbol, null, undefined,참조 타입: Object, Array...JS 타입 변환String(), Number() constructor 사용toString() 등의 메서드 사용자동 타입 변환string + number = stringJS 연산 및 Math Object+, -, *, /, %Math.PI, Math.E, Math.round(), Math.ceil(), Math.min(), Math.max(), Math.randon(), ...Template Literalsbacktick을 사용Loopsforfor/inwhiledo/whileWindows 객체브라우저에 의해 자동으로 생성되며 웹 브라우저 창을 나타냄브라우저의 창에 대한 정보를 알 수 있고, 이 창을 제어할 수 있음var 키워드로 변수를 선언하거나 함수를 선언하면 이 window 객체의 프로퍼티가 됨DOM?메모리에 웹 페이지 문서 구조를 트리구조로 표현해서 웹 브라우저가 HTML 페이지를 인식하게 해줌웹 페이지를 이루는 요소들을 JS가 이용할 수 있게끔 브라우저가 트리 구조로 만든 객체 모델을 의미함DOM 트리를 DOM에서 제공해주는 API를 이용해서 조작할 수 있음CRP 과정DOM Tree 생성 > Render Tree 생성 > Layout(reflow) > Paint스스로 칭찬하고 싶은 점1주차 강의를 거의 듣지 못했지만 연휴를 활용하여 강의를 듣고 공부를 했다.아쉬웠던 점1주차 강의를 거의 듣지 못했다. 열심히 따라가야한다.보완하고 싶은 점평일에 시간이 부족하여 진도를 따라가지 못하므로 주말을 활용해서 따라가도록 해야겠다. 우선은 내일까지 연휴이니 연휴를 활용해서 진도를 따라잡아야겠다...다음주 목표최소 진도 따라잡기! 중간 점검까지 미션 3개 이상 완료하기!