네트워크/CS Study
-
[항해99 WIL] Virtual DOM && props && state네트워크/CS Study 2023. 6. 26. 10:10
Virtual DOM Virtual Dom이란? 랜더링을 하는 과정에서 서버 또는 클라이언트가 parsing한 DOM tree과 CSSOM을 가지고 render tree를 만들게 되는데 이후에 layout과 painting을 거쳐서 사용자가 가시적을 볼 수 있는 클라이언트가 완성이 된다. 이때 SPA의 경우에는render tree의 구조도 복잡하기 때문에 사용자의 액션마다 모든 DOM을 리랜더링할 수는 없다. 이때 사용되는 Virtual DOM은 먼저 사용자의 액션에 따른 변화를 계산하여 Node를 수정하고 페이지를 업데이트 하는과정에서 DOM tree와 차이점을 비교해서 차이가 나는 부분만 리랜더링하면서 UX를 최적화하기 위해서 고안된 DOM의 복제품이다. props props란?부모 컴포넌트에서 자식..
-
[항해99 WIL] ES5 VS ES6네트워크/CS Study 2023. 6. 21. 14:08
왜 알아야하는가? 모든 회사가 최신 문법을 항상 사용한다는 생각이라면 굳이 안해도 된다. 하지만 일말의 가능성도 있으니 레거시를 분석할 때 이해를 못하면 좀 쪽팔릴것이다 그래서 알아야한다. ES5는 2009년에 ES6 2015년에 출시된 것으로 뒤에 숫자는 각각의 버전을 의미하고 있다 뭐가 바뀌었냐? 1. ES5 strict mode (엄격 모드)의 도입 : 코드 자성의 실수나 잠재적인 오류를 방지하기 위한 규칙 도입 배열 메소드 추가: forEach, map, filter, reduce 메소드 JSON객체 bind 메소드 등 2. ES6 let과 const의 도입: 블럭 범위 변수 선언 지원 화살표 함수('=>') : 더 간결한 함수 표현식을 작성할 수 있게 되었다. 이 화살표 함수는 함수 컨텍스트 내..
-
[CS Study] Closure네트워크/CS Study 2023. 6. 21. 13:51
클로저란? 정의로써는 함수와 함수가 선언된 어휘적 환경의 조합이란다. ???? 그냥 전역스코프에 선언한 변수는 아무대서나 건드릴 수 있으니 아무나 못건드리고 나만 건드릴 수 있게 만들어주는 녀석이다. 클로져는 상태를 안전하게 활용하기 위해서 사용되어야 한다 === 의도치 않은 변경은 막아야지 써야하는 이유? 그래서 왜 아무나 건드리면 안되는데? 라고 물어보면 다음과 같은 상황을 볼 수있다. var x = 1; var y = 1; function sumOne() { return x++ } function ySum() { return y++, x++ } sumOne() console.log(x) // x = 2 sumOne() ySum() x++ console.log(x) // x = 5 나는 sumOne(..
-
[CS Study] MVVM && FLUX네트워크/CS Study 2023. 6. 20. 22:59
디자인패턴이란 무엇인가? 디자인패턴이란 소프트웨어의 개발 방법을 공식화 한 것으로 일종의 규칙이다 이를 통해 구현자들 간의 커뮤니케이션의 효능을 높이기 위해서 사용해야 하는 것이다. 이러한 디자인 패턴의 대표적인 예시가 바로 MVVM, FLUX, MVC 와 같은 것들이다. 이것들에 대해서 한번 알아보자! MVVM 과 FLUX의 특징 먼저 뷰를 통해 보여진 내용에 대해서 사용자가 액션을 하게 되면 커멘트 패턴으로 모델뷰에 액션이 전달됩니다 이때 뷰모델은 모델에게 데이터를 요청하게 되고 모델에 요청에 응답하여 데이터를 준 것을 뷰 모델에서 가공하고 저장하게 되고 이걸 뷰가 데이터바인딩해서 화면에 나타나게 한다.장점으로는 의존성을 없애므로 독립적으로 모듈을 개발 할 수 있지만 뷰모델이 상당히 복잡한 구조라는 ..