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

자바스크립트[8강]Symbol Type이 타입의 목적은 유니크한 식별자를 만들기 위해서 사용됩니다. Symbol.keyFor()란Symbol.for를 이용해서 전역 심볼을 만들 때(찾을 때)사용하는 description을 얻을 수 있는게 symbol.keyFor()입니다. Iterator(반복기) & Generator(생성기)iterable : 배열은 반복 가능한 객체이며, 반복이 가능하다는 것을 iterable이라고 부릅니다. for…of를 이용할 수 있거나 [Symbol.iterator]()이 값을 가지면 iterable 한 것입니다.iterator : 반복자는 next()를 호출해서 { value: , done: } 두개의 속성을 가지는 객체를 반환하는 객체입니다.Generator Function는 사용자의 요구에 따라 다른 시간 간격으로 여러 값을 반환할 수 있습니다. 일반 함수 => 단 한 번의 실행으로 함수 끝까지 실행됩니다.제너레이터 함수 => 사용자의 요구에 따라 일시적으로 정지될 수도 있고, 다시 시작될 수도 있습니다.Function* -> 제너레이터 함순느 별표가 붙어야함 [9강]디자인패턴소프트웨어 설계의 주어진 콘텍스트 내에서 일반적으로 발생하는 문제에 대한 일반적이고 재사용 가능한 솔루션입니다.디자인 패턴은 프로그래머가 응용 프로그램이나 시스템을 디자인할 때 일반적인 문제를 해결하는 데 사용할 수 있는 공식화된 모범사례입니다. 장점최고의 솔루션 - 여러번의 수정을 통해 완성되었기에 잘 작동하는것을 알고있어 개발자가 자주 사용함재사용성 - 단일문제에만 존재할 수 없어 여러 문제를 해결하기 위해 특정 상황에서 수정할 수 있는 재사용 가능한 솔루션풍부한 표현련 - 부분적으로 설명할 수 있음향상된 의사 소통 - 문제에 대한 공통 목표를 설정하여 잠재적인 문제와 이러한 문제에 대한 솔루션에 대해 서로 의사 소통하는 데 도움이 됨필요없는 코드 리팩토링 - 종종 다양한 문제에 대한 최적의 솔루션코드베이스 크기 감소 - 공간을 거의 차지하지 않고 몇 줄의 코드로 필요한 솔루션을 구현하여 소중한 공간을 보존Singleton싱글톤 패턴은 클래스의 인스턴스화를 하나의 객체로 제한하는 디자인 패턴입니다. 이는 시스템 전체에서 작업을 조정하는 데 정확히 하나의 객체가 필요한 경우에 유용합니다.고전적으로 싱글톤 패턴은 클래스가 존재하지 않은 경우 클래스의 새 인스턴스를 생성하는 메서드로 클래스를 생성하여 구현할 수 있습니다. 인스턴스가 이미 존재하는 경우 해당 개체에 대한 참조를 반환합니다. Factory 팩토리 패턴을 사용하면 특수 함수인 팩토리 함수를 사용하여 비슷한 객체를 많이 만들 수 있습니다. => 비슷한 객체를 반복적으로 생성해야하는 경우 사용Mediator 중재자 패턴은 객체 그룹에 대한 중앙 권한을 제공합니다. Observer옵저버 패턴은 이벤트 드리븐 시스템을 이용하는 것Module 모듈패턴은 코드를 더 작고 재사용 가능한 조각으로 분할하는 것을 도와줍니다. 리액트-컴포넌트리액트로 만들어진 앱을 이루는 최소한의 단위1. 클래스형 컴포넌트class App extends Component { render(){ return 안녕하세요. }}2 . 함수형 컴포넌트 function App(){ return 안녕하세요.}-브라우저가 그려지는 원리 및 가상돔리액트의 주요 특징 중 하나는 가상돔을 사용 하는 것브라우저가 랜더링 하는 과정을 살펴보자웹페이지 빌드 과정 : 웹 브라우저가 HTML 문서를 읽고, 스타일 입히고 뷰포트에 표시하는 과정DOM tree 생성 -> Rander tree 생성 -> Layout -> 실제 화면에 그리기문제점 : 어떤 인터렉션에 의해 DOM에 변화가 발생하면 그 때 마다 Render tree가 재생성 됨. 즉 모든 요소들의 스타일을 다시 계산(레이아웃, 화면 재그리기) , 불필요한 DOM을 조작하는 비용이 너무 크게 됨 이러한 문제점으로 인해 나온 것이 가상 돔. 가상돔이란 실제 DOM을 메모리에 복사해준 것으로 생각하면 됨작동원리: 데이터가 바뀌면 가상돔에 렌더링되고 이전에 생긴 가상돔과 비교해서 바뀐 부분만 실제 돔에 적용을 시켜줌. 바뀐 부분을 찾는 과정을 Diffing이라고 부르며, 바뀐 부분만 실제 돔에 적용시켜주는 것을 재조정이라고 부름 -react app 실행해보기npm run start : 이 명령어로 리액트 앱을 시작할 수 있음-SPAApp.js파일의 소스 코드를 변경하면 변경한 부분이 화면에 적용이 됨public/index.htmlHTML 템플릿 파일입니다. 하단의 div 엘리먼트의 id를 root로 해놓음 scr/index.js자바스크립트의 시작점. 여기서 위에 root id를 가진 div 엘리먼트를 잡아 줌. 그래서 그 엘리먼트 안에서 화면을 꾸밀 수 있게 됨ReactDOM.render( document.getElementById(‘root’));Single Page Application(SPA)원래 a페이지를 만들면 a.html b페이지를 만들면 b.html 이런식으로 만듦 (전통적인 웹 사이트 만들때 사용하는 멀티 페이지 어플리케이션)하지만 요즘엔 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현함 (싱글 페이지 어플리케이션 SPA) 과제비밀번호 생성기 앱객체에 각 조건의 값들을 만들어 체크된 것들의 랜덤으로 비밀번호 생성되며, 구현한 값 클릭 시 복사 가능하도록 구현 하였다

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

강의[ 변수 ]var : 중복선언, 재할당 가능 , 마지막에 할당된 값이 변수에 저장, 함수스코프let : 중복선언 불가, 재할당 가능, 블록스코프const : 재선언, 재할당 불가능 -> 상수 , const 선언했어도 배열과 객체의 값은 변경 가능, 블록스코프 [This]Function => window.objectMethod => objectConstructor Function => {}화살표함수 this는 항상 상위스코프 this를 가르키게 된다 메소드 사용하기- call()call 메소드는 함수를 호출하는 함수이며, 첫번째 매개변수로 어떤한 것을 전달해주면 호출되는 함수의 this 안에 window 객체가 아닌 전달받은 것을 받게 됨 - apply()call 메소드와 사용법은 동일, 인수를 넣을때는 [] 로 넣는다 - bind()function func(language){If(language == ‘kor’){console.log(`language: ${this.korGreeting}`);}else{console.log(`language: ${this.engGreeting}`);}}const greeting = {korGreeting : ‘ 안녕‘,engGreeting: ‘Hello’,}func.bind(greeting);// func() 함수에서 this에다가 greeting 객체를 바인딩 시켜준다는 개념const boundFunc = func.bind(greeting);// 위 변수에다가 바인딩 시켜준 함수를 할당boundFunc(‘kor’);// 변수에 담겨진 함수를 호출, 호출할때 인수값 넣기 [ 이벤트루프 ]setTimeout()전역 setTimeout() 메서드는 만료된 후 함수나 지정된 코드 조각을 실행하는 타이머를 설정합니다.두번째 매개변수로 들어간 밀리초 단위가 지난 후 첫번째 매개변수인 콜백함수가 호출됨 [ closure ]다른 함수 내부에 정의된 함수가 있는 경우 외부함수가 실행을 완료하고 해당 변수가 해당 함수 외부에서 더 이상 액세스할 수 없는 경우에도 해당 내부 함수는 외부 함수의 변수 및 범위에 엑세스할 수 있습니다. [ map ,filter,reduce 메소드 ]- mapmap() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환 - filterfilter()메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환 - reducereduce()메서드는 배열의 각 요소에 대해 주어진 리듀서 함수를 실행하고, 하나의 결과값을 반환리듀서 함수는 네개의 인자를 가집니다.1. 누산기(acc) - 여기에 계속 값이 쌓임2. 현재값(cur)3. 현재 인덱스(idx)4. 원본 배열(src)[ 0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array){return accumulator + currentValue;}) [ undefined 와 null 차이 ]undefined는 아무값도 할당 받지 않은 상태null은 비어있는, 존재하지 않는 값을 의미변수에 의도적으로 값이 없다고 할때는 null 사용 미션[ 음식 메뉴 앱 ]스타일 dispaly로 메뉴 클릭 시 해당 메뉴 이미지와 글이 보이도록 구현하였고 forEach에 대해 공부할 수 있었다[ 가위 바위 보 게임 ]공통함수로 만들려고 했고 동작을 생각하면 코드를 어떻게 구성할지 생각할 수 있었다