모듈 번들러란?모듈 번들러는 여러 자바스크립트 파일과 CSS, 이미지, 글꼴 같은 웹 자원을 하나 또는 여러 개의 번들로 묶어주는 도구입니다.이 작업은 웹 페이지를 브라우저에서 빠르고 안정적으로 불러오기 위해 필요합니다.대표적인 모듈 번들러Webpack: 설정이 복잡하지만 유연성이 뛰어난 대표적 번들러Vite: 빠른 개발 서버와 간편한 설정으로 최근 인기를 끄는 모던 번들러Rollup: 라이브러리 번들링에 적합하며 ES 모듈을 우선 지원Parcel: 설정이 거의 필요 없는 자동화 중심 번들러 번들러의 등장배경초창기 웹개발과거에는 HTML 파일에 이렇게 분할하면 필요한 시점에만 코드를 불러올 수 있어 초기 로딩 속도를 줄이고 사용자가 실제로 요청한 기능을 더 빠르게 제공할 수 있습니다. 또한 ..

1. 쿠키우리가 흔히 사용하는 웹 사이트들은 HTTP 프로토콜을 이용하여 통신한다. HTTP는 비연결성 특징을 가지고 있어 항상 연결된 상태가 아니라, 필요할 때마다 요청을 보내고 응답을 받는 방식이다. 이러한 특성으로 인해 웹 브라우저는 사용자의 상태를 유지하고 관리하기 위해 '쿠키'라는 데이터를 활용한다. 예를 들어 웹 서버로 로그인 요청을 보내면, 서버는 로그인 요청에 대한 응답과 함께 브라우저에서 저장할 정보를 보낸다. 브라우저는 그 정보를 쿠키로 저장해 두었다가 다음에 웹 서버에 연결할때 저장해 두었던 쿠키를 송신함으로써 서버는 연결을 시도하는 상대가 누구인지 식별할 수 있다. 쿠키는 사용자 인증용도 뿐만 아니라 언어 정보, 야간모드, 사용자 팝업창 설정( 오늘 하루동안 열지않음) 등 다양한 처..

스타일드 컴포넌트(Styled Components)는 리액트(React) 애플리케이션에서 사용되는 자바스크립트 라이브러리 중 하나로, 컴포넌트 기반 스타일링을 위한 솔루션 중 하나. 스타일드 컴포넌트를 사용하면 자바스크립트 파일 안에서 컴포넌트와 함께 스타일을 정의할 수 있다. 1. 설치npm install styled-componentsyarn add styled-components 2. 사용- 기본 스타일드 컴포넌트 작성헬로우 //스타일컴포넌트라는 표시로 St + 명명const Span = styled.span` //백틱 안에 CSS를 작성` 헬로우//form 태그와 같이 특수한 태그의 경우, 기능을 잃어버릴 수도 있음 //그때는 이렇게 속성을 다시 넣어주기 - 조건부 스타일링부모 컴포넌트에서 보낸..

1. 스켈레톤 UI 란?어떤 화면에 딱 들어왔을때, 데이터가 채워지기 전에는 사용자에게 빈 화면이 보여질 수 있다.순간적으로 일어나는 일이지만, 빈 화면을 사용자에게 보여주는 건 사용자 경험을 떨어트리게 한다. 이 화면을 보게 되면 어떨까?데이터가 로딩중이라는 생각보다는사이트에 문제가 있다는 생각이 먼저 들것이다.  이럴때 빈 화면 대신 '데이터가 통신 중입니다~' 알려주는 대체화면으로Progress Indicator 를 사용한다. Progress Indicator는 시스템이 중단되거나 사용자 입력을 기다리고 있지 않음을 확인하기 위해 작업이 진행 중임을 사용자에게 알리기 위한 명령줄 인터페이스이다. 대강 말하면 지금은 화면에서 일하는 중이니잠시만 기다려봐~ 하는 용도이다.  사이트마다 특성에 맞게 적용..