본문 바로가기

프론트엔드29

[react] recoil(state management)은 리액트 19부터 사용이 불가능하다. 예전에 기획해둔 작은 규모의 프로젝트를 미루다가 최근에 개발을 진행하면서 경험한점 + 프론트엔드 상태관리에 대한 짧막한 정리(이전에 정리한거보다 좀더 실사례를 들어서 구체적으로)으로 해볼까한다. 사실 내 성격상 이런 사소한 것들을 글로 쓰는게 의미 있냐?는 의문이 들긴하지만  잘 활성화된 개발 블로그들의 경우 보통 이런 내용들이 많은 유입을 끌어들이는 걸로 보이니 조금은 벤치마킹하는 것도 나쁘지 않을거같다. React 19가 오면서 cra(create-react-app)부트스트랩이 지원종료 한건 소식을 들어서 알고 있었다. 사실 그전부터 별로 좋아하지도 않았던 (특유의 블랙박스, 무거움)부트스트랩이고 개인적으로 보일러플레이트를 만들어서 사용했는데최근(?)에 접했던 번들러인 vite에 대한 경험이 나름 좋.. 2025. 3. 17.
[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.

티스토리툴바