[css] position 속성
·
웹개발
position 속성은 CSS에서 요소의 위치를 지정하는 데 사용되며, 여러 값들이 있습니다. 각 값은 요소가 문서에서 어떻게 배치되는지를 결정합니다. 아래는 position 속성의 주요 값과 그 의미입니다:1. static (기본값)의미: 요소가 문서의 일반적인 흐름에 따라 배치됩니다. top, right, bottom, left, z-index 속성은 적용되지 않습니다.사용 예: 기본 레이아웃에서 요소를 특별히 조정할 필요가 없을 때 사용됩니다.2. relative의미: 요소가 일반적인 문서 흐름에 따라 배치되지만, top, right, bottom, left 속성을 사용해 요소의 위치를 조정할 수 있습니다. 원래 위치를 기준으로 이동하므로 원래 공간은 유지됩니다.사용 예: 작은 위치 조정이 필요할 ..
[React] URLSearchParams
·
웹개발
URLSearchParams는 JavaScript에서 URL의 쿼리 문자열(query string)을 쉽게 다룰 수 있도록 해주는 내장 API입니다. 주로 URL의 파라미터들을 파싱하거나, 새 파라미터를 추가하거나, URL을 수정할 때 사용됩니다. 브라우저 환경에서 주로 사용되며, URL에 포함된 쿼리 매개변수를 간단하게 처리할 수 있도록 돕습니다.기본적인 사용법URL에서 쿼리 파라미터를 추출새로운 쿼리 파라미터를 추가쿼리 파라미터 수정쿼리 파라미터를 삭제문자열로 변환생성URLSearchParams 객체는 URL의 쿼리 문자열을 인자로 받아 생성할 수 있습니다. // URL의 쿼리 문자열에서 생성const params = new URLSearchParams('?name=John&age=30'); // 또..
[React] SSE로 프론트엔드 쪽 코드 구현할때, 헤더(Authorization 등)설정하기 (feat. event-source-polyfill)
·
웹개발
SSE (Server-Sent events)?서버에서 클라이언트로 실시간 이벤트를 전달하는 웹 기술입니다.- 보통의 HTTP 통신 : 요청 1번 응답 1번 입니다.- SSE(Server-Sent events) : 한번의 연결로 여러번의 응답을 실시간으로 받을 수 있습니다.- 서버에서 클라이언트로의 단방향 스트리밍 EventSource :SSE 연결을 편리하게 할 수 있도록 해주는 Web API입니다. 실제로 SSE 구현해보기EventSource 는 헤더 설정이 불가능합니다. 따라서 event-source-polyfill 패키지의 도움을 받아야 합니다.event-source-polyfill ? : 이 라이브러리는 표준 EventSource를 폴리필로 제공하여, 추가적인 기능(예: 헤더 설정)을 지원합니다...