본문 바로가기

프론트엔드28

[OBS] 치지직 투명 채팅창 설정 하기(CSS) 네이버 치지직 스트리밍시 채팅창을 투명하게 하는 방법을 검색해보니 유튜브만 나오길래 귀찮아서 직접 css를 셋팅했다.치지직은 아무래도 신생 플랫폼이라 그런지 이런 내용이 잘안나오는듯 아래 코드 참고해서 쓰면된다. 적용 방법은 채팅창 소스의 속성에서 사용자 지정 css설정하기로 하는데 OBS 스튜디오 기준 방법이다. /** 배경색 설정 & 스크롤바 삭제 **/.theme_dark .live_container__Ccraj,.live_chatting_container__SvtrD,body { background: none; overflow: hidden;}/** 상단 채팅 삭제 **/.live_chatting_header_container__k0hTT { display: none;}/** 하단 채팅입력창.. 2024. 11. 30.
디바운스 함수에 대하여 보통 API 콜을 처리하기 위해서 디바운스나 쓰로틀링을 처리하는 경우가 많은데 이글은 그 중 디바운스 함수에 대해서 간단히 분석하고 정리 한 내용이다. 디바운스와 쓰로틀링은 공통적으로 여러 이벤트를 묶어서 한번에 처리하는 방법이다. 그중 디바운스의 경우 사용자 이벤트를 일정한 간격으로 그룹화해서 그중 한번의 입력만을 처리하는 기법을 말하며 쓰로틀링의 경우 일정기간동안 첫 한번의 입력만 수행하고 나머지 기간동안 입력을 무시하는 기법을 말한다. 자바스크립트에서 디바운스 기능을 간단히 구현해보면 보통 이런 코드가 나온다. function debounce(func, wait) { let debounceId = null; const debounced = (...args) => { if (debounceId !==.. 2023. 3. 24.
프론트엔드 테스트에 대한 생각 요즘은 프론트엔드에서도 TDD 라는 단어가 심심치 않게 보인다. TDD 와 테스트가 동일한 뜻은 아니지만 그전에는 테스트는 커녕 기본적인 프레임워크나 라이브러리 사용법? 등에 대한 어려움?인가 웹팩 같은 번들러나 타입스크립트 같은 트랜스파일러에 대한 어려움인가? 대충 그런 수준의 어려움들이 메인이였다면 요즘에는 자동화나, 테스트나 UX등 부가적인 수준에 대한 관심사들이 보이기 시작했다는건 이제 상대적으로 짧은 역사를 가진 프론트엔드도 어느 정도 성숙한 개발문화를 구축하기 시작했다는 징조가 아닐까 생각이 든다. 물론 다른것들이 더 쉽다는 것은 아니지만 정상적인 수순이라면 단계별로 관심사가 발전하기에 테스트나 UX등에 관심을 가지는 사람들이 많아 졌다는 것은 그 하위 단계에 대한 분위기가 어느 정도 무르익었.. 2023. 2. 1.
프론트엔드 설계 고민 -6- 요즘 운동에 빠져서 개발을 소홀히하고 있다. 그래서 글쓰는 것도 프로젝트 진행도 느긋하게 지연 되는데.. 원래 쓰려던 내용은 UI 컴포넌트를 구성하는 법에 대한 디테일이였지만 최근에 상태관리에 대해서 어려워 하는 사람들이 많은걸 봐서 인지 상태관리에 대해서 조금 정리하는게 좋을거 같다는 생각이 들었다. 웹 프론트엔드에서의 상태관리 도구의 경우 여러가지가 있지만 큰 맥락은 변하지 않으므로 익숙한 react와 recoil 기준으로 생각을 간단하게 정리해보겠다. 웹프론트 개발자는 웹 어플리케이션을 만든다. 그런데 왜 굳이 웹 사이트를 웹앱이라고 하는 것일까? 오늘날에 와서는 엄밀한 구분이 불가능한 편이지만 기존의 웹 사이트의 경우 정적인 웹에 가까웠다. 단순히 마크업 된 페이지를 제공해주고 사용자 액션에 따라.. 2022. 10. 3.

티스토리툴바