Web (8) 썸네일형 리스트형 번들러를 알아보자 도입최근 협업 프로젝트를 시작했다..알다시피 최근 react의 cra가 deprecated됐다는 소식이 있었다.부끄럽지만 지금까지 난 cra가 뭔지도 잘 모르는 상태로아~무 생각이나 의심없이 그냥 create-react-app 하면 리액트 앱이 편하게 깔렸고 개발하고... 그리고 최근 CRA가 deprecated되면서 어떻게 리액트 앱을 빌드할지 찾아보게 됐다.그리고 vite라는 걸 알게 됐고, 자연스레 기존의 웹팩과 비교를 하게 됐고, 번들러란 무엇인지.. 더 나아가 모듈 발전의 역사까지 공부하게 됐다... 사실 번들러를 공부하면서 너무 헷갈렸던 게, 웹팩이나 비트 등등 여러 도구들을 비교하려 하니 서로 차이점이 명확하게 와닿지 않았다. 그러니까 번들러라곤 하지만 기능적으로 보면 아예 빌드 도구라고 .. 블로킹, 논블로킹 vs 동기, 비동기 블로킹, 논블로킹A 함수가 B 함수를 호출해도 호출자가 제어권은 그대로 가지고 있는가(논블로킹), 제어권을 잃는가(블로킹)제어권은 자신(함수)의 코드를 실행할 권리 같은 것이다. 제어권을 가진 함수는 자신의 코드를 끝까지 실행한 후, 자신을 호출한 함수에게 돌려준다. 제어권을 가지고 있다는 것은 프로그램이 원하는 대로 다음 작업을 선택하고 실행할 수 있다는 의미다.블로킹: 호출된 작업이 실행되는 동안 호출한 작업은 제어권을 잃는다. 자신의 코드를 실행할 수 없다.논블로킹: 호출된 작업의 실행과 상관없이 호출한 작업은 자신의 코드를 실행한다. ✅ 블로킹, 논블로킹은 I/O 작업과 관련된 개념??? 관련 정보를 찾아보다 "블로킹, 논블로킹 개념은 I/O 작업과 관련된 것이다."라는 글을 발견했다.결론부터 .. HTTP 캐싱과 캐싱 제어 캐싱이란어떤 데이터를 한 번 받아온 후에 그 데이터를 불러온 저장소보다 가까운 곳에 임시로 저장하여, 필요 시에 더 빠르게 데이터를 받아오는 프로세스를 의미. 자주 사용하거나 계산이 복잡한 데이터를 캐싱하면 성능 향상. (이전의 계산을 효율적으로 재사용하므로)HTTP 캐시(웹캐시)웹 브라우저는 HTTP 프로토콜을 이용해 서버에게 리소스를 요청한다. 이에 따라 서버로부터 응답 받은 리소스를 사용자에게 화면으로 보여주거나 제공한다.이미 한 번 받았던 리소스를 또 다시 사용자에게 제공해야 한다면, 이와 똑같은 통신 과정을 거치는 것은 비효율적이다.이 과정의 효율 향상을 위해 캐시의 개념을 HTTP 통신에 적용한 것을 HTTP 캐시 또는 웹 캐시라고 한다.웹캐시에는 몇가지 종류가 있다.저장 위치에 따른 분류: .. 리플로우(Reflow)와 리페인트(Repaint) & 리플로우 최적화 렌더링 절차아래 포스팅에서 렌더링 절차를 정리한 적 있다. 참고 바람 https://sysy1127.tistory.com/16 브라우저 렌더링 작동 원리: 파싱부터 렌더링까지중요한 렌더링 경로 다섯 단계DOM 트리 구축 - CSSOM 구축 - 렌더 트리 생성 - 레이아웃 계산 - 페인트구문 분석(Parsing) - 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽고 실행하기 위해sysy1127.tistory.com 1) 렌더 트리 생성 DOM과 CSSOM이 생성되면 이 둘은 결합하여 Render Tree를 생성한다.렌더 트리는 CSS 스타일이 적용된 DOM 트리라고 생각하면 된다. 렌더 트리는 모든 HTML 요소가 포함된 DOM 트리와 달리, 브라우저 화면에 렌더링되는 노드만으로 구성된다.따라서 .. 브라우저 렌더링 작동 원리: 파싱부터 렌더링까지 중요한 렌더링 경로 다섯 단계DOM 트리 구축 - CSSOM 구축 - 렌더 트리 생성 - 레이아웃 계산 - 페인트구문 분석(Parsing) - 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽고 실행하기 위해텍스트 문자의 문자열을 분해하고 구조를 생성하는 일련의 과정 - 브라우저가 받은 HTML, CSS, JavaScript 코드를 이해하고 화면에 표시할 준비를 하는 것1) HTML->DOM 생성2) CSS -> CSSOM 생성3) JavaScript -> 필요한 경우 DOM/CSSOM을 변경이 과정이 끝나야 실제로 화면에 콘텐츠가 보이기 시작 더보기- TTFB(Time To First Byte)웹페이지를 클릭하면 서버에 요청하고, 서버가 응답을 주기까지 시간이 걸림. "TTFB란?"요청을 보낸 순.. "웹페이지를 표시한다는 것: 브라우저는 어떻게 동작하는가" https://developer.mozilla.org/ko/docs/Web/Performance/How_browsers_work#%EB%A0%8C%EB%8D%94render 웹페이지를 표시한다는 것: 브라우저는 어떻게 동작하는가 - 웹 성능 | MDN사용자는 로드가 빠르고 상호작용이 원활한 컨텐츠로 이루어진 웹 경험을 원합니다. 따라서 개발자는 이 두 가지 목표를 달성하기 위해서 부단히 노력해야합니다.developer.mozilla.org브라우저 렌더링 과정을 찾아보다 해당 문서를 읽게 되었다. 웹페이지를 표시하기까지 브라우저의 작동 방식이 상세하게 설명되어, 해당 문서를 읽고 정리해보고자 한다. 브라우저: 대부분 싱글 쓰레드로 동작즉 한번에 하나의 작업만 처리하기 때문에, 메인 쓰레드의 부담을 줄이는 .. 세션 인증과 토큰 인증 인증과 인가 - 인증(Authentication) : 사용자가 누구인지 검증하는 과정ex) 로그인- 인가(Authorization) : 사용자의 권한에 따라 허가를 내주는 것ex) 블로그 글쓰기, 글 수정, 삭제하기 http 통신은 stateless하다. 이전에 전달받은 요청이 어느 클라이언트로부터 왔는지 기억을 하지 못한다.이 사람과 이전에도 통신을 한 적 있는지, 어떤 데이터를 주고 받았는지 모르는 것이다.그렇다고 매 요청마다 클라이언트가 서버에게 내가 누구인지 검증할 수는 없을 것이다. 이를 해결하기 위해 사용되는 것이 쿠키, 세션, 토큰 인증 방식이다. 덕분에 로그인을 한 번 하면 몇 시간동안 로그인을 하지 않아도 되고, 사이트 팝업을 하루동안 보지 않도록 설정할 수도 있고, 동일 사이트를 재방.. CSR과 SCR, SPA와 MPA CSR vs SSR: 웹 애플리케이션의 렌더링하는 주요한 접근 방식이다.브라우저가 렌더링될 때 html콘텐츠 생성를 클라이언트(브라우저)가 처리하느냐, 서버가 처리하느냐에 따라csr과 ssr로 나뉘게 된다. csr (client-side-rendering)브라우저가 HTML을 받은 뒤, 자바스크립트를 실행해 콘텐츠를 동적으로 생성하는 방식초기 요청 시 서버는 최소한의 html 구조와 자바스크립트 파일을 전달한다.리액트를 예시로 들어보자.// index.html 브라우저는 위와 같은 html 뼈대만 다운받는다. 그리고 를 통해 자바스크립트 파일들이 실행되면서 dom을 동적으로 구성하고 화면에 렌더링한다. 이러한 작동방식때문에 csr 방식의 웹페이지가 실행될 때초기에는 빈 화면이 표시되고.. 이전 1 다음
