![webpack](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcwBfUV%2FbtsryrLJ5xx%2FHMb5OCV0drwOSSQWLEuhT0%2Fimg.png)
webpack?웹팩은 엄청 많이 쓰이는 오픈 소스 모듈 번들러 라이브러리이다.번들러(Bundler)?번들러는 여러 개로 나뉜 모듈을 하나로 묶어주는 도구이다.의존성이 있는 것들을 찾아서 그룹핑을 해주는 도구!웹팩은 IIFE를 사용해서 번들링을 해서 스코프 충돌에 대한 걱정 없이 안전하게 스크립트 파일들을 연결하거나 결합한다!dependency graph를 생성하여 빌드거대한 자바스크립트 소스코드와 대규모 의존성을 가지고 있는 대형 웹 애플리케이션이 등장함에 따라, 각각의 세분화된 모듈 파일이 무작위로 늘어나게 되었다.이 모듈 단위의 파일들을 호출하여 브라우저에 띄워야 하는데, 자바스크립트의 특성에 따라 발생하기 쉬운 각 변수들의 스코프 문제를 해결해야 하고, 각 자원을 호출할 때 생겨나는 네트워크 쪽의 ..
시맨틱 웹이란? Semantics : 의미 혹은 의미론 Semantic Web: 의미를 이해하는 웹 👉 인터넷의 각종 리소스(웹 문서, 각종 파일, 서비스 등)에 대한 정보와 자원 사이의 관계를 의미 정보로 만들어 컴퓨터가 처리할 수 있는 온톨로지(개념 간의 연관 관계) 형태로 표현하고 이를 처리하도록 한 프레임워크 혹은 기술 온톨로지(ontology) 개념간의 연관 관계, 시맨틱 웹의 핵심적인 기술 데이터에 대한 모든 의미를 컴퓨터가 이해하고 처리할 수 있는 방식으로 번역하는 기술, 지식, 수단의 총체 시맨틱 웹 배경 HTML으로 작성된 문서는 컴퓨터가 해석할 수 있는 메타데이터와 사람이 사용하는 자연어 문장이 뒤섞여 있다 웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여, 기존..
SPA : Single Page Application 는 한 개(Single)의 Page로 구성된 Application 웹 어플리케이션 구동에 필요한 정적 리소스를 최초에 한번만 다운로드하고, 새로운 페이지 요청이 있을때만 페이지 갱신에 필요한 데이터만 전달(Virtual DOM)받아서 페이지를 갱신한다. SPA를 CSR(Client Side Rendering) 방식으로 렌더링 첫 요청 시 한 페이지만 불러오고 페이지 이동 시 기존 페이지의 내부를 수정(Virtual DOM)해서 보여주는 방식. 필요한 부분만 갱신하기 때문에 자연스러운 페이지 이동과 UX 제공한다 장점 자연스러운 사용자 경험 (UX) 전체 페이지를 업데이트 할 필요가 없기 때문에 새로고침을 누르지 않는 이상 빠르고 깜빡거림이 없다. Vi..
![브라우저 작동 원리/Reflow+Repaint/Virtual dom](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbbeyas%2FbtrDWS3YGGv%2FgkQUKbpYsLFui8ckuHwca1%2Fimg.png)
브라우저란? 네트워크상의 사이트나 정보(World Wide Web)에 엑세스하는 데 사용되는 컴퓨터 프로그램 World Wide Web? 월드 와이드 웹(World Wide Web, WWW, W3)은 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간을 말한다. 클라이언트(사용자)와 웹 서버(서버)의 양방향 통신을 지원하고 주고받는 HTML 문서, 파일, 이미지 등을 연동하고 출력을 담당하는 소프트웨어이다. 즉, 컴퓨터에 설치되어 있는 하나의 프로그램으로, 이 프로그램을 다운받고 실행하게 된다면 주소창을 입력할 수 있는 도구가 되는 것이다. 주소창에 URL를 통해 서버의 자원을 요청하면 화면에 띄워줌 크롬, 사파리, 파이어폭스 등이 있다 브라우저 구성 사용자 인터페이스 ..