개발 썸네일형 리스트형 Zustand [초간단 정리] [전역 상태 관리 라이브러리] 필자는 Redux로 전역 상태 관리를 할때 redux-tookit과 커스텀 훅을 만들어서 사용하였다. Zustand를 사용하연 위의 두가지를 합쳐놓은 것 같아 코드양도 줄고 사용하기 편한 것 같다. 먼저 store를 만든다. 상태 그룹핑 하기도 편한것 같다 아래 코드를 보면 이해가 될 것이다. import create from 'zustand' const useBearStore = create((set) => ({ bears: 0, increasePopulation: () => set((state) => ({ bears: state.bears + 1 })), removeAllBears: () => set({ bears: 0 }), })) 샘플의 함수 이름 부터가 커스텀 훅(use...) 이다. 컴퍼넌트에.. 더보기 D3 얕은 정리 [완전 기초] D3 (Data Driven Document)란? 단순 번역: 데이터 기반 문서 웹브라우저 상에서 동적이고 정보 시각화를 구현하기 위한 자바스크립트 라이브러리이다 svg(Scalable Vector Graphics) 해석 그대로 확장 가능한 벡터 그래픽이다. 그래픽을 마크업 하기 위한 특수 언어이다. 원이나 다각형, 선등을 지원해준다. w3school svg tutorial API select: 말그대로 선택한다는 뜻이다. jquery 와 문법이 많이 비숫하다. d3.select("body") append: select 로 선택된 요소에 자식요소 (tag) 를 추가 시킬수 있다. d3.select("body").append("svg") attr: attribute의 줄인말이다. 해당 태그의 속성을 추가 .. 더보기 React에서 Swiper 좌우 이동 method 사용하기 (with Typescript) 👆react에서 swiper 라이브러리를 사용하다가 첫번째 아이템으로 이동시켜야 하는 이슈가 생겼다. swiper버전 6.7.0 개발 환경 React & typescript 사용한 swiper method slideTo 사용방법은 swiper 공식 문서에 잘 나와있지만 React&typescript환경에서 정확한 Type과 Hook을 사용한 방법을 찾다가 관련 정보가 많지 않은 것 같아 정리 하게 되었다. https://swiperjs.com/swiper-api#method-swiper-slideTo Swiper API Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing na.. 더보기 javascript 객체 프로퍼티 동적 생성? ( Object property dynamic add?) 어떻게 표현하는지 잘 모르겠지만... 🤪 (아래 코드로 봅시다!) 자바스크립트에서 객체에 프로퍼티를 동적으로 생성? 하는 간단한 코드를 발견하여 기록합니다. 프론트에서 서버로 정보 전달시 빈값에 대한 속성 자체를 보내지 말아달라는 요구 사항을 받을 때가 있습니다. 이슈 { name: '홍길동' age: '20' etc: '' //속성 자체를 제거 해주세요 } //아래와 같이 보내야함 { name: '홍길동' age: '20' } 이럴때 아래와 같이 작성하기 쉽습니다. (나만 그럴지도...) Worst Case //form에 입력된 값을 formData라고 할때 const {name, age, etc} = formData const submit = { name age } if (etc) { submit.e.. 더보기 객체지향의 사실과 오해 - 독후감 지인의 추천으로 가볍게 읽게 된 책으로 내용을 정리해 보았다. 객체를 잘 분리하여 객체간의 역할을 잘 나누고 객체간 협력관계를 잘 구축하는 것이 class 사용보다 중요 -> 상속관계 보다 기능별로 나눈 객체들이 매서드, 이벤트들을 통한 유연한 연결이 더 좋다는 의미로 보인다. 객체를 현실의 객체와 비유하는 언 어패가 있고 새로운 세계를 만드는것 객체 설계시에 행동을 먼저 생각하고 행동에 따라 상태가 변경되어야 한다 행동의 추상화는 자유도 있게 하되 적당한 일반화를 해야함 기능기반이 아닌 구조기반의 설계가 수정에 용이하다 더보기 WebRtc 개발기 Why WebRTC Web Real-Time Communication 말그대로 웹을 통해서 실시간 커뮤니케이션을 하기 위해 생겨난 놈이다. 우리는 원격지의 사람과 소통할때 서로의 얼굴을 보며, 서로의 목소리를 들으며, 때론 채팅을 하고, 문서를 전달 하기를 원한다. 이 모든 것을 WebRTC가 해결해 준다 (두 사람이 영상통화를 한다는 개념으로 설명하기 위해 영상통화를 하는 연출로 진행해 보겠다.) webRTC 3총사(대표 API) getUserMedia(mediaStream)펼치기이를 위한 api이며 해당 api를 통해 생성되는 mediaStream에 음성과 오디오가 담기게 된다. https://webrtc.github.io/samples/src/content/getusermedia/gum/ 우선 얼굴.. 더보기 이전 1 다음
