Vanilla js
-
mvc + observerVanilla js 2021. 9. 19. 21:59
MVC 모델은 layered style이다. 아래 레이어는 상위 레이어를 사용하는 것을 권장하지 않는다. a 계층이 b 계층을 사용하면 a 계층은 b 계층에 종속되고 b 계층이 없으면 a 계층은 자신의 역할을 수행할 수 없다. 이러한 관계를 usage dependency 라고 한다. 즉, 상위 계층은 하위 계층에 대해 usage dependency 가 있다. MVC 패턴에 Observer 패턴을 적용시킨다면 Model은 "Observable"이라 할 수 있고, View는 "Observer"라고 할 수 있다. Observable이 변경되면 해당 상태를 Observer에게 알리고 관찰자는 해당 변경사항에 대응할 수 있어야 한다. 컨트롤러는 더 이상 뷰를 업데이트 할 필요가 없고 뷰는 모델에 따라서 업데이트가..
-
innerHTML , innerText , appendChildVanilla js 2021. 9. 19. 01:44
innerHTML DOM 객체의 Property로 존재한다. 특정 노드의 내부 문자를 가져올때 html 태그를 태그로 인식 문자열을 노드로 교체하는 단계가 있어 브라우저가 문자열을 파싱하고 노드 만들고 다시 렌더링하는 과정을 거치게 된다 노드를 직렬화하여 할당하는 방식 XSS 공격에 취약하다. XSS ( Cross-Site Scripting ) 웹 애플리케이션에서 많이 나타나는 취약점이다. 관리자가 아닌 이가 웹 페이지에 악성 스크립트를 삽입할 수 있는 취약점 이다. 사용 예시 : https://tecoble.techcourse.co.kr/post/2021-04-26-cross-site-scripting/ XSS 방지 방법 XSS 공격은 스크립트를 삽입하는 방식으로 발생하기 때문에 기본적으로 스크립트 태..
-
Observer 패턴Vanilla js 2021. 9. 18. 00:27
옵저버 패턴 객체의 상태 변화를 관찰하는 관찰자 들의 목록을 객체에 등록하여 상태 변화가 있을 때마다 메서드를 통해서 객체가 목록에 등록된 옵저버에게 통지하는 디자인 패턴 [ 구독 ] 객체의 상태를 감지하기 위해 옵저버를 등록하는 것 [ 통보 ] 객체의 state가 변화하면 옵저버에게 state를 알린다. 옵저버들은 state를 기반으로 각자 일처리를 진행한다. [ 코드 ] https://github.com/jin-Pro/Design-Pattern/tree/master/Observer-Pattern
-
MVC 패턴Vanilla js 2021. 9. 18. 00:27
[ M ( Model ) ] 모델은 화면과 상관없는 데이터의 집합체 이다. 서버와 연동되어 있다면 서버에 API 요청을 보냈을 때 받은 응답들을 모델이라 할 수 있다. 대부분 DB에 들어가 있는 테이블의 레코드 이거나 이를 조합한 데이터 주로 class를 모델이라고 본다. [ V ( View ) ] 화면에 표시하는 컴포넌트 데이터 없이 화면만 표시할 수도 있고, 모델을 인자로 받아서 화면에 표시하기도 한다. 뷰에서 이벤트를 받기는 하지만, 이를 처리하는 비즈니스 로직은 포함하지 않는다. 이벤트 리스너에 이벤트를 전달하는 역할만 한다. 비즈니스 로직이 필요하다면 컨트롤러에서 담당한다. 뷰에서는 모델을 사용하지만 변경은 하지 않는다. 변경은 컨트롤러에서 이루어져야하며, 변경된 모델은 컨트롤러에서 다시 뷰로 ..
-
Vanilla Javascript로 가상돔(VirtualDOM) 만들기Vanilla js 2021. 9. 18. 00:26
https://junilhwang.github.io/TIL/Javascript/Design/Vanilla-JS-Virtual-DOM/#_1-%E1%84%87%E1%85%B3%E1%84%85%E1%85%A1%E1%84%8B%E1%85%AE%E1%84%8C%E1%85%A5-%E1%84%85%E1%85%A9%E1%84%83%E1%85%B5%E1%86%BC-%E1%84%80%E1%85%AA%E1%84%8C%E1%85%A5%E1%86%BC
-
Vanilla Javascript로 상태관리 시스템 만들기Vanilla js 2021. 9. 18. 00:22
현대적인 프론트엔드 개발에서 중요한 것은 상태관리 라고 한다. Vue나 React 같은 프레임워크의 주된 목적 중 하나가 상태를 기반으로 DOM을 렌더링 하는 것이기 때문이다. 상태관리 학습을 위한 기초적인 구현에서는 상태관리와 컴포넌트 사이의 depth가 낮기 때문에 프레임워크가 필요하지 않다. 하지만 규모가 큰 어플을 구현하게 된다면 복잡한 상태관리와 컴포넌트 사이의 관계가 깊어지기 때문에 상태관리 프레임워크가 중요하다. Observer Pattern 중앙 집중식 저장소를 간단하게 Store 라고 표현해보자. Store를 구현하기 위해 먼저 저장소(Store)와 컴포넌트(Component)의 관계를 잘 살펴봐야 한다. - Store는 여러개의 컴포넌트에서 사용될 수 있다. - Store가 변경될 때,..
-
Vanilla Javascript로 웹 컴포넌트 만들기Vanilla js 2021. 9. 18. 00:19
컴포넌트와 상태관리 [ 상태관리의 탄생 ] jQuery는 Dom을 쉽게 조작할 수 있도록 만들어주고 크로스 브라우징과 관련된 이슈를 해결해 주었다. 브라우저와 JavaScript의 발전으로 브라우저 단에서 렌더링을 하고, 서버에서는 REST API 혹은 GraphQL같이 브라우저 렌더링에 필요한 데이터만 제공하는 형태로 기술이 변화했다. 그로인해, 직접적으로 DOM 을 다루는 행위가 급격하게 감소하였고, 상태(state)를 기준으로 DOM을 렌더링 하는 형태로 발전하였다. 즉, State가 변하지 않는다면 DOM 이 변하면 안되는 것이다. 여기서 CSR이라는 개념과 상태관리 개념이 생기게 되었다. SSR(Server-Side Rendering) - 서버에서 HTML을 만들어서 클라이언트에 넘겨주는 것 -..