웹팩(Webpack) 이란? 웹팩은 모듈 번들로러, 프론트엔드 프로젝트에서 다양한 리소스를 관리하고 최적화 하는 도구이다. JavaScript 파일 뿐만이 아니라, CSS, 이미지, 폰트 등 다양한 파일을 하나의 빌드된 파일로 만들어준다. 모듈 번들이란? - 여러 파일들을 하나의 파일로 병합하는 것을 모듈 번들링 이라고 하면 일련의 과정이라고 생각하면 된다. https://strap.tistory.com/118 번들이란? (bundle) / 모듈이란? (module) 번들 (bundle) 이란? 웹 개발 및 프론트엔드 개발에서 주로 사용되는 용어로, 일반적으로 여러 파일을 하나로 결합 하는 작업을 나타낸다. 이렇게 하나의 파일로 결합하는 것을 "번들링" 이라고도 strap.tistory.com 웹팩의 등..
BOM (Brower Object Model - 브라우저 객체 모델) 웹 브라우저에서 제공되는 객체 모델을 나타낸다. 웹 페이지를 조작하고 제어하기 위해 사용되며, 브라우저 창, 히스토리, 위치 등과 같은 브라우저 관련 객체를 포함한다. BOM의 주요 구성요소 Window 객체: Window 객체는 웹 브라우저 창을 나타낸다. 모든 JavaScript 코드는 기본적으로 Window 객체 내에서 실행된다. 이 객체를 사용하여 브라우저 창의 크기를 조정하거나 새로운 창을 열거나 닫는 등의 작업을 수행할 수 있다. Document 객체: Document 객체는 현재 표시된 웹 페이지(Document)의 내용을 나타낸다. DOM(Document Object Model) 트리 구조를 통해 웹 페이지의 모든 요소에..
번들 (bundle) 이란? 웹 개발 및 프론트엔드 개발에서 주로 사용되는 용어로, 일반적으로 여러 파일을 하나로 결합 하는 작업을 나타낸다. 이렇게 하나의 파일로 결합하는 것을 "번들링" 이라고도 하는데 번들링은 주로 JavaScript 및 CSS 파일을 하나의 파일로 결합하는 것을 의미한다. 이를 통해 웹 애플리케이션의 성능을 최적화하고 관리를 더 쉽게 만드는데 도움이 된다. 모듈 (module) 번들링이란 모듈들의 의존성을 파악하여 그룹화 시켜주는 것이고, 반대되는 개념으로는 모듈(module)이 있다. 분리되어 있는 모듈을 하나로 합쳐주는 것이 번들(bundle)이라는 개념이고, 여러 모듈로 나누어 export로 내보내기도 하고, import로 가져오기도 한다. 여러 모듈을 그대로 사용하지 않고 ..
💬 리플로우와 리페인트 리플로우(Reflow)와 리페인트(Repaint)는 웹 브라우저의 렌더링 과정에서 중요한 개념이다. 이 두 용어는 웹 페이지의 레이아웃 및 시각적 표현을 관리하고 최적화하는 데 사용된다. 리플로우 (Reflow) 리플로우는 웹 페이지의 레이아웃이 변경될 때 발생하는 과정을 나타낸다. 이것은 요소의 크기, 위치, 구조 또는 스타일이 변경될 때 발생한다. 브라우저는 레이아웃 변경 사항을 계산하고, 이 변경 사항에 영향을 받는 요소 및 그 하위 요소들을 다시 배치한다. 이로 인해 레이아웃 트리(Layout Tree)와 렌더 트리(Render Tree)가 다시 생성된다. 리플로우는 비용이 많이 드는 연산이므로 자주 발생하면 성능에 영향을 미칠 수 있으므로 최소화해야 한다. 리페인트 (Re..
브라우저 랜더링 브라우저 랜더링 과정은 웹 페이지를 표시하기 위해 브라우저가 수행하는 단계와 프로세스를 의미한다. HTML 파싱: 브라우저는 웹 페이지의 HTML 문서를 가져와서 파싱한다. 이 과정에서 HTML 문서의 구조를 이해하고 DOM(Document Object Model) 트리를 생성한다. DOM 트리는 웹 페이지의 요소(태그, 속성 등)와 그들의 관계를 표현한다. CSS 파싱 및 스타일 계산: 브라우저는 HTML 파싱 후에 CSS 스타일 시트를 가져와서 파싱한다. 각 요소에 대한 스타일 정보를 추출하고, 스타일 계산을 통해 각 요소의 최종 스타일을 결정한다. 이렇게 계산된 스타일은 렌더 트리(Render Tree)라는 새로운 트리 구조에 저장된다. 레이아웃(Layout): 브라우저는 렌더 트리..
토큰 (Token) 이란? 토큰은 정보를 나타내는 작은 조각으로, 보통 문자열 형태로 표현된다. 컴퓨터 시스템에서 토큰은 인증, 권한부여, 데이터 교환등 다양한 컨텍스트에서 활용된다. 토큰기반 인증방식 (Token-Based Authentication) 사용자 인증을 위해 사용되는 방식중 하나로, 인증상태를 서버에서 관리하는 대신, 토큰이라는 정보조각을 사용하여 인증을 처리한다. 토큰은 일반적으로 JSON Web Token (JWT)포맷을 따르며, 클라이언트와 서버간 통신에서 사용된다. 토큰기반 인증방식 작동방식 로그인 (Login): 사용자가 애플리케이션에 로그인을 시도한다. 이때 사용자가 제공한 신원 정보(일반적으로는 아이디와 비밀번호)를 서버에 제출한다. 인증 (Authentication): 서버는..
💬 들어가며 이전에 만들었던 web 홈페이지를 리팩토링 하는중, lighthouse를 통해 성능최적화까지 진행중에 있었다. 이전에 다른 프로젝트를 마무리하며 진행하다가 알게된 한가지 팁을 소개하고자 한다. ❓ 문제 상황 SEO 검색엔진 최적화 부분에서 사진과 같이 문서에 메타설명이 없음. 이라고 뜰 때 해결하는 아주 간단한 방법이다. SEO 란? SEO (Search Engine Optimization)의 약자로 "검색엔진 최적화" 를 뜻한다. 웹 사이트나 웹 페이지가 검색 엔진 경과 페이지(SERP)에서 높은 순위에 나타나도록 최적화 하는 프로세스를 가르킨다. 이 프로세스는 유용한 콘텐츠를 제공하고 웹 사이트를 검색 엔진 알고리즘에 친화적으로 만들어 사용자들이 검색 결과에서 해당 웹페이지를 더 쉽게 찾..
Application을 만들때 가장 중요한 통신에는 동기와 비동기가 있다. 그의 차이점은 여기서 확인하자. https://strap.tistory.com/75 동기, 비동기란? 동기(Synchronous) 동기방식은 어떠한 일을 처리하는 동안 다음 작업이 수행하지 못하고 첫번째 작업이 끝난 후 다음동작이 가능한 것을 말한다. 순서대로 하나씩 작업을 처리할 수 있는 방식을 말 strap.tistory.com 웹 비동기 통신 종류중 JS에서 사용되는 HTTP 통신을 알아보자. Ajax (Asynchronous JavaScript And XML) Ajax는 JavaScript를 사용하여 서버로 데이터를 보내고, 서버에서는 XML, JSON 등의 데이터 형식으로 응답한다. 이 데이터를 사용하여 웹 페이지의 일부..
📍WebPack (웹팩) 웹팩이란 자바스크립트 애플리케이션을 위한 정적 모듈 번들러이다. 알아듣기 어려운데 쉽게 말하자면 Application을 구성하고 있는 모든 자원들 즉, HTML, CSS, 이미지, 폰트등을 모듈로 보고 이를 하나의 의존성 그래프로 결합하여 번들링하는 방식으로 이루어 진다. 웹팩은 여러개의 구성 옵선을 제공하여 개발자가 필요에 따라 커스터마이징 할 수 있다. webpack.config.js 파일에 정의해 사용하며 코드의 관리와 성능을 향상시키는데 매우 유용하다. 📍Pritter 프리티어는 코드의 일관성과 가독성을 향상시켜주는 도구로, pritterrc.js 등 그 안에서 정의하여 사용할 수 있다. 🧑💻 설치방법 먼저 Visual Studio Code를 실행합니다. 왼쪽 사이드바에..
https://n.news.naver.com/mnews/article/138/0002143577?sid=105 [MWC23결산]② 망사용료 놓고 통신사 vs. 콘텐츠사 날선 공방 “대형 트래픽을 유발하는 회사들은 망 투자에 기여를 해야 한다.” vs “망사용료는 콘텐츠 투자를 줄이고 결국 소비자 편익을 해칠 것이다.” 지난 2월27일부터 3월2일(이하 현지시간)까지 스페 n.news.naver.com 통신사의 입장 망 사용량이 급증함에 따라 인프라 확대 및 망 분산화 등의 추가 투자가 필요하며, 이에 따른 비용 부담이 발생한다. 따라서 콘텐츠사 등의 대규모 데이터 전송 서비스 이용 시 추가적인 망 사용료를 부과하는 것은 합리적인 조치라고 주장한다. 통신사는 망 사용량 제한을 도입하거나 대량 데이터 전송 ..