React는 UI(사용자 인터페이스)를 만들기 위한 자바스크립트 라이브러리입니다. 주로 단일 페이지 애플리케이션(SPA)과 클라이언트 사이드 렌더링(CSR)을 구현하는 데 사용됩니다. 왜 React는 라이브러리인가?프레임워크는 보통 HTTP 클라이언트, 상태 관리(State Management), 라우팅(Routing), UI 등의 기능을 기본적으로 제공하여, 개발자가 이를 이용해 개발을 진행할 수 있게 합니다. 프레임워크를 사용하면 정해진 틀과 규칙에 따라 개발을 진행할 수 있어 편리하지만, 몇 가지 단점도 존재합니다. 먼저, 프레임워크에서 권장하는 모든 기능과 구조를 익혀야 하므로 초기 학습에 많은 시간이 필요합니다. 또한, 정해진 틀 내에서만 작업할 수 있기 때문에 자율성이 떨어지고, 개발자는 프레..

쿠키 설정하기function setCookie(cookieName, value, exdays, domain, secureBool) { const exdate = new Date(); exdate.setDate(exdate.getDate() + exdays); let cookieValue = encodeURIComponent(value) + "; path=/;"; if (exdays) { cookieValue += " expires=" + exdate.toUTCString() + ";"; } if (domain) { cookieValue += " domain=" + domain + ";"; } if (secureBool === tr..

https://hy-un.tistory.com/entry/HTMLCSS-Video-Controls-%EC%BB%A4%EC%8A%A4%ED%85%80%ED%95%98%EA%B8%B0-1 [HTML/CSS] Video Controls 커스텀하기 - 1태그에서 제공하는 기본 컨트롤 디자인 대신, 다른 디자인을 적용하고 싶었습니다.하지만 HTML5 에서는 이러한 커스텀 디자인을 기본적으로 지원하지 않기 때문에, 기본 컨트롤을 숨기고 HTML과 CShy-un.tistory.com이전 글에 이어, 이번에는 HTML과 CSS로 커스텀한 비디오 컨트롤에 JavaScript를 사용하여 기능을 입히려고 합니다.완성 페이지는 아래 링크에서 확인할 수 있습니다.https://ganghyun95.github.io/video-c..

태그에서 제공하는 기본 컨트롤 디자인 대신, 다른 디자인을 적용하고 싶었습니다.하지만 HTML5 에서는 이러한 커스텀 디자인을 기본적으로 지원하지 않기 때문에, 기본 컨트롤을 숨기고 HTML과 CSS를 사용하여 직접 컨트롤을 만들기로 했습니다.이후, 각 버튼의 기능은 JavaScript로 구현할 계획입니다.이번 포스팅에서는 HTML과 CSS를 사용하여 비디오 플레이어의 컨트롤을 커스텀 하는 방법을 다루고 프로그레스 바 표시 방법과 input range의 커스터마이징 등 중점적인 부분만 작성할 예정입니다.다음 포스팅에서는 JavaScript를 활용하여 각 버튼의 기능을 구현할 예정입니다. https://hy-un.tistory.com/entry/JSJavaScript-Video-Controls-%EC%BB..

최근 프로젝트에서 사용자가 레이어 팝업을 자유롭게 드래그 앤 드롭하여 화면 내에서 이동시킬 수 있는 기능이 필요했다. 이동된 위치 정보를 서버에 저장 할 필요가 없고, 단순히 프론트엔드 측에서만 처리하면 되는 기능이였다. 구현 계획이동하고자 하는 요소는 "position: absolute;" 속성이 필수적으로 지정되있어야 한다.( JavaScript 로 요소에 스타일을 지정해도 무관 )요소의 위치 변경은 성능 최적화, 부드러운 애니메이션을 위하여 'style' 속성의 'left'와 'top' 값을 조정하는 대신 'transform' 의 'translate' 값을 변경한다. enableDraggable 함수 구현 ( 모바일 미지원 버젼)function enableDraggable(selector) { ..

사용자 경험을 개선하기 위해 체크박스를 드래그로 선택하거나 해제하는 기능이 필요했는데, dragCheckbox.js는 jQuery 기반으로 되어 있어, 순수 자바스크립트 프로젝트 요구사항에 맞게 자바스크립트로 직접 구현하기로 결정했다.구현 계획입력된 선택자(selector)에 해당하는 요소들(라벨 또는 체크박스)에 해당하는 영역 내에서 마우스 드래그를 통해 체크박스를 선택 또는 해제하자.드래그 기능 구현- "mousedown" 이벤트에서 드래그 시작을 감지하고, 해당 요소의 체크박스 상태를 반전시킨다.- "mouseenter" 이벤트를 사용하여 드래그 중 다른 체크박스 또는 라벨위로 마우스가 이동할 때, 해당 요소의 체크박스 상태를 반전시킨다.- "mouseup" 이벤트에서 드래그 종료를 감지한다. 기능..

최근 프로젝트에서 버튼을 클릭하면 텍스트를 복사하는 기능이 필요했습니다. 처음에는 Clipboard.js 라는 라이브러리의 사용을 고려했지만 제가 원하는 기능은 텍스트를 복사하고 성공 시 alert창 실패 시 prompt창을 띄우는 게 전부라서 이러한 단순한 로직은 성능 면에서도 직접 구현하는 것이 더 나을 것 같다고 판단했습니다. 따라서, 먼저 Web API인 navigator의 clipboard API를 이용해 구현을 시도했습니다.function copyToClipboard(text) { navigator.clipboard.writeText(text).then(() => { alert("복사되었습니다. 원하는 곳에 붙여넣기하여 주세요."); }).catch(() => { promp..

지난해 7월, 개발 분야로의 직종 전환 이후, 수많은 코드를 작성하며 시간을 보냈다. 이 과정에서 나는 코드를 작성하는 것이 단순한 업무가 아닌, 지속적인 학습 과정임을 깨달았다. 매일이 도전이었고, 때로는 복잡한 코드 문제를 해결하기 위해 모든 노력을 기울여야 했다. 그런 순간마다 겨우 문제를 해결했을 때의 성취감은 이루 말할 수 없었다. 하지만 그런 순간들을 곱씹어보지 않고, 작성한 코드를 다시 들여다보지 않으면, 시간이 흘러가며 세세한 부분들이 기억에서 점점 희미해졌다. 이러한 귀중한 학습 경험과 성취의 순간들을 소중히 간직하고자, 나는 내가 배운 것들, 겪은 도전들, 그리고 그 과정에서 얻은 깨달음들을 기록하기로 결심했다.