자바스크립트

[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 <h1>안녕하세요.</h1>

}

}

2 . 함수형 컴포넌트

function App(){

return <h1>안녕하세요.<h1>

}

-브라우저가 그려지는 원리 및 가상돔

리액트의 주요 특징 중 하나는 가상돔을 사용 하는 것

브라우저가 랜더링 하는 과정을 살펴보자

웹페이지 빌드 과정 : 웹 브라우저가 HTML 문서를 읽고, 스타일 입히고 뷰포트에 표시하는 과정

DOM tree 생성 -> Rander tree 생성 -> Layout -> 실제 화면에 그리기

문제점 : 어떤 인터렉션에 의해 DOM에 변화가 발생하면 그 때 마다 Render tree가 재생성 됨. 즉 모든 요소들의 스타일을 다시 계산(레이아웃, 화면 재그리기) , 불필요한 DOM을 조작하는 비용이 너무 크게 됨

이러한 문제점으로 인해 나온 것이 가상 돔. 가상돔이란 실제 DOM을 메모리에 복사해준 것으로 생각하면 됨

작동원리: 데이터가 바뀌면 가상돔에 렌더링되고 이전에 생긴 가상돔과 비교해서 바뀐 부분만 실제 돔에 적용을 시켜줌. 바뀐 부분을 찾는 과정을 Diffing이라고 부르며, 바뀐 부분만 실제 돔에 적용시켜주는 것을 재조정이라고 부름

-react app 실행해보기

npm run start : 이 명령어로 리액트 앱을 시작할 수 있음

-SPA

App.js파일의 소스 코드를 변경하면 변경한 부분이 화면에 적용이 됨

public/index.html

HTML 템플릿 파일입니다. 하단의 div 엘리먼트의 id를 root로 해놓음

<div id=“root”></div>

scr/index.js

자바스크립트의 시작점. 여기서 위에 root id를 가진 div 엘리먼트를 잡아 줌. 그래서 그 엘리먼트 안에서 화면을 꾸밀 수 있게 됨

ReactDOM.render(

<React.StrictMode>

<App />

</React.StricMode),

document.getElementById(‘root’)

);

Single Page Application(SPA)

원래 a페이지를 만들면 a.html b페이지를 만들면

b.html 이런식으로 만듦 (전통적인 웹 사이트 만들때 사용하는 멀티 페이지 어플리케이션)

하지만 요즘엔 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현함 (싱글 페이지 어플리케이션 SPA)

과제

비밀번호 생성기 앱

• 객체에 각 조건의 값들을 만들어 체크된 것들의 랜덤으로 비밀번호 생성되며, 구현한 값 클릭 시 복사 가능하도록 구현 하였다