WEB11 [WEB] 브라우저 렌더링 과정 브라우저 렌더링 과정 브라우저가 화면에 나타나는 요소를 렌더링 할 때, 웹킷(Webkit)이나 게코(Gecko) 등과 같은 렌더링 엔진을 사용한다. 렌더링 엔진이란? 요청 받은 내용을 브라우저 화면에 표시하는 일을 함 렌더링 엔진이 HTML, CSS, JavaScript로 렌더링할 때, CRP(Critical Rendering Path) 라는 프로세스를 사용해 다음 단계들로 이루어진다. 1. HTML 파싱 후, DOM 트리 구축 2. CSS 파싱 후, CSSOM 트리 구축 3. JavaScript 실행 주의! HTML 중간에 script가 있으면 HTML 파싱이 중단됨! 4. DOM과 CSSOM을 조합해 렌더 트리 구축 주의! display : none 속성과 같이 화면에 보이지도 않고 영역을 차지하지도.. 2023. 11. 5. [React] useEffect 과 useLayoutEffect의 차이점 코드 리뷰를 하면서 이런 피드백을 받게 되었다 🤔🤔 useLayoutEffect요..? 데이터를 fetching해서 초기 state값을 fetching한 데이터 값으로 바꾸는 로직을 useEffect를 사용해서 구현했다. 초기 화면을 그리기 전에 필요한 데이터를 넣는 부분은 지금까지 계속 useEffect로 구현했었기에 useEffect를 사용했는데 갑자기 useLayoutEffect라는 친구가 등장했다. 이름이 비슷하니까 useEffect와 비슷한거 같긴하데 정확하게 뭐길래 실행 순서에 따라 사용해야하는 훅이 다른걸까? useEffect(() => { // do side effects return () => /* cleanup */ }, [dependancy array]); useLayoutEffect.. 2023. 11. 1. [React] 리액트 기본 구조 분석하기 index.js 리액트 프로젝트에서 제일 먼저 실행되는 파일 ReactDom.createRoot()를 통해 리액트 프로젝트의 기본 진입점 생성 ReactDOM.createRoot(document.getElementById('root'));는 리액트 프로젝트가 로딩 되었을 때, 웹 페이지의 어디에 배치되어야 하는지 리액트에게 알려주는 역할을 함 public 폴더의 index.html가 리액틔 기본 진입점 index.html 안에 있는 `` 에 리액트로 만든 사용자 인터페이스가 렌더링 됨 root.render(); ReactDom.createRoot()으로 선택한 에 어떤 걸 렌더링 해야 하는 지 리액트에게 알려주는 역할 에 아무것도 없지만 으로 대체 됨 JSX 문법으로 작성되어 있음 컴포넌트 App.js .. 2023. 9. 23. [React] 컴포넌트란? 리액트에서 컴포넌트가 왜 중요할까? 리액트에서는 모든 사용자 인터페이스는 컴포넌트로 구성되어 있기 때문이다. 어떤게 컴포너트가 될 수 있을까? 사용자 인터페이스에 있는 재사용 가능한 구성 요소 컴포넌트란 HTML + CSS + Javscript가 조합된 것 왜 컴포넌트일까 구성요소를 분산시킬 수 있다 > 코드 베이스르 작고 관리하기 좋게 유지할 수 있다 - 하나의 컴포넌트에는 분명한 주제, 초점이 있다 > 컴포넌트가 집중적으로 다루는 구체적인 작업이 있게 됨 재사용 가능하다 > 반복을 피할 수 있다 리액트는 컴포넌트가 전부다, 조합하기 위한 컴포넌트를 만드는 게 전부이다! >> 리액트를 활용해 재사용 가능하고 반응형 컴포넌트를 만들 수 있다 컴포넌트를 만들기 위해 리액트는 '선언형 접근법'을 사용한다 -.. 2023. 9. 23. [WEB] Web Socket이란? 등장배경부터 차근차근 Web Socket 등장 배경 기본적으로 클라이언트와 서버는 http / https 통신으로 stateless하게 이루어져 있다. 클라이언트에서 Request를 하면 서버에서는 Response하는 과정으로 이루어져 있다. 사용자가 URL을 요청할 때만, 서버에서 해당 페이지 결과를 받을 수 있다. 즉, 사용자는 서버로부터 새로운 정보를 받기 위해서는 반드시, 새로운 URL을 요청해야 한다는 것이다. 초창기 웹은 단순히 사용자에게 콘텐츠를 보여주는 역할을 했기 때문에 사용자와 상호작용은 크게 중요하지 않았다. 하지만 기술의 발전으로 웹을 통해 사용자과의 인터렉션이 증가하게 되면서 서버와 클라이언트 간의 상호작용이 중요하게 됐다. 하지만 반드시 요청을 해야만 응답을 받을 수 있는 HTTP 방식은 실시간 웹 .. 2023. 8. 22. [openVidu] openVidu란 무엇인가 OpenVidu란? 웹과 모바일 어플리케이션에 화상통화를 쉽게 추가할 수 있는 플랫폼이다. WebRTC 기술을 보다 쉽게 적용할 수 있도록 도와주고 다양한 언어와 프레임워크를 지원하는 호환성이 뛰어나다. OepnVidu 어플리케이션 아키텍쳐 OpenVidu 배포 실시간 오디오와 비디오 스트리밍을 위한 모든 필요한 인프라를 제공한다. 어플리케이션 서버 어플리케이션 서버에서 실행되며 Openvidu 배포에서 제공하는 REST API를 사용한다. (자바, node SDK를 사용할 수 있고 REST 클라이언트와 REST API를 통해 직접 통신할 수 있다) 이러한 방식으로 세션, connection을 생성하고 화상통화를 안전하게 관리할 수 있다. 어플리케이션 클라이언트 웹 브라우저, 모바일, 데스크탑 에서 실행.. 2023. 7. 29. 이전 1 2 다음
