[CNU SW Academy] 44일차(23.02.02)

프로그래머스 - 프론트엔드 미니 데브코스

SPA의 역사(Single Page Application)

- 태초에는 MPA(Multi Page Application)

    - 2000년 초반, 그 이전

    - javascript의 영향이 크지 않았음

 

점점 브라우저에 요구사항이 많아짐

=> Ajax(Asynchronous JavaScript and Xml) 등장

- 구글 지도 : 지도를 동적으로 보여줌

 

페이지 이동 없이 페이지를 가져올 수 있지 않을까?

- Hashbang

화면 전환 시 깜빡임이 없어지고, 로딩도 보여줄 수 있게 되었다.

문제점으로는 검색 엔진에 잡히지 않는다는 것

 

HTML5 History API

- pushState

- replaceState

페이지 이동없이 브라우저의 주소 변경 가능

 

pjax

pushState + ajax = pjax

Hashbang의 단점을 보완

 

jquery-pjax

- pjax를 아주 쉽게 적용할 수 있게 만든다.

 

=> server side rendering의 시작

 

react-router

- 공식 라이브러리는 아님

https://reactrouter.com/en/main

Home v6.8.0

페이지 구조 만들기

 

useImperativeHandle

Ref를 통해 사용자 정의 함수를 만들어 상위 컴포넌트에 제공

 

컴포넌트 심화

- 컴포넌트는 어떻게 설계해야 하는가?

 

아키텍처

- 일을 잘 하기 위한 방법을 나타낸다.

- 모듈의 구현과 나누는 방법을 정한다.

 

모듈에서 중요한 것은 응집도와 결합도

응집도

- 모듈 내에 포함된 요소들이 서로 연관되어 있는 정도

- 높은 응집도일수록 좋은 설계

- 하나의 책임에 집중하고 독립성을 높임

 

높은 응집도를 위해

1. 공통 폐쇄 원칙

- 같은 이유로 동일한 시점에 변경되는 기능을 하나의 모듈로 묶어야 한다.

2. 공통 재사용 원칙

- 모듈 내의 기능들은 함께 재사용이 될 수 있어야 한다.

상황에 따라 한쪽에 힘을 줄 수도 있다. 적절하게 조절하는 것이 개발자의 능력

 

결합도

- 다른 모듈과의 의존성에 대한 정도

- 낮은 결합도일수록 좋은 설계

- 결합도가 높을수록 수정에 대해 영향을 미치는 정도가 증가한다.

 

낮은 결합도를 위해

1. 안정된 의존성 원칙

- 더 안정된 모듈을 의존하자.

- 의존하는 모듈이 적고 의존되는 모듈이 많을 수록 안정적인 모듈

2. 안정된 추상화 원칙

- 컴포넌트는 안정된 만큼 추상적이어야한다.

---

코딩테스트

레이저 포인터

x1, y1, x2, y2 = map(int, input().split())

if y1 == y2 or x1 == x2:
    print(0)
else:
    print(1)