공부 정리 (39) 썸네일형 리스트형 22.11.09 : SSR, CSR (TTV, TTI) 본문은 드림코딩 강의를 정리한 내용입니다. 1990년 중반까지는 모두다 Static site였다. 서버에 잘 만들어진 html 문서들이 있고 사용자가 브라우저를 통해 도메인에 접속하면 서버에 이미 배포되어있는 html 문서들을 가져와서 보여주는 형식을 사용해왔다. 문제점은 클라이언트가 페이지 내에서 다른 링크를 클릭하면 서버에서 해당 페이지의 html을 다시받아와서 페이지 전체가 업데이트 되어야 했다. 1996년, 문서 내에서 또 다른 문서를 담을 수 있는 iframe 태그가 도입되었고, 페이지 내에서 부분적으로 문서를 받아와 업데이트가 가능해졌다. 1998년, fetch API의 원조, XMLHttpRequest가 개발되어 html이 아니라 jason 같은 포맷으로 필요한 데이터만 받아올 수 있게 되었.. 22.11.09 : webpack 웹팩은 오픈 소스 자바스크립트 모듈 번들러이다. 모듈 번들러는 여러개로 나뉘어져 있는 파일들을 하나로 만들어준다는 개념으로, 주로 자바스크립트를 위한 모듈 번들러이나 호환 플러그인을 포함할 경우 HTML, CSS, 이미지와 같은 property들을 변환할 수 있다. 왜 여러 파일들을 합치는 과정이 필요할까? 그 이유는 HTTP요청 방식과 관련있다. HTTP/2에서는 하나의 커넥션에 동시에 여러 파일들을 요청할 수 있지만, 우리가 주로 사용하는 HTTP/1.1 에서는 하나의 커넥션에서 하나씩 요청을 보내야 한다. 즉 요청하는 파일들이 많을수록 비효율적이다. 요청 수를 줄이기 위한 방법이 바로 번들러이다. 왜 웹팩(webpack) 을 쓰는건가? webpack을 사용해야 하는 이유를 이해하기 위해서는 번들러가.. 22.11.08 : TCP, UDP TCP와 UDP는 데이터 전달을 담당한다. 이 둘은 포트 번호를 이용해 주소를 지정하는 것과 데이터 오류검사를 위한 체크섬이 존재하는 두가지 공통점을 가지고 있지만 정확성(TCP)을 추구할지 신속성(UDP)을 추구할지 구분하여 나뉜다. 데이터를 중요하게 생각해 확실히 주고받고 싶을 때는 'TCP(Transmisson Control Protocol)'을 사용한다. TCP는 통신하는 컴퓨터끼리 '보냈습니다', '도착했습니다' 라고 서로 확인 메시지를 보내면서 데이터를 주고받음으로써 통신의 신뢰성을 높인다. 웹이나 메일, 파일 공유 등과 같이 데이터를 누락시키고 싶지 않은 서비스는 TCP를 사용한다. 그에 반해 데이터의 신뢰성은 제쳐두고 어쨌든 빨리 보내고 싶을 땐 'UDP(User Datagram Proto.. 22.11.07 : JavaScript의 비동기 처리방식과 비동기 함수 JavaScript 비동기 처리방식 자바스크립트는 Event Loop를 이용해서 비동기 방식으로 동시성을 지원한다. 이벤트 루프 이벤트 발생시에 호출되는 콜백 함수들을 태스크 큐에 전달하고 콜스택에 쌓여있는 함수가 없을 때, 태스크 큐에서 대기하고 있던 콜백 함수들을 콜스택에 넘겨준다. JavaScript의 비동기 함수들 자바스크립트는 싱글스레드이기 때문에 한 번에 하나의 작업만 수행한다. 이를 해결하기 위해 비동기가 생겼다. 비동기란 특정 코드들의 처리가 끝나기 전에 다음 코드를 실행할 수 있는것을 뜻한다. 자바스크립트는 즉시 처리하지 못하는 이벤트들을 이벤트 루프에 모아놓고, 먼저 처리해야 하는 이벤트를 실행한다. 가장 대표적인 비동기처리 사례는 setTimeout()으로 일정시간 뒤에 함수를 실행시.. 22.11.07 : DOM (Virtual DOM vs Real DOM) DOM: 문서 객체 모델 Docomunet Object Model XML이나 HTML에 접근하기 위한 일종의 인터페이스이며, 문서 내 모든 요소에 대해 nodes와 objects로 표현하고, 접근하는 방법을 제공한다. 웹 페이지의 객체 지향 표현이며, 자바스크립트 같은 스크립팅 언어를 이용해 DOM을 수정할 수 있다. 이 DOM은 트리구조로 되어있어서 이해하기 쉽단 장점이 있지만, 이런 구조 때문에 부분적 수정이 필요할 때 DOM 전체가 바뀌어야하기 때문에 DOM트리에서는 속도 이슈가 발생하였고, 지속적인 DOM 업데이트는 잦은 오류, 사용자 인터페이스에 악영향을 끼쳤다. 이러한 단점을 해결하기 위해 나온것이 바로 가상돔(Virtual DOM)이다. https://youtu.be/BYbgopx44vo V.. 22.11.05 : Redux란 무엇인가요? 왜 사용하시나요? Redux는 자바스크립트 앱을 위한 전역 상태관리 툴이다. 나는 개발 공부를 시작한 뒤로 상태 개발 툴로는 아직까지 Redux, Redux toolkit 만을 사용해보았기 때문에 다른 상태관리 툴과는 아직 비교를 해 볼순 없지만, 일단 어떤 툴인지 더 자세히 알아보구 속속들이 파해쳐본 뒤, 다른 상태관리 툴도 사용해보고자 한다. 일단 Redux는 복잡해진 상태관리를 더 손쉽게 하기 위해서 존재한다. 상 하위 관계에 있는 컴포넌트들의 상태의존도가 높아지고, 자식 컴포넌트들이 너무 많아졌을때, 나는 Redux toolkit(RTK)을 사용했다. Redux는 전역상태관리툴 중 가장 많이 쓰이고있고, 커뮤니티도 크기 때문에 참고 할수있는 레퍼런스들이 가장 많다. 그중 Redux팀은 RTK를 로직을 작성하기 위한.. 22.11.04 : 상태관리 하는 이유, 평소에 state 관리는 어떻게 하시나요? Q. 상태 관리를 하는 이유는 뭘까? 보통 부모자식관계에 있는 컴포넌트들은 state를 props로 전달하게 된다. 이 데이터는 부모에서 자식으로 가기도, 자식에서 부모로 전달되기도 한다. props drilling이라는 것은 props가 상위 컴포넌트에서 하위 컴포넌트들을 통해서 전달되는 것을 뜻하는데, 이것 자체가 문제가 되는 것은 아니다. 하지만 컴포넌트간 상태 의존도가 높아져 너무 여러 컴포넌트를 거치게되면 이 props가 어디에서 시작된 것인지 추적을 하기가 힘들기 때문에 유지 보수를 하는데 문제가 생긴다. 따라서 상태 관리를 전역에서 할 수 있는 tool이 필요하다. Q. 상태관리, 지금 어떻게 하는지? 현재 개인적으로 지역상태는 props로 관리하며 프로젝트가 커지고 컴포넌트간 상태 의존성이.. 이전 1 2 3 4 5 다음
